HQY 一个和谐有爱的空间

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);

}

});

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

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

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

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

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

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

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

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

html2canvas

推荐本站淘宝优惠价购买喜欢的宝贝:

本文链接：https://zblog.hqyman.cn/post/10698.html 非本站原创文章欢迎转载，原创文章需保留本站地址！

休息一下~~