需求：把頁面中的對(duì)話內(nèi)容另存為一張圖片保存到手機(jī)相冊(cè)。
解決方案：這時(shí)我們需要使用到document對(duì)象創(chuàng)建一個(gè)dom對(duì)象計(jì)算對(duì)話內(nèi)容的寬高、位置等，再利用canvas能力將內(nèi)容繪制繪制成一張圖保存。
現(xiàn)狀：總所周知，非H5端，不能使用瀏覽器自帶對(duì)象，比如document、window、localstorage、cookie等，更不能使用jquery等依賴這些瀏覽器對(duì)象的框架。
uniapp解決方案：uniapp文檔提示到App端若要使用操作window、document的庫(kù)，需要通過renderjs來實(shí)現(xiàn)。

首先uniapp是不支持vue3的setup語法糖的，所以獲取到圖片后保存到相冊(cè)邏輯需要這樣寫：

<script>
export default defineComponent({
    setup(props, context) {
        const saveImg = async (url) => {
            uni.saveImageToPhotosAlbum({
                filePath: url,
                success: (res) => {
                    console.log("保存圖片成功");
                },
                fail: (err) => {
                    console.log("保存圖片失敗");
                }
            });
        };
        return {
            saveImg
        };
    }
});
</script>

視圖層中的保存按鈕：

<template>
  <view class="save" @click="sharechat.generateImage">
    {{ t("share") }}
  </view>       
</template>

renderjs生成圖片：

<script module="sharechat" lang="renderjs">  // sharechat和視圖層調(diào)用的一致
export default {
  data(){
    return { }
  },
  computed: {},
  methods: {
    generateImage(event, ownerInstance) {
    // 計(jì)算內(nèi)容寬高，位置
    // canvas dom生成圖片
    // 利用uinapp保存圖片到相冊(cè)
    ownerInstance.callMethod('saveImg', {url: dataURL})
    }
  },
  mounted(){}
}
</script>

此致，就完成了所有的功能了。