微信小程序canva生成图片，长按图片识别小程序二维码详解

下面这个图片就是通过图片和文字等内容合成的一张带有微信小程序二维码的图片，在小程序内部长按可以识别出来：

基本思路是先将内容用canvas排好版，然后把该canvas转化成图片；图片利用wx.previewImage进行展示，才能识别图片中的微信小程序二维码，这是博主目前知道唯一一种识别二维码的手段。

1.合成canvas
wxml:

<canvas canvas-id="mycanvas" class='canvas' id="mycanvas" wx:if="{{isShowCav}}" style='border:1px solid #000000'/>

wxss

.canvas{position: absolute;top: 0;left: 0;z-index: 2000;width: 748rpx;height: 1336rpx;
}

  canvas:function(object){let _this = this;let realWidth, realHeight;//创建节点选择器var query = wx.createSelectorQuery();//选择idquery.select('#mycanvas').boundingClientRect()query.exec(function (res) {//res就是 该元素的信息 数组realWidth = res[0].width;realHeight = res[0].height;console.log('realHeight', realHeight);console.log('realWidth', realWidth);const ctx = wx.createCanvasContext('mycanvas');ctx.drawImage("../../images/ctx-bg.jpg", 0, 0, realWidth, realHeight);ctx.drawImage(_this.data.canvasUserPic, (realWidth * 0.099), (realHeight * 0.052), (realWidth * 0.091), (realWidth * 0.091));ctx.setFontSize(12);ctx.setFillStyle("#a38874");ctx.fillText(object.date, (realWidth * 0.201), (realHeight * 0.076));ctx.setFontSize(14);ctx.setFillStyle("#a38874");ctx.fillText("农历" + object.lunar, (realWidth * 0.201), (realHeight * 0.099));ctx.drawImage("../../images/swiper-bg.png", (realWidth * 0.099), (realHeight * 0.112), (realWidth * 0.8), (realHeight * 0.60));ctx.drawImage(_this.data.canvasShowImg, (realWidth * 0.099), (realHeight * 0.112), (realWidth * 0.8), (realHeight * 0.30));ctx.drawImage("../../images/swiper-detail.png", (realWidth * 0.099), (realHeight * 0.395), (realWidth * 0.8), (realHeight * 0.03));ctx.setFontSize(16);ctx.setFillStyle("#8d7665");ctx.setTextAlign('center')ctx.fillText(object.title1, realWidth/2, _this.calculateWH(2, 620, realWidth, realHeight));ctx.fillText(object.title2, realWidth / 2, _this.calculateWH(2, 666, realWidth, realHeight));ctx.drawImage("../../images/swiper-line.png", (realWidth - realWidth * 0.71)/2, (realHeight * 0.528), (realWidth * 0.71), (realHeight * 0.0195));ctx.drawImage("../../images/luckpic.png", _this.calculateWH(1, 267, realWidth, realHeight), _this.calculateWH(2, 763, realWidth, realHeight), _this.calculateWH(1, 204, realWidth, realHeight), _this.calculateWH(2, 60, realWidth, realHeight));ctx.setFontSize(12);ctx.fillText(object.luck_title, realWidth / 2, _this.calculateWH(2, 880, realWidth, realHeight));ctx.drawImage("../../images/code.jpg", _this.calculateWH(1, 229, realWidth, realHeight), _this.calculateWH(2, 989, realWidth, realHeight), _this.calculateWH(1, 292, realWidth, realHeight), _this.calculateWH(1, 292, realWidth, realHeight))ctx.draw();setTimeout(function () {wx.canvasToTempFilePath({canvasId: 'mycanvas',success: function (res) {var tempFilePath = res.tempFilePath;_this.setData({canvasUrl: tempFilePath})if (tempFilePath !== '') {_this.setData({isShowCav: false});wx.hideLoading();wx.previewImage({current: _this.data.canvasUrl, // 当前显示图片的http链接  urls: [_this.data.canvasUrl], // 需要预览的图片http链接列表  })}},fail: function (res) {console.log(res);}});}, 500);})},

出现问题：
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宽度的一半，它就可以实现居中了。

小程序的坑还是不好踩啊，一肛上半天时间就没了！

微信小程序canva生成图片，长按图片识别小程序二维码详解相关推荐

iOS 开发二维码生成大全(黑白/彩色二维码和带图片的二维码)详解
前言扫描二维码使用的是coreImage框架,属于UIKit框架中的体系,多以使用时不用导入coreImage框架开始之前,让我们谈谈Core Image框架中最重要的几个类: CIContext ...
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
微信小程序开发交流qq群 581478349 承接微信小程序开发.扫码加微信. 正文: 先上效果图,再附上完整源码: 1.多张图片循环渲染后预览.保存.识别带参数二维码 <view w ...
小程序长按识别公众号二维码、个人微信号、企业微信号、微信群、-已实现
一.微信原则上不在支持小程序中长按识别在2020年微信的一次版本更新后,就不在支持在小程序中长按识别微信公众号了. 可以看到这个文章: 紧急!!! 微信8.0版本,在小程序webview内嵌公众号 ...
uniapp小程序中长按识别公众号二维码，企业微信二维码，个人微信二维码
长按识别公众号二维码,企业微信二维码,个人微信二维码效果图通过给image标签添加show-menu-by-longpress="true"属性,实现长按识别功能注意:二维码 ...
微信公众号怎么生成带粉丝关注统计的渠道二维码
关于微信公众号在线生成带粉丝关注统计的渠道二维码,第三方工具微号帮提供了渠道二维码生成功能实现,可以为公众号生成带粉丝关注统计的渠道二维码,可以生成多个不同的渠道二维码,每个渠道二维码都可以单独统计粉 ...
视频图片加文字的二维码怎么做？教你在线制作二维码
想要把视频.图片以及文字做成二维码的时候,要怎么操作呢?其实,方法非常的简单,只需要使用操作简单的二维码生成器(https://www.jzx.com/)就能够快速完成二维码制作的操作.下面,给大家分 ...
基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能
NextQRCode ZXing开源库的精简版 **基于ZXing Android实现生成二维码图片和相机扫描二维码图片即时解码的功能原文博客附源码下载地址** 与原ZXingMini项目对比 N ...
微信公众号开发之生成并扫描带参数的二维码(无需改动)
首先把参考的博文罗列出来: 1.微信公众号开发之生成并扫描带参数的二维码: https://blog.csdn.net/qq_23543983/article/details/80228558 2.由 ...
Vue+element-ui上传logo图片到后端生成二维码展示到页面
Vue+element-ui上传logo图片生成二维码展示到页面该文章将介绍如何通过前端上传二维码logo图片在后台生成二维码,并将生成的二维码转换成Base64编码返回给前端在页面展示,用户扫码二 ...

微信小程序canva生成图片，长按图片识别小程序二维码详解

微信小程序canva生成图片，长按图片识别小程序二维码详解相关推荐

最新文章

热门文章