html2canvas 绘制海报清晰度

场景

使用html2canvas绘制海报，生成海报比较模糊

解决方案

方案一：增大dpi

dpi:DPI是指某些设备分辨率的度量单位。DPI越低，扫描的清晰度越低，DPI越高，清晰度越高。
由于受网络传输速度的影响，web上使用的图片都是72dpi，照片使用300dpi或者更高350dpi，会很清晰。

方案二：增大scale

scale会缩放canvas画布，提高/减小生成图片分辨率

scale: 3, // 按比例增加分辨率 (2=双倍).

方案三：将页面图片引入方式由背景图改为img标签

方案四：分割转换

将目标元素分割为多个小块，并分别进行转换，最后将分割的图片交给后端把图片合成起来

    /**
     * 绘制海报
     * @param {*} picDom
     * @param {*} picRef
     */
    createImgDebris(picDom, picRef) {
      return new Promise(resolve => {
        var targetDom = document.getElementById(picDom);
        const setup = {
          useCORS: true, // 使用跨域
          height: targetDom.scrollHeight - 1, //canvas高, 高度减 1 是为了解决底部出现白线问题
          width: targetDom.scrollWidth, //canvas宽
          scale: this.isPad ? 6 : 7.5, //按比例增加分辨率 (2=双倍).
          // scale: list.length > 25 ? 4.5 : 5.2, //按比例增加分辨率 (2=双倍).
          // dpi: window.devicePixelRatio * 2 //设备像素比
          dpi: window.devicePixelRatio * 2 //设备像素比
        };
        html2canvas(this.$refs[picRef], setup).then(canvas => {
          let blockDataURL = canvas.toDataURL("image/jpg");
          resolve(blockDataURL);
        });
      });
    },
    
    /**
     * 海报生成图片
     */
    creatImg(type) {
      let promiseList = [
        this.createImgDebris("imgBoxBanner", "pictureBanner"),
        this.createImgDebris("imgBoxBox50", "pictureBox50")
      ];
      Promise.all(promiseList).then(resList => {
        this.uploadImg(resList, "image/jpg")
      });
    },

合并上传

    /**
     * 合并上传图片
     * @param {*} imgList
     * @param {*} imgType
     */
    async uploadImg(imgList, imgType = "image/jpg") {
      return new Promise((resolve, reject) => {
        try {
          // 创建 FormData 对象并添加图像数据
          const formData = new FormData();
          for (let len = imgList.length, i = 0; i < len; i++) {
            let img = imgList[i];
            const binaryImageData = atob(img.split(",")[1]);
            // 创建一个缓冲数组来存储二进制数据
            const buffer = new Uint8Array(binaryImageData.length);
            // 将二进制数据复制到缓冲数组中
            for (let i = 0; i < binaryImageData.length; i++) {
              buffer[i] = binaryImageData.charCodeAt(i);
            }
            // 将缓冲数组转换为 Blob 对象
            const blob = new Blob([buffer], { type: imgType });
            formData.append("files", blob, imgType);
          }
          mergeMaterialPost(formData).then(res => {
            resolve(res);
          });
        } catch (error) {
          reject(error);
        }
      });
    },