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>

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/49692.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【SOC 芯片设计 DFT 学习专栏 -- DFT OCC 与 ATPG的介绍】

请阅读【嵌入式及芯片开发学必备专栏】 请阅读【芯片设计 DFT 学习系列 】 如有侵权&#xff0c;请联系删除 转自&#xff1a; 简矽芯学堂 简矽芯学堂 2024年01月18日 09:00 陕西 文章目录 OCC 介绍Fast ScanFull chip ATPGPartition ATPGHierarchical ATPG OCC 介绍 OCC&am…

微信小程序实现聊天界面,发送功能

.wxml <scroll-view scroll-y"true" style"height: {{windowHeight}}px;"><view wx:for"{{chatList}}" wx:for-index"index" wx:for-item"item" style"padding-top:{{index0?30:0}}rpx"><!-- 左…

力扣高频SQL 50题(基础版)第十题

文章目录 力扣高频SQL 50题&#xff08;基础版&#xff09;第十题1661. 每台机器的进程平均运行时间题目说明思路分析实现过程准备数据实现方式结果截图总结 力扣高频SQL 50题&#xff08;基础版&#xff09;第十题 1661. 每台机器的进程平均运行时间 题目说明 表: Activity…

Git merge

Git merge 参考文档&#xff1a; https://marsishandsome.github.io/2019/07/Three_Way_Merge https://git-scm.com/docs/merge-strategies https://stackoverflow.com/questions/56889406/how-does-git-compare-two-files-while-merging Git merge的目标是合并changes&#x…

idea一键为实体类赋值

file -> settings -> plugins -> marketplace 把这个插件装上 找个实体&#xff0c;选中&#xff0c;altenter进入edit界面 我是选择只保留右边这种生成方法&#xff0c;然后选择ok 返回到那个实体&#xff0c;选择&#xff0c;altenter generate生成

创建线程的几种方式

严格来讲&#xff0c;创建线程只有一种方式&#xff0c;就是实现Runnable接口&#xff0c;其他创建线程的方式也是对其封装。 继承Thread方式 public class Thread extends java.lang.Thread {Overridepublic void run() {super.run();} } 进入Thread可以看到&#xff0c;也是…

Spark实时(四):Strctured Streaming简单应用

文章目录 Strctured Streaming简单应用 一、Output Modes输出模式 二、Streaming Table API 三、​​​​​​​​​​​​​​Triggers 1、​​​​​​​unspecified&#xff08;默认模式&#xff09; 2、​​​​​​​​​​​​​​Fixed interval micro-batches&am…

利用Java调用人脸身份证比对接口

一、什么是人脸身份证比对接口&#xff1f; 人脸身份证比对接口是一种特定的 API 接口服务&#xff0c;主要用于将提供的人脸图片和对应的身份证照片/号码进行比对&#xff0c;以此验证其身份。 这种接口的功能基于复杂的人脸识别技术&#xff0c;一般通过使用人工智能和深度学…

C语言刷题小记2

前言 本篇博客还是为大家分享一些C语言的OJ题目&#xff0c;如果你感兴趣&#xff0c;希望大佬一键三连。多多支持。下面进入正文部分。 题目1竞选社长 分析&#xff1a;本题要求我们输入一串字符&#xff0c;并且统计个数的多少&#xff0c;那么我们可以通过getchar函数来获…

软件开发者消除edge浏览器下载时“此应用不安全”的拦截方法

当Microsoft Edge浏览器显示“此应用不安全”或者“已阻止此不安全的下载”这类警告时&#xff0c;通常是因为Windows Defender SmartScreen或者其他安全功能认为下载的文件可能存在安全风险。对于软件开发者来说&#xff0c;大概率是由于软件没有进行数字签名&#xff0c;导致…

【React】useState:状态更新规则详解

文章目录 一、基本用法二、直接修改状态 vs 使用 setState 更新状态三、对象状态的更新四、深层次对象的更新五、函数式更新六、优化性能的建议 在 React 中&#xff0c;useState 是一个非常重要的 Hook&#xff0c;用于在函数组件中添加状态管理功能。正确理解和使用 useState…

未来的智能交通系统:智能合约在交通管理中的应用前景

随着城市化进程的加快和交通问题日益突出&#xff0c;智能交通系统成为了解决城市交通拥堵和安全问题的重要手段。本文将探讨智能合约在未来智能交通系统中的应用前景&#xff0c;分析其在交通管理中的潜力和优势。 什么是智能交通系统&#xff1f; 智能交通系统利用先进的信息…

MySQL之索引及简单运用

索引&#xff1a; 什么是索引 索引是数据库中一种非常重要的数据结构&#xff0c;用于帮助快速查询数据库表中的数据。它就像一本书的目录&#xff0c;能够让你快速定位到书中的某个具体章节或内容&#xff0c;而不需要一页一页地翻阅整本书。 在数据库管理系统中&#xff0c;…

Linux下如何设置系统定时任务

在Linux系统中&#xff0c;用户可以使用cron工具来设置定时任务。cron是一个守护进程&#xff0c;用于在指定的时间间隔执行指定的命令或脚本。下面是在Linux系统中设置系统定时任务的步骤。 使用crontab命令编辑定时任务列表&#xff1a; crontab -e该命令会打开一个文本编辑…

设计模式 之 —— 单例模式

目录 什么是单例模式&#xff1f; 定义 单例模式的主要特点 单例模式的几种设计模式 1.懒汉式&#xff1a;线程不安全 2.懒汉式&#xff1a;线程安全 3.饿汉式 4.双重校验锁 单例模式的优缺点 优点&#xff1a; 缺点&#xff1a; 适用场景&#xff1a; 什么是单例模…

Highcharts 饼图:数据可视化的魅力

Highcharts 饼图:数据可视化的魅力 引言 在数据可视化的世界中,饼图作为一种经典且直观的图表类型,被广泛应用于各种领域。Highcharts,作为一个功能强大且易于使用的JavaScript图表库,为我们提供了创建精美饼图的便捷途径。本文将深入探讨Highcharts饼图的特点、应用场景…

VBA实例-从Excel整理数据到Word

实现目录 功能需求数据结构复制数据到新sheet并分类数据添加序号、日期、时间三列数据添加序号列添加时间列 将名称和类别复制到word文件中将参数5和参数9中的一个复制到word文件中 实例 功能需求 1、将原始数据中不要的数据剔除 2、原始数据中增加序号、日期和时间三列数据&a…

图片上传成功却无法显示:静态资源路径配置问题解析

1、故事的背景 最近&#xff0c;有个学弟做了一个简单的后台管理页面。于是他开始巴拉巴拉撘框架&#xff0c;写代码&#xff0c;一顿操作猛如虎&#xff0c;终于将一个简单的壳子搭建完毕。但是在实现功能&#xff1a;点击头像弹出上传图片进行头像替换的时候&#xff0c;卡壳…

三星Unpacked发布会即将举行:有新款折叠屏手机,还有智能戒指

随着7月的脚步渐近&#xff0c;科技界的目光再次聚焦于三星&#xff0c;它即将在法国巴黎举办今年的第二场Unpacked发布会。这不仅是一场新品的展示&#xff0c;更是三星对创新科技的一次深刻诠释。 从Galaxy Z Fold 6的全新设计&#xff0c;到Galaxy Z Flip 6的显著升级&…

CSS实现表格无限轮播

<div className{styles.tableTh}><div className{styles.thItem} style{{ width: 40% }}>报警名称</div><div className{styles.thItem} style{{ width: 35% }}>开始时间</div><div className{styles.thItem} style{{ width: 25% }}>状态&…