我正在开发一个小项目,它将用户输入作为照片,然后将图像转换为拼贴。该项目在mozilla和safari上运行良好,但有时它在chrome上打破。
以下是我为实现这一目标所采取的步骤。
代码段。
$(".upload-box" ).each(function(index,value)
{
var image_src = $(this).find("img").attr("src");
var caption = $(this).find("#caption > input").val();
if(image_src && image_src.length)
{
var card_class = "pcard"+index;
var card = '<div class="'+card_class+'">'+
'<div class="ptape">'+
'<img src="'+tape_image+'" />'+
'</div>'+
'<div class="pimg">'+
'<img src="'+image_src+'" /> </div>'+
'<div class="pcaption">'+caption+'</div>'+
'</div>';
$('.pholder').append(card);
}
});
以上部分创建了一个模板。
html2canvas($(".pholder"), {
onrendered: function(canvas) {
var photo = canvas.toDataURL('image/png');
//make an ajax call to save photo
}
});
负责将HTML模板转换为画布。
所以第二部分大多数时候都没有在chrome中工作,即画布上的渲染没有正确发生。但这在mozilla和safari上运行良好。
奇怪的是,当我在我的本地网络服务器上运行执行此代码时,它也适用于chrome,但是当在生产服务器上运行时,它不能正确地在画布上呈现,但这又是纯粹的客户端javascript,我可以&#39 ;弄清楚它失败的原因。