html2Canvas关于chrome的问题

时间:2016-04-29 05:56:43

标签: jquery html2canvas

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

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

  1. 使用上传的文件创建并附加html模板 DOM。
  2. 使用html2canvas库我将html模板转换为 canvas,获取dataURL并将其发送到服务器。
  3. 代码段。

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

0 个答案:

没有答案