html2canvas + toDataUrl + ajax,获取空白文件

时间:2015-03-06 19:15:17

标签: ajax loops for-loop canvas html2canvas

我需要使用html2canvas生成各种画布,然后使用ajax传递它们,这样我就可以为每个画布创建一个新文件。 问题是什么?

文件为空(但它们的重量为300kb)

代码的快速解释:

单击按钮时会调用

-generarImagenBuena()。

- 有一个for循环可以对id列表进行排序......它进入GenerateImage以生成每个图像(最重要的部分)

这是代码:

function generarImagenBuena() {

    //Oculta los controles
    $('.controles').hide();
    $('.eliminar').hide();

    //Oculta los bloques sin sub-bloques
    $('.bloque').each(function(i,v)
    {
        if ($(v).find('tr').length==0) //Si este bloque no tiene filas, lo oculta...
        {
            $(v).hide();
        }
    });

    $('.wrapper').css({'zoom':'calc(5.38)'});

    for(var h = 0; h < elements.length; h++)
        GenerateImage(h);

    $('.wrapper').css({'zoom':'calc(1/5.38)'});

    //Vuelve a mostrar los controles
    $('.controles').show();
    $('.eliminar').show();
    $('.bloque').show();

}

function GenerateImage(ii)
{

console.log(elements[ii]);
    //Genera la imagen y la guarda en un archivo
    html2canvas($(elements[ii]), {
        onrendered: function(canvas) {
            theCanvas = canvas;

            // Convert and download as image 
            //Canvas2Image.saveAsPNG(canvas); 
            // Clean up 
            //document.body.removeChild(canvas);

            myImage = canvas.toDataURL("image/png"); 

            $.ajax({ 
                    type: "POST", 
                    url: 'SaveImage.php',
                    dataType: 'text',
                    data: {
                        base64data : myImage,
                        num : ii
                    },
                    success:function(r)
                    {
                        console.log(r);
                    },
                    error:function()
                    {
                        console.log('Falló el ajax, presione Control+F5');
                    }
                });
        }
    });
}

0 个答案:

没有答案