您的位置:首页 > 汽车 > 新车 > uniapp 开发app使用renderjs操作dom

uniapp 开发app使用renderjs操作dom

2024/9/8 10:48:17 来源:https://blog.csdn.net/weixin_40803490/article/details/140655141  浏览:    关键词:uniapp 开发app使用renderjs操作dom

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

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com