北京正邦网站建设东莞网站建设基础

需求：把页面中的对话内容另存为一张图片保存到手机相册。
解决方案：这时我们需要使用到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)}},mounted(){}
}
</script>

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