html2canvas解决图片偏移并下载
var main = {
init: function() {
main.setListener();
},
//设置监听事件
setListener: function() {
var btnShare = $(".getImg");
btnShare.click(function() {
main.html2Canvas();
});
},
//获取像素密度
getPixelRatio: function(context) {
var backingStore = context.backingStorePixelRatio ||
context.webkitBackingStorePixelRatio ||
context.mozBackingStorePixelRatio ||
context.msBackingStorePixelRatio ||
context.oBackingStorePixelRatio ||
context.backingStorePixelRatio || 1;
return (window.devicePixelRatio || 1) / backingStore;
},
//绘制dom 元素，生成截图canvas
html2Canvas: function() {
var shareContent = $("#certificateContent")[0]; // 需要绘制的部分的 (原生）dom 对象 ，注意容器的宽度不要使用百分比，使用固定宽度，避免缩放问题
var width = shareContent.offsetWidth; // 获取(原生）dom 宽度
var height = shareContent.offsetHeight; // 获取(原生）dom 高
var offsetTop = shareContent.offsetTop; //元素距离顶部的偏移量
console.log(width, height);
var canvas = document.createElement('canvas'); //创建canvas 对象
var context = canvas.getContext('2d');
var scaleBy = main.getPixelRatio(context); //获取像素密度的方法 (也可以采用自定义缩放比例)
canvas.width = width * scaleBy; //这里 由于绘制的dom 为固定宽度，居中，所以没有偏移
canvas.height = (height + offsetTop) * scaleBy; // 注意高度问题，由于顶部有个距离所以要加上顶部的距离，解决图像高度偏移问题
context.scale(scaleBy, scaleBy);
var opts = {
//allowTaint: true, //允许加载跨域的图片
tainttest: true, //检测每张图片都已经加载完成
scale: scaleBy, // 添加的scale 参数
canvas: canvas, //自定义 canvas
logging: true, //日志开关，发布的时候记得改成false
width: width, //dom 原始宽度
height: height, //dom 原始高度
y: 170,
allowTaint: false,
useCORS: false
};
html2canvas(shareContent, opts).then(function(canvas) {
this.imgmap = canvas.toDataURL()
if (window.navigator.msSaveOrOpenBlob) {
var bstr = atob(this.imgmap.split(',')[1])
var n = bstr.length
var u8arr = new Uint8Array(n)
while (n--) {
u8arr[n] = bstr.charCodeAt(n)
}
var blob = new Blob([u8arr])
window.navigator.msSaveOrOpenBlob(blob, '个人证书' + '.' + 'png')
} else {
// 这里就按照chrome等新版浏览器来处理
const a = document.createElement('a')
a.href = this.imgmap
a.setAttribute('download', 'chart-download')
a.click()
}
});
}
};
main.init();