一个坑：修改Canvas2Image.js文件
var Canvas2Image = function (){
};
export default Canvas2Image
第二个坑： var canvas2image = new Canvas2Image();要new一下，实例化
长按二维码生成图片
init(){
setTimeout(() => {
that.toImage()
}, 2000);
}
toImage() {
let dom = document.getElementById('zhezhao');//这个是要保存图片的容器
html2canvas(dom, {
backgroundColor: null
}).then((canvas) => {
this.convert2canvas(canvas);
});
},
convert2canvas(vas) {
var shareContent = document.body;
var width = shareContent.offsetWidth;
var height = shareContent.offsetHeight;
var canvas = vas;
var scale = 2;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
dpi: window.devicePixelRatio * 2,
scale: scale,
canvas: canvas,
// logging: true,//日志开关
width: width,
height: height,
useCORS: true
};
let that = this;
html2canvas(shareContent, opts).then(function (canvas) {
var context = canvas.getContext('2d');
context.font = "peachtit";
// 【重要】关闭抗锯齿{实测，没用，不知道哪里错了，希望得到指导~}
context.mozImageSmoothingEnabled = false;
context.webkitImageSmoothingEnabled = false;
context.msImageSmoothingEnabled = false;
context.imageSmoothingEnabled = false;
var canvas2image = new Canvas2Image();
console.log('canvas2image', canvas2image);
var img = canvas2image.convertToJPEG(canvas, canvas.width, canvas.height);
img.style.width = canvas.width / 2 + "px";
img.style.height = canvas.height / 2 + "px";
img.style.position = 'fixed';
img.style.top = 0;
img.style.left = 0;
img.style.opacity = 0;
img.style.zIndex = 99;
img.onclick = function () {
// that.toUpload();
};
document.getElementById('zhezhao').appendChild(img);
});
}
css
#zhezhao{
position absolute;
top:0;
left:0;
bottom:0;
right:0;
}
////////////////最后上线项目的时候，发现部分手机生成了图片，但是二维码不见了，据说是上传图片的时候卡住了，但是上传图片调用的是微信jsapi，还是有点疑惑