小程序图片长按识别功能的实现方法

背景

如今，小程序项目要求个人中心的客服图片在用户长的时候能够识别其二维码

百度失败后，参考小程序的官方文档，发现：

1.文档中有一个提示：

图像组件中的二维码/小程序代码图片不支持长按识别，但仅在wx.previewImage中支持长按识别'

2.即使实现了“wx.previewImage”效果，仍然不支持二维码识别

附录文档位置：长按识别小程序图片

代码设计

幸运的是，这也是一个不错的知识点，所以我们应该在这里记录实施过程，欢迎批评。

.wxml页面元素设计

作为引导界面，就放一张图片，以我的代码为例

//#使用简单的实现，Image src=' http:https://img.fetow.com/public/index/images/shewm.jpg'模式=' width fix ' data-src=' http:3359img.fetow.com/public/index/图像/shewm . jpg ' bind tap=' previewImage '/Image。js文件实现了“previewimage”方法

在相应的js文件中，添加了以下方法

/* * *图片预览方法*这里需要注意的一点是，调用‘wx . previewiimage’时，第二个参数需要是数组形式。*当然，做过图片上传功能的人应该注意，如果涉及多个图片预览，设置的图片链接数组就是参数URL！*/previewImage:函数(e){ var current=e . target . dataset . src；Wx。preview image({ current : current，URLs 3360[current]})}，。达到效果

可以发现下图中没有“识别图片中的二维码”的选项

如果是发给朋友或者自己保存，在微信上打开长按的效果如下：

有一个问题：

1.从服务器发送的图像路径直接插入ctx.drawImage，无法在手机上显示。

解决方案：通过wx.downloadFile下载图片，保存这个新的图片路径，然后放到ctx.drawImage上

//下载show 1:上的图片函数(对象){ let _ this=this_ this . setdata({ isshowcv : true })wx . downloadfile({ URL : object . avatar URL，success : function(sres){ _ this . setdata({ canvasusepic : sres . tempfile path })；wx . downloadfile({ URL : object . show _ img，success : function(sres 1){ _ this . setdata({ canlahowmg : sres 1 . tempfilepath })；_this.canvas(对象)；} } })})})，2.canvas出现在手机顶层，无论z-index设置多少层，都没有用。

解决方案：使用wx:if='{{isShowCav}} '暂时隐藏画布，然后在需要时显示。没必要隐瞒。

3.如何将3.canvas中的字符居中，虽然官方文档提供了示例，但没有说明如何使用。

解决方案：

const CTX=wx . createcanvascontext(' my canvas ')CTX . setstrokestyle(' red ')CTX . move to(150，20)ctx.lineTo(150，170)CTX . stroke(). CTX . setfontsize(15)CTX . settellign(' left ')CTX . fill text(' textAlign=left '，150，60)CTX . settellign(' center ')CTX . fill text(' textAlign=center '，150

这里的中心不是我们经常使用的css的中心；相反，它忽略了文本宽度和高度的含义，因此您仍然需要为文本设置一个(x，y)坐标。只要把这个坐标写在画布一半宽度的地方，就可以居中了。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。