html1canvas截取内容模糊

2018-12-19

var copyDom = $(".containte_edit");
var width = copyDom.outerWidth();
var height = copyDom.outerHeight();
console.log(width,height)
var scale = 2;//放大倍数
var canvas = document.createElement('canvas');
canvas.width = width*scale;//canvas宽度
canvas.height = height*scale;//canvas高度
var content = canvas.getContext("2d");
content.scale(scale,scale);
var rect = copyDom.get(0).getBoundingClientRect();//获取元素相对于视察的偏移量
content.translate(-rect.left,-rect.top);//设置context位置,值为相对于视窗的偏移量负值,让图片复位
html2canvas(copyDom[0], {
dpi: window.devicePixelRatio*2,
scale:scale,
canvas:canvas,
width:width,
heigth:height,
}).then(function (canvas) {
$('body').prepend('<img src="'+pageData+'">')
});