关于html2canvas 绘制图片跨域问题
2019-02-19 本文已影响0人
我讲你思
运行环境:微信,html2canvas版本:1.0.0-alpha.12
页面核心代码:
生成图片的代码:
function createImg() {
let content_html = document.getElementById('downCavas'); //要转化的div
let width = content_html.offsetWidth;
let height = content_html.offsetHeight;
let offsetTop = content_html.offsetTop;
let canvas = document.createElement("canvas");
let context = canvas.getContext('2d');
let scaleBy = Math.ceil(window.devicePixelRatio);
canvas.width = width*scaleBy;
canvas.height = (height+offsetTop)*scaleBy;
context.scale(scaleBy,scaleBy);
var opts = {
useCORS: true,//允许加载跨域的图片
tainttest:true, //检测每张图片都已经加载完成
scale:scaleBy, // 添加的scale 参数
canvas:canvas, //自定义 canvas
logging: false, //日志开关,发布的时候记得改成false
width:width, //dom 原始宽度
height:height //dom 原始高度
};
html2canvas(content_html,opts).then(function (canvas) {
canvas.style.width = width+"px";
canvas.style.height = height+"px";
const imgUrl = canvas.toDataURL("image/png")
var oImgBox = document.createElement("img");
oImgBox.setAttribute("src", imgUrl);
oImgBox.setAttribute("class", "save-canvas-img");
$('.save-el').append(oImgBox)
});
}
html2canvas源码中修改:
image.png