需求 ：把页面中的对话内容另存为一张图片保存到手机相册。
解决方案 ：这时我们需要使用到document对象创建一个dom对象计算对话内容的宽高、位置等，再利用canvas能力将内容绘制绘制成一张图保存。
现状 ：总所周知，非H5端，不能使用浏览器自带对象，比如document、window、localstorage、cookie等，更不能使用jquery等依赖这些浏览器对象的框架。
uniapp解决方案：uniapp文档提示到App端若要使用操作window、document的库，需要通过renderjs来实现。
首先uniapp是不支持vue3的setup语法糖的，所以获取到图片后保存到相册逻辑需要这样写：
<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和视图层调用的一致
export default {
data(){
return { }
},
computed: {},
methods: {
generateImage(event, ownerInstance) {
// 计算内容宽高，位置
// canvas dom生成图片
// 利用uinapp保存图片到相册
ownerInstance.callMethod('saveImg', {url: dataURL})
}
},
mounted(){}
}
</script>
此致，就完成了所有的功能了。