美文网首页前端技术贴
js html2canvas 下载png格式图片,带分辨率

js html2canvas 下载png格式图片,带分辨率

作者: zhudying | 来源:发表于2021-09-03 18:58 被阅读0次

    使用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();
                
            };
    

    相关文章

      网友评论

        本文标题:js html2canvas 下载png格式图片,带分辨率

        本文链接:https://www.haomeiwen.com/subject/uhwkwltx.html