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

Posted 2023-03-15

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

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

插件地址-php

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

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

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

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

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

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