前端技术贴

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();
            
        };
上一篇下一篇

猜你喜欢

热点阅读