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>

js

// 点击图片全屏查看
	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-PLUS
						if (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
					}
				}
			})
		}

	}

参考链接: