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


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 相关文章推荐
一个对于js this关键字的问题
Jan 09 Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 Javascript
JavaScript中对象介绍
Dec 31 Javascript
jquery搜索框效果实现方法
Jan 16 Javascript
原生js结合html5制作小飞龙的简易跳球
Mar 30 Javascript
Angularjs过滤器使用详解
May 25 Javascript
微信小程序 缓存(本地缓存、异步缓存、同步缓存)详解
Jan 17 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
Mar 06 Javascript
微信小程序 跳转传递数据的实例
Jul 06 Javascript
对vue2.0中.vue文件页面跳转之.$router.push的用法详解
Aug 24 Javascript
详解如何在Javascript和Sass之间共享变量
Nov 13 Javascript
jQuery实现简单轮播图效果
Dec 27 jQuery
解决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递归遍历指定目录的文件并统计文件数量的方法
2015/03/24 PHP
PHP读取配置文件类实例(可读取ini,yaml,xml等)
2015/07/28 PHP
yii2 resetful 授权验证详解
2017/05/18 PHP
Laravel5.1 框架数据库操作DB运行原生SQL的方法分析
2020/01/07 PHP
非常不错的一个javascript 类
2006/11/07 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
关于firefox的ElementTraversal 接口 使用说明
2010/11/11 Javascript
js处理php输出时间戳对不上号的解决方法
2014/06/20 Javascript
JavaScript中的普通函数与构造函数比较
2015/04/07 Javascript
JavaScript编程中布尔对象的基本使用
2015/10/25 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
javascript实现表单验证
2016/01/29 Javascript
URL中“#” “?” &amp;“”号的作用浅析
2017/02/04 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
vue.js整合vux中的上拉加载下拉刷新实例教程
2018/01/09 Javascript
echarts实现地图定时切换散点与多图表级联联动详解
2018/08/07 Javascript
VUE在for循环里面根据内容值动态的加入class值的方法
2018/08/12 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
关于layui flow loading占位图的实现方法
2019/09/21 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
vue 验证两次输入的密码是否一致的方法示例
2020/09/29 Javascript
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
centos 安装python3.6环境并配置虚拟环境的详细教程
2018/02/22 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
Python SELENIUM上传文件或图片实现过程
2019/10/28 Python
PyCharm MySQL可视化Database配置过程图解
2020/06/09 Python
python3 中时间戳、时间、日期的转换和加减操作
2020/07/14 Python
Python爬虫+tkinter界面实现历史天气查询的思路详解
2021/02/22 Python
Ellos瑞典官网:北欧地区时尚、美容和住宅领域领先的电子商务网站
2019/11/21 全球购物
意大利时尚奢侈品店:D’Aniello Boutique
2021/01/19 全球购物
小学毕业感言150字
2014/02/05 职场文书
幼儿园教师自荐书
2015/03/06 职场文书
护理专业毕业自我鉴定
2019/08/12 职场文书
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS
字节飞书面试promise.all实现示例
2022/06/16 Javascript