做项目时,用到了html2canvas来把一个分享的弹窗,合成图片再分享出去,但是有个问题一直困扰很久,那就是合成的图片会模糊。网上找了下方法,主要是通过把canvas容器扩大,再将和成的图片进行缩放。具体的代码:
getCanvasImg(obj){
var doc = window.document;
var width = obj.content.offsetWidth;
var height = obj.content.offsetHeight;
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
var scale = 2;
canvas.width = width * scale;
canvas.height = height * scale;
canvas.getContext("2d").scale(scale, scale);
var opts = {
scale: scale,
canvas: canvas,
logging: true,
width: width,
height: height
};
html2canvas(obj.content, opts).then(function (canvas) {
var dataUrl = canvas.toDataURL();
var newImg = doc.createElement("img");
newImg.src = dataUrl;
newImg.id = "qcImg";
//newImg.style.width = "100%";
newImg.style.width = canvas.width/2 + 'px';
newImg.style.height = canvas.height/2 + 'px';
newImg.style.borderRadius = '10px';
newImg.style.webkitBorderRadius = '10px';
obj.box.removeChild(obj.content);
obj.box.appendChild(newImg);
obj.cb&&obj.cb();
});
},
然而线上手机测试生成的图片还是一样会模糊,后来直接把弹窗的背景图去掉,用img标签来引入,然后用div包含img,通过定位处理成和背景一样,再测试图片马上清晰了,困扰已久的问题终于解决掉了。
效果对比:
处理前:
处理后:
总结:合成区域如果有涉及到图片的,不要用背景处理,统统用img标签来引入,然后img一定要用个外框(div或者其他标签)包含住,这样就可以完美解决图片模糊问题了。