html2canvas 将页面转为图片并保存到本地相册

发表于 更新于 分类于

技术点

  • html2canvas：将网页绘制 base64 的图片
  • plus.nativeObj.Bitmap：下载 base64 的 png 图片，临时存放起来
  • uni.saveImageToPhotosAlbum：将临时存放的 png 图片，存放到手机相册
  • plus.io.resolveLocalFileSystemURL：删除临时存放的图片

运用

安装 html2canvas

1
npm install html2canvas

RenderJs

因为 html2canvas 要进行 dom 操作，所以我们得使用 renderjs。script 就要分为两部分，一个是纯的 script 标签块，一个是带有 module、lang 的 script 标签块

通信

两个 script 块之间的通信

1
$ownerInstance.callMethod("METHOD_NAME", params);

权限

manifest.json 配置 android 的写入权限

1
android.permission.WRITE_EXTERNAL_STORAGE

代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<template>
  <view class="html2canvas" :prop="domId" :change:prop="html2canvas.create">
    <slot></slot>
  </view>
</template>

<script>
  export default {
    name: "Html2canvas",
    props: {
      // 需要转为图片的父节点
      domId: {
        type: String,
        required: true
      }
    },
    methods: {
      success(base64) {
        uni.hideToast();
        this.saveHeadImgFile(base64);
        this.$emit("success", base64);
      },
      saveHeadImgFile(base64) {
        const bitmap = new plus.nativeObj.Bitmap("test");
        bitmap.loadBase64Data(
          base64,
          function () {
            const url = "_doc/" + new Date().getTime() + ".png"; // url为时间戳命名方式
            console.log("saveHeadImgFile", url);
            bitmap.save(
              url,
              {
                overwrite: true // 是否覆盖
                // quality: 'quality'  // 图片清晰度
              },
              (i) => {
                uni.saveImageToPhotosAlbum({
                  filePath: url,
                  success: function () {
                    uni.showToast({
                      title: "图片保存成功",
                      icon: "none"
                    });
                    // 图片保存成功后，将临时保存的图片删除
                    plus.io.resolveLocalFileSystemURL(
                      url,
                      function (entry) {
                        entry.getMetadata(function (metadata) {
                          // console.log("fileCount=" + metadata.fileCount);
                          entry.remove(); //删除单个文件 _downloads/ 改文件名
                        });
                      },
                      function (error) {
                        // uni.showToast({ title: "下载文件" });
                        console.log("error" + error);
                      }
                    );
                    bitmap.clear();
                  }
                });
              },
              (e) => {
                uni.showToast({
                  title: "图片保存失败",
                  icon: "none"
                });
                bitmap.clear();
              }
            );
          },
          (e) => {
            uni.showToast({
              title: "图片保存失败",
              icon: "none"
            });
            bitmap.clear();
          }
        );
      },
      showLoading() {
        this.$toast("正在生成海报", {
          icon: "none",
          mask: true,
          duration: 100000
        });
      }
    }
  };
</script>

<script module="html2canvas" lang="renderjs">
  // 这里使用的是 html2canvas 1.4.1
  import html2canvas from "static/js/html2canvas.min.js"; // 将html2canvas文件下载到本地 static/ 目录下
  // import html2canvas from "html2canvas"; // 使用npm将html2canvas安装到 node_modules/ 目录下

  export default {
    methods: {
      async create(domId) {
        try {
          this.$ownerInstance.callMethod("showLoading", true);
          const timeout = setTimeout(async () => {
            const shareContent = document.querySelector(domId);
            const canvas = await html2canvas(shareContent, {
              useCORS: true,
              width: shareContent.offsetWidth,
              height: shareContent.offsetHeight
            });

            const base64 = canvas.toDataURL("image/png", 1);
            this.$ownerInstance.callMethod("success", base64);
            clearTimeout(timeout);
          }, 500);
        } catch (error) {
        }
      }
    }
  };
</script>

<style lang="scss"></style>