html2canvas 图片合成模糊问题解决

做项目时，用到了html2canvas来把一个分享的弹窗，合成图片再分享出去，但是有个问题一直困扰很久，那就是合成的图片会模糊。网上找了下方法，主要是通过把canvas容器扩大，再将和成的图片进行缩放。具体的代码：

getCanvasImg(obj){
            //obj.content为截图内容；boj.box为包含内容的外框
		    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或者其他标签）包裹住，这样就可以很好的解决图片模糊问题了。