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

wx.getImageInfo(Object object)

获取图片信息。网络图片需先配置download域名才能生效。

测试图片地址：http://mmbiz.qpic.cn/mmbiz_png/icTdbqWNOwNTTiaKet81gQJDXYnPiaJFSzRlp9frTTX2hSN01xhiackVLHHrG7ZQI3XQsbM7Gr9USZdN4f26SO5xjg/0?wx_fmt=png

返回的是json对象

{
errMsg:"getImageInfo:ok"

height:571

orientation:"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>
</view>

<view wx:if="{{!!info}}" class='result'>
  <text space="nbsp">{{info}}</text>
</view>

js:

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 '{\n' +
      Object.keys(obj).map(function(key) {
        return '  ' + key + ': ' + obj[key] + ','
      }).join('\n') + '\n' +
      '}'
  },
})

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.png
Page({
  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 '{\n' +
      Object.keys(obj).map(function(key) {
        return '  ' + key + ': ' + obj[key] + ','
      }).join('\n') + '\n' +
      '}'
  },

  //预览图片--实现长按识别微信小程序二维码
  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>点击图片预览-长按识别微信小程序二维码</text>
<canvas id='mycanvas' canvas-id='mycanvas' class='mycanvas'catchtap='clickCanvas'></canvas>

js

// one/one.js
Page({
  /**
   * 页面的初始数据
   */
  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();
  },

})

 

。。。