Question

我正在开发一个小项目，它将用户输入作为照片，然后将图像转换为拼贴。该项目在mozilla和safari上运行良好，但有时它在chrome上打破。

以下是我为实现这一目标所采取的步骤。

使用上传的文件创建并附加html模板 DOM。
使用html2canvas库我将html模板转换为 canvas，获取dataURL并将其发送到服务器。

代码段。

$(".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 ;弄清楚它失败的原因。

html2Canvas关于chrome的问题

0 个答案: