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


Posted in Javascript onAugust 30, 2018

背景

今天,做的小程序项目要求,个人中心的客服图片在用户长按时可以识别其二维码

在百度无果,参考小程序官方文档后,发现:

1.文档中有一句提示:

"image组件中二维码/小程序码图片不支持长按识别,仅在 wx.previewImage 中支持长按识别"

2.即便实现了 “wx.previewImage” 效果,但依旧是不支持二维码识别的

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

代码设计

好在这也是一个不错的知识点,在此进行一番实现流程的记录,欢迎指摘.

①. wxml 页面元素设计

作为引导界面,只需放置一张图片即可,以我的代码为例

//# 使用简单的实现方式,直接赋值一个图片链接得了
<image src="https://img.fetow.com/Public/Index/images/shewm.jpg" mode="widthFix" 
 data-src="https://img.fetow.com/Public/Index/images/shewm.jpg" 
 bindtap="previewImage"></image>

②. js 文件实现 “previewImage”方法

在对应的 js 文件中,添加了如下的方法

/**
 * 图片预览方法
 * 此处注意的一点就是,调用 "wx.previewImage"时,第二个参数要求为数组形式哦
 * 当然,做过图片上传功能的应该会注意到,如果涉及到多张图片预览,图片链接数组集合即为参数 urls!
 */ 
 previewImage: function(e) {
 var current = e.target.dataset.src;
 wx.previewImage({
  current: current,
  urls: [current]
 })
 },

③. 实现效果

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

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

如果发送给了好友或者自行保存后,在微信中打开的并长按的效果如下:

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

出现问题:

1.服务器上发送过来的图片路径直接插进ctx.drawImage 上,手机上显示不了。

解决方案:利用wx.downloadFile 将图片下载再保存好这个新图片路径,然后放到ctx.drawImage 上

//下载图片
 onShow1: function (object) {
 let _this = this;
 _this.setData({
  isShowCav: true
 })
 wx.downloadFile({
  url: object.avatarurl,
  success: function (sres) {
  _this.setData({
   canvasUserPic: sres.tempFilePath
  });
  wx.downloadFile({
   url: object.show_img,
   success: function (sres1) {
   _this.setData({
    canvasShowImg: sres1.tempFilePath
   });
   _this.canvas(object);
   }
  })
  }
 })
 },

2.canvas出现在手机上的顶层,不管z-index设置多少层都没有用。

解决方案:利用wx:if="{{isShowCav}}" 将canvas临时隐藏,要用到的时候再显示。不用再隐藏掉。

3.canvas里面的文字如何居中,官方文档虽然提供了案例,但是没有说具体是怎么用的。

解决方案:

const ctx = wx.createCanvasContext('myCanvas')

ctx.setStrokeStyle('red')
ctx.moveTo(150, 20)
ctx.lineTo(150, 170)
ctx.stroke()

ctx.setFontSize(15)
ctx.setTextAlign('left')
ctx.fillText('textAlign=left', 150, 60)

ctx.setTextAlign('center')
ctx.fillText('textAlign=center', 150, 80)

ctx.setTextAlign('right')
ctx.fillText('textAlign=right', 150, 100)

ctx.draw()

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

这里面的居中不是我们常用的css那种居中;而是忽略了文字宽高的意思,所以你还是要给文字设置一个(x,y)坐标,只要将这个坐标写上canvas宽度的一半,它就可以实现居中了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
浏览器的JavaScript引擎的识别方法
Oct 20 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
JS方法调用括号的问题探讨
Jan 24 Javascript
javascript的解析执行顺序在各个浏览器中的不同
Mar 17 Javascript
JavaScript中的变量作用域介绍
Dec 31 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
JavaScript使ifram跨域相互访问及与PHP通信的实例
Mar 03 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
利用JavaScript阻止表单提交的两种方法
Aug 11 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
使用react实现手机号的数据同步显示功能的示例代码
Apr 03 Javascript
Nest.js参数校验和自定义返回数据格式详解
Mar 29 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 #Javascript
解决Js先触发失去焦点事件再执行点击事件的问题
Aug 30 #Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 #Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 #Javascript
在Vue methods中调用filters里的过滤器实例
Aug 30 #Javascript
vue 根据数组中某一项的值进行排序的方法
Aug 30 #Javascript
对vue中methods互相调用的方法详解
Aug 30 #Javascript
You might like
php实现的zip文件内容比较类
2014/09/24 PHP
Laravel Memcached缓存驱动的配置与应用方法分析
2016/10/08 PHP
ZendFramework2连接数据库操作实例
2017/04/18 PHP
php获取手机端的号码以及ip地址实例代码
2018/09/12 PHP
js 图片轮播(5张图片)
2008/12/30 Javascript
js apply/call/caller/callee/bind使用方法与区别分析
2009/10/28 Javascript
使用dynatrace-ajax跟踪JavaScript的性能
2010/04/12 Javascript
基于jquery的网页SELECT下拉框美化代码
2010/10/28 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
详解js前端代码异常监控
2017/01/11 Javascript
Angular组件化管理实现方法分析
2017/03/17 Javascript
详解Vue中添加过渡效果
2017/03/20 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
js实现canvas保存图片为png格式并下载到本地的方法
2017/08/31 Javascript
[03:42]2014DOTA2西雅图国际邀请赛 Navi战队巡礼
2014/07/07 DOTA
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
Python sqlite3事务处理方法实例分析
2017/06/19 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python机器学习之KNN分类算法
2018/08/29 Python
Python3 串口接收与发送16进制数据包的实例
2019/06/12 Python
Python 实现训练集、测试集随机划分
2020/01/08 Python
Python logging模块写入中文出现乱码
2020/05/21 Python
主题婚礼策划方案
2014/02/10 职场文书
小学节能减排倡议书
2014/05/15 职场文书
面试必备的求职信
2014/05/25 职场文书
运动会口号8字
2014/06/07 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
上班迟到检讨书范文300字
2014/11/02 职场文书
2014年幼儿园小班工作总结
2014/12/04 职场文书
免职通知
2015/04/23 职场文书
钓鱼岛事件感想
2015/08/11 职场文书
高中诗歌鉴赏教学反思
2016/02/16 职场文书
导游词之大雁塔景区
2019/09/17 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫