1.模糊的问题:不要把背景图做为background的元素添加,要插入dom里面
2.文字模糊的问题 加大scale 值 就是放大倍数 不过图片的容量会变大 我加到3
3. html2canvas 支持的css方面很弱 最好用position来定位
上代码片段
function cloneImg(){
var shareContent = document.getElementById('bg');
var width = shareContent.offsetWidth;
var height = shareContent.offsetHeight;
var canvas = document.createElement("canvas");
var scale = 3;
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,
useCORS: true,
dpi:300
};
html2canvas(shareContent, opts).then(function (canvas) {
IMAGE_URL = canvas.toDataURL("image/png");
var img=new Image();
img.src=IMAGE_URL
img.onload=function(){
$("#clone").append(img)
$("#loading").hide()
$("#bg").hide();
}
})
}
复制代码
<div>
<img src="img/bg.png" alt="" class="imgbg">
</div>
复制代码
转载于:https://juejin.im/post/5cb92ed951882545e13125ba