前端使用 html2canvas 插件实现保存图片功能

最新推荐文章于 2024-08-22 11:32:42 发布

爱吃一块五花肉

最新推荐文章于 2024-08-22 11:32:42 发布

阅读量745

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/yyanglirong/article/details/128532650

版权

下载好插件后

onExport() {
      let that = this;
      //imageWrapper  vue中可直接给元素绑定ref
      const clientWidth = this.$refs.imageWrapper.offsetWidth;
      const clientHeight = this.$refs.imageWrapper.offsetHeight;
      const kh = [clientWidth, clientHeight];
      html2canvas(this.$refs.imageWrapper, {
        scale: 2 * 0.8, // scale 参数
        allowTaint: true,
        useCORS: true,
        logging: true,
      }).then((canvas) => {
        // 缩小成想要的比例，因为直接保存下来的图片清晰度不高，所以采用放大缩小的方式优化清晰度
        const w = 690;
        const h = 1200;
        // 这里可以指定保存下来的图片比例
        const elem = document.createElement("canvas");
        elem.width = w;
        elem.height = h;
        const ctx = elem.getContext("2d");
        ctx.imageSmoothingEnabled = true;
        ctx.imageSmoothingQuality = "high";
        ctx.drawImage(canvas, 0, 0, w, h);
        canvas = elem;
        let dataURL = canvas.toDataURL();
        let base64 = dataURL.split(",")[1];
        eshimin.invoke(
          "saveImage",
          {
            type: "base64",
            data: base64,
            name: "xxx.png",
          },
          function (response) {
            Toast("保存图片成功，请到相册查看~");
            var success = response.errorCode == 0;
          }
        );
      });
    },