html2canvas截取div内容下载解决图片模糊和图片偏移
$("#btnsave").click(function(){
var copyDom = $("#modalcontent");
var width = copyDom.offsetWidth;//dom宽
var height = copyDom.offsetHeight;//dom高
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) {
var url = canvas.toDataURL();
var triggerDownload = $("<a>").attr("href", url).attr("download", "详情.png").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();
});
})
用的是2018 年8月22号在官网上下载的html2canvas.js代码。上述代码可以解决图片模糊和偏移的问题。
另外还有一种方法，设置配置即可，不存在图片偏移的问题，需要下载新版本，老版本的js不能用。
dpi: window.devicePixelRatio,scale:2,这两个配置 DPI是指每英寸的像素，scale是按比例增加像素
$("#btnsave").click(function(){
var copyDom = $("#modalcontent");
var width = copyDom.offsetWidth;//dom宽
var height = copyDom.offsetHeight;//dom高
var scale = 2;//放大倍数
html2canvas(copyDom[0], {
dpi: window.devicePixelRatio*2,
scale:scale,
width:width,
heigth:height,
}).then(function (canvas) {
var url = canvas.toDataURL();
var triggerDownload = $("<a>").attr("href", url).attr("download", "详情.png").appendTo("body");
triggerDownload[0].click();
triggerDownload.remove();
});
})
