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


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 相关文章推荐
jquery学习笔记 用jquery实现无刷新登录
Aug 08 Javascript
JavaScript Scoping and Hoisting 翻译
Jul 03 Javascript
js控制页面控件隐藏显示的两种方法介绍
Oct 09 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
js限制文本框的输入内容代码分享(3类)
Aug 20 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
使用angular帮你实现拖拽的示例
Jul 05 Javascript
快速理解 JavaScript 中的 LHS 和 RHS 查询的用法
Aug 24 Javascript
JavaScript中严格判断NaN的方法
Feb 16 Javascript
ExtJs使用自定义插件动态保存表头配置(隐藏或显示)
Sep 25 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 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中的数组操作函数整理
2008/08/18 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
js去除重复字符串两种实现方法
2013/01/09 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
jQuery基本过滤选择器使用介绍
2013/04/18 Javascript
javascript loadScript异步加载脚本示例讲解
2013/11/14 Javascript
javascript的alert box在java中如何显示多行
2014/05/18 Javascript
JavaScript实现数字数组正序排列的方法
2015/04/06 Javascript
编写高性能Javascript代码的N条建议
2015/10/12 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
基于JavaScript实现熔岩灯效果导航菜单
2017/01/04 Javascript
socket.io学习教程之基本应用(二)
2017/04/29 Javascript
原生JS实现图片懒加载(lazyload)实例
2017/06/13 Javascript
详解Vue2.0配置mint-ui踩过的那些坑
2018/04/23 Javascript
详解element-ui动态限定的日期范围选择器代码片段
2020/07/03 Javascript
[11:42]2018DOTA2国际邀请赛寻真——OG卷土重来
2018/08/17 DOTA
Django中使用group_by的方法
2015/05/26 Python
Python 内置函数memoryview(obj)的具体用法
2017/11/23 Python
5款Python程序员高频使用开发工具推荐
2019/04/10 Python
python将视频转换为全字符视频
2019/04/26 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
英国文胸专家:AmpleBosom.com
2018/02/06 全球购物
俄罗斯隐形眼镜和眼镜在线商店:Cronos
2020/06/02 全球购物
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
2013年员工自我评价范文
2013/12/27 职场文书
期末考试动员演讲稿
2014/01/10 职场文书
《小小竹排画中游》教学反思
2014/02/26 职场文书
交通安全寄语大全
2014/04/08 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
详解MySQL中的pid与socket
2021/06/15 MySQL
Pygame如何使用精灵和碰撞检测
2021/11/17 Python