我需要使用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');
}
});
}
});
}