E企盈营销工具技术服务商 热线:4006-838-530

微信小程序预览图片识别二维码

E企盈直播平台营销卖货系统

wx.getImageInfo(Object object)获取图片信息。网络图片需先配置download域名才能生效。测试图片地址:http://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNTTiaKet81gQJDXYnPiaJFSzRlp9frTTX2hSN01xhiackVLHHrG7ZQI3XQsbM7Gr9USZdN4f26SO5xjg/0?wx_fmt=png返回的是json对象{errMsg:”getImageInfo:ok”height:571orientation:”up”path:”http://tmp/wxf49d67c14c9ef0ff.o6zAJs6cx-EB2WgljD1LQeGeFeX8.yHfdOM4R5taD297ff4e4aea3acaa3ec94eba8c6de637.png”type:”png”width:750}布局:view class=”weui-panel”  view class=”weui-panel__hd”/view  view class=”weui-panel__bd”    image mode=’widthFix’ src=”{{src}}” style=’width: 300px;’/image    button bindtap=”getImageInfo”getImageInfo/button  /view  view class=”weui-panel__ft”/view/viewview wx:if=”{{!!info}}” class=’result’  text space=”nbsp”{{info}}/text/viewjs:const app = getApp()Page({  data: {    src: ‘http://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNTTiaKet81gQJDXYnPiaJFSzRlp9frTTX2hSN01xhiackVLHHrG7ZQI3XQsbM7Gr9USZdN4f26SO5xjg/0?wx_fmt=png’,    info: ”,  },  getImageInfo() {    wx.getImageInfo({      src: this.data.src,      complete: (res) = {        console.log(res)        console.log(res.path)        // 返回的是json对象        this.setData({          info: this.format(res)        })      }    })  },  //格式化json对象,打印成字符串格式  format(obj) {    // Object.keys(obj)    // Object.keys 返回一个所有元素为字符串的数组    // Object.keys(obj).map    // map() 方法创建一个新数组    // 使用 map 重新格式化数组中的对象    return ‘{‘ +      Object.keys(obj).map(function(key) {        return ‘  ‘ + key + ‘: ‘ + obj[key] + ‘,’      }).join(”) + ” +      ‘}’  },})css:.result {  overflow-x: scroll;  margin: 10px;  padding: 10px;  font-size: 14px;  border-radius: 5px;  border: 1px solid #DDD;}预览小程序二维码,长按识别小程序二维码:const app = getApp()// http://img.91ud.com/FhdFil9weQuZb9Hr_YccFkIxcMJX/256// ../ images / qq – map.pngPage({  data: {    src: ‘http://img.91ud.com/FhdFil9weQuZb9Hr_YccFkIxcMJX/256’,    info: ”,  },  getImageInfo() {    wx.getImageInfo({      src: this.data.src,      complete: (res) = {        console.log(res)        console.log(res.path)        // 返回的是json对象        this.setData({          canvasUrl: res.path,          info: this.format(res),        })        this.previewImage()      }    })  },  //格式化json对象,打印成字符串格式  format(obj) {    // Object.keys(obj)    // Object.keys 返回一个所有元素为字符串的数组    // Object.keys(obj).map    // map() 方法创建一个新数组    // 使用 map 重新格式化数组中的对象    return ‘{‘ +      Object.keys(obj).map(function(key) {        return ‘  ‘ + key + ‘: ‘ + obj[key] + ‘,’      }).join(”) + ” +      ‘}’  },  //预览图片–实现长按识别微信小程序二维码  previewImage: function (e) {    console.log(‘previewImage’)    wx.previewImage({      current: this.data.canvasUrl, // 当前显示图片的http链接         urls: [this.data.canvasUrl] // 需要预览的图片http链接列表       })  },})问题:wx.getImageInfo获取本地图片用的是本地地址 ,wx.previewImage要使用网络图片,本地图片预览不了。解决:在页面初始化onLoad的时候使用canvas画图,生成临时网络地址,然后点击画布图片进行预览wxml!–one/one.wxml–text点击图片预览-长按识别微信小程序二维码/textcanvas id=’mycanvas’ canvas-id=’mycanvas’ class=’mycanvas’catchtap=’clickCanvas’/canvasjs// one/one.jsPage({  /**   * 页面的初始数据   */  data: {    image: “../images/qq-map.png”,  },  //生成临时网络图片地址,预览图片,长按识别二维码  clickCanvas: function() {    console.log(‘clickCanvas’)    let _this = this;    //延时0.5s    setTimeout(function() {      // 把当前画布指定区域的内容导出生成指定大小的图片      wx.canvasToTempFilePath({        canvasId: ‘mycanvas’,        success: function(res) {          var tempFilePath = res.tempFilePath;          console.log(‘tempFilePath=’, tempFilePath);          _this.setData({            canvasUrl: tempFilePath          })          if (tempFilePath !== ”) {            wx.hideLoading();            wx.previewImage({              current: _this.data.canvasUrl, // 当前显示图片的http链接                urls: [_this.data.canvasUrl], // 需要预览的图片http链接列表              })          }        },        fail: function(res) {          console.log(res);        }      });    }, 500);  },  //画二维码  canvas: function() {    console.log(‘canvas’);    let _this = this;    let realWidth, realHeight;    //创建节点选择器    var query = wx.createSelectorQuery();    //选择id    query.select(‘#mycanvas’).boundingClientRect();    const ctx = wx.createCanvasContext(‘mycanvas’);    query.exec(function(res) {      //res就是 该元素的信息 数组      realWidth = res[0].width;      realHeight = res[0].height;      console.log(‘realHeight’, realHeight);      console.log(‘realWidth’, realWidth);      ctx.drawImage(_this.data.image, 0, 0, realWidth, realHeight);      ctx.draw();    })  },  /**   * 生命周期函数–监听页面加载   */  onLoad: function(options) {    this.canvas();  },}) 。。。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序预览图片识别二维码
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏