uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片

富文本一定要使用uniapp提供的<rich-text>标签，不要使用 v-html
- 因为<rich-text>标签提供了拦截点击事件@itemclick，可以拦截点击事件（只支持a、img标签），返回当前节点信息
```
<rich-text :nodes="appInfo.content" @itemclick="goImgDetials">
</rich-text>
```
上面的操作能够获取到富文本中的图片标签，就可以使用 uni.previewImage对图片进行预览操作

使用uni.downloadFile对图片文件进行下载

利用H5+规范 (注意H5端不能使用)

    // 将图片保存到系统相册void plus.gallery.save( path, successCB, errorCB );

// 扫码识别图片中的条码
void plus.barcode.scan(path, successCB, errorCB, filters, autoDecodeCharset);

完整代码

html

<rich-text :nodes="appInfo.content" @itemclick="goImgDetials">
</rich-text>

// 点击图片全屏查看const goImgDetials = function(e) {let item = e.detail.node;if (item.name == "img") {uni.previewImage({urls: [item.attrs.src],longPressActions: {itemList: ["保存到相册", "识别二维码"],itemColor: "#007AFF",success: function(data) {let {tapIndex,index} = data;// tapIndex 第几个按钮// index 第几张图片//#ifdef APP-PLUSif (tapIndex == 0) {// 保存到相册plus.gallery.save(item.attrs.src, () => {uni.showToast({icon: "none",title: "保存成功!"})}, () => {uni.showToast({icon: "none",title: "保存失败!"})})} else {// 现将文件下载到本地uni.downloadFile({url: item.attrs.src,success: (args) => {// 扫描二维码plus.barcode.scan(args.tempFilePath,(code, url) => {// 如果识别成功if (code == 0) {// 打开扫描结果plus.runtime.openURL(url)}},(err) => {uni.showToast({icon: 'none',title: "图中没有可识别的二维码"})console.log(err, 'err');},[plus.barcode.QR],true)},fail: () => {}})}//#endif}}})}}

参考链接:

uniapp 提供的基础组件 rich-text
h5+规范

uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片相关推荐

uniapp 微信小程序长按识别二维码，跳转小程序、个人微信
前言: 业务要求是小程序放一个二维码图片,长按可以识别二维码,进而识别出个人微信,添加个人微信:我们可以通过uni.previewImage(OBJECT)或者wx.previewImage(Obje ...
前端页面中iOS版微信长按识别二维码的bug
问题描述: H5首页banner图,在安卓微信内长按可识别二维码,但在ios部分机型上,长按图片识别不了二维码. 测试机型: iphone6s plus 系统12.1 微信版本6.7.4 iphone ...
[转]如何解决Windows图片预览窗口无法显示图片缩略图
问:我的电脑中安装的是Windows 2000,最近发现文件夹的图片预览功能不能使用了,也就是说图片预览窗口无法显示图片缩略图了,在该位置上只有文件的图标.请问这是 ...
微信小程序-预览图片识别二维码
wx.getImageInfo(Object object) 获取图片信息.网络图片需先配置download域名才能生效. 测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/ ...
用uni.previewImage({}) 来直接做图片的预览和识别二维码
需求: 客户要求用户不用截图保存,通过直接用手机识别二维码关注,所以,这就需要我们进行图片的预览即可以解决. <image src="https://lr-huayoushi.oss- ...
uniapp打包微信小程序识别二维码
1.image标签长按识别实现(微信版本>2.7.0) 为image标签设置 show-menu-by-longpress="true"可实现识别二维码(微信个人码.微信群码 ...
【Android App】人脸识别中扫描识别二维码实战解析（附源码和演示超详细）
需要源码请点赞关注收藏后评论区留言私信~~~ 一.扫描识别二维码不仅可以利用zxing库生成二维码,同样利用zxing库可以扫描二维码并解析得到原始文本,此时除了给build.gradle添加如下一 ...
USB摄像头预览识别二维码
博客: 安卓之家掘金: jp1017 微博: 追风917 CSDN: 蒋朋的家简书: 追风917 前言二维码现在用的超级多,其实它就是一种编码,把字符串编码保存成一个图片,我们扫描图片得到字符串 ...
js 通过摄像头识别二维码，可以控制闪光灯。原生 HTML 调用摄像头，有原生HTML + JS 版本和 VUE3 + TS 版本与 uniapp 版本
开发背景最开始公司说到这个需求的时候第一个想法是使用微信的 js SDK 接入微信的扫一扫.但是得知所做的这个功能模块是需要嵌入到之前开发的app中,所以就只有使用 js 原生的 API 来开发了. ...

uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片

uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片

完整代码

uniapp 对富文本中的图片预览及长按图片识别二维码/保存图片相关推荐

最新文章

热门文章