html2canvas截取div内容下载解决图片模糊和图片偏移

时间 2019-11-24

标签 html2canvas html canvas 截取 div 内容下载解决图片模糊偏移栏目 HTML 繁體版

原文原文链接

$("#btnsave").click(function(){html

var copyDom = $("#modalcontent");canvas

var width = copyDom.offsetWidth;//dom宽app

var height = copyDom.offsetHeight;//dom高dom

var scale = 2;//放大倍数url

var canvas = document.createElement('canvas');spa

canvas.width = width*scale;//canvas宽度code

canvas.height = height*scale;//canvas高度htm

var content = canvas.getContext("2d");图片

content.scale(scale,scale);ci

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;//放大倍数