js html2canvas 下载png格式图片,带分辨率
2021-09-03 本文已影响0人
zhudying
使用html2canvas下载图片时,当图片放大会变得模糊,作者在源码里加入了api和scale属性
scale 是比例,按比例增加分辨率 (2=双倍)。
dpi 是指每英寸的像素,也就是扫描精度 dpi 越低,扫描的清晰度越低,由于受网络传输速度的影响,web 上使用的图片 是 72dpi,但是冲洗照片不能使用这个参数,必须是 300dpi 或者更高 350dpi。例如要冲洗 46 英寸的照片,扫描精度必须是 300dpi,那么文件尺寸应该是(4300)(6300)=1200 像素*1800 像素。 只要增大 dpi 或者 scale 肯定能使同样宽高的图像变得清晰,那么模糊的问题也就不存在了。
html2canvas源码见(https://github.com/zhudying/html2canvas/tree/main/js)
npm包里源码是没有api和scale属性的
async function screenshots(){
const dom = document.getElementById("box")
let url = await getPdfImg(dom)
down(url,'截图')
}
function getPdfImg(dom) {
return new Promise((resolve, reiect) => {
html2canvas(dom, {
dpi: 300,
useCORS: true, // 跨域设置-- img 增加 crossorigin="anonymous" 属性
onrendered: function(image) {
let url = image.toDataURL('image/png', 1.0); // 生成base64图片
resolve(url);// 返回url
},
});
});
}
// 下载功能
function down(url, title) {
const a = document.createElement('a');
a.download = title
a.setAttribute('href', url); // 下载
a.click();
a.remove();
};