html2canvas 像素,html2canvas生成图片模糊 不清楚？两种解决方法

项目需求：需要把当前整个页面的数据生成为一个图片，可以让用户长按图片保存到本地手机

在网上查到生成图片的有一个插件，叫做 html2canvas 可以把你想要转变的元素变为图片，开始很顺利，但是生成后的图片，和实际的页面不符合，图片不清晰，模糊的情况，网上大部分的解决方案是通过把 canvas 容器扩大，再将和成的图片进行缩放。这一种可以达到效果，就是麻烦，还有一个方法直接就可以解决，推荐大家使用第二种方法

第一种方法：(亲测有效----就是麻烦)

// 本地的 html2canvas 版本为 "^0.5.0-beta4",

import html2canvas from 'html2canvas';

DPR() { // 获取设备dpi

if (window.devicePixelRatio && window.devicePixelRatio > 1) {

return window.devicePixelRatio;

}

return 1;

},

async drawCanvas() {

await setTimeout(() => {

// 获取想要转换的 DOM 节点

const dom = document.querySelector('.report');

const box = window.getComputedStyle(dom);

// DOM 节点计算后宽高

const width = parseInt(box.width, 1