html2canvas页面内容生成图片，并解决图片清晰度模糊问题，亲测有效

直接看需求，需要把下面的预览效果图生成图片并保存到本地
已实现此功能，成功保存到本地

截下来上代码

第一步，安装

npm install --save html2canvas

第二步，使用

这里的const scaleBy = 4就是把图片放大，像素比增加了，图片自然就清晰了，div里面的内容我就不写了，直接写js相关代码

import html2Canvas from "html2canvas";

getImage() {
      // 获取想要转换的 DOM 节点 #pdfDom你的div内容
      const dom = document.querySelector("#pdfDom");
      const box = window.getComputedStyle(dom);
      // DOM 节点计算后宽高
      const width = parseInt(box.width, 10);
      const height = parseInt(box.height, 10);
      // 设置像素比，这里就是解决图片模糊的问题，正常比例是1，我们给他改成4
      // 像素扩大四倍，四倍已经很清晰了，如果不够可以自己在加高
      const scaleBy = 4;
      // 创建自定义 canvas 元素
      const canvas = document.createElement("canvas");
      // 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
      canvas.width = width * scaleBy;
      canvas.height = height * scaleBy;
      // 设定 canvas css宽高为 DOM 节点宽高
      canvas.style.width = `${width}px`;
      canvas.style.height = `${height}px`;
      // 获取画笔
      const context = canvas.getContext("2d");
      // 将所有绘制内容放大像素比倍
      context.scale(scaleBy, scaleBy);
      // 将自定义 canvas 作为配置项传入，开始绘制
      html2Canvas(dom, { canvas, background: "#ffffff" }).then((canvas) => {
        let pageData = canvas.toDataURL();
        let link = document.createElement("a");
        link.href = pageData;
        link.download = "qimin.png";
        link.click();
      });
    },

好了，兄弟们，学废了吗今天！