html2canvas 问题总结(跨域 黑边 超时)

1.首先是跨域问题

最近项目中有一个功能，是实现一个拼图功能，然后使用到了html2canvas这个库，在使用的过程中遇到了跨域问题
主要是canvas的todataurl这个方法，不能拿到别的域名下的资源

因为网站是用的php做的，这里就记录一下php的方式
我们需要把html2canvasproxy.php 这个脚本放到一个指定文件夹，然后配置"proxy":"/lib/html2canvas/html2canvasproxy.php"

var ele = document.getElementById('container');
    html2canvas(ele,{
        "proxy":"/lib/html2canvas/html2canvasproxy.php",//跨域支持
        background : '#ffffff',
        onrendered : function(canvas){
            var img = canvas.toDataURL("image/jpeg");
            window.open(img);

        }
    });

插件地址-php

2.如果现在还不行，可以直接在浏览器里面访问这个脚本文件

例如:http://www.domain.com/html2canvasproxy.php 查看提示信息
我这边后面把timeout改小了，改为了10

3.再一个问题就是，如果当前要截取的区域在可视区域之外，截取会丢失

例如我如果要截取的是下面的区域

如果我现在滚动了滚动条，导致当前区域有一部分在可视区域外了，例如下图

截取出来的图片就是下面这样了，可视区域之外的地方就丢失了

为了解决这个问题，我就手动把滚动条移动到顶部了$("body,html").scrollTop(0);，把当前需要截取的区域给全部显示全，然后再执行html2canvas方法

4.当在生成图片的时候，我们切换了页面，有可能生成的图会是一张空白

我的理解是，当我生成的时候，如果切换了页面，有可能导致背景色覆盖到生成的图片上，看起来就像是一张空白图，我是直接把背景去掉就解决了。
html2canvas