小程序从本地相册选择图片或使用相机拍照wx.chooseImage上传后预览并可以识别图中二维码

官方文档://参考

wx.chooseImage(OBJECT)

从本地相册选择图片或使用相机拍照。

OBJECT参数说明:

参数 类型 必填 说明
count Number 最多可以选择的图片张数,默认9
sizeType StringArray original 原图,compressed 压缩图,默认二者都有
sourceType StringArray album 从相册选图,camera 使用相机,默认二者都有
success Function 成功则返回图片的本地文件路径列表 tempFilePaths
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。

success返回参数说明:

参数 类型 说明 最低版本
tempFilePaths StringArray 图片的本地文件路径列表  
tempFiles ObjectArray 图片的本地文件列表,每一项是一个 File 对象 1.2.0

File 对象结构如下:

字段 类型 说明
path String 本地文件路径
size Number 本地文件大小,单位:B

示例代码:

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  success: function (res) {
    // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
    var tempFilePaths = res.tempFilePaths
  }
})

wx.previewImage(OBJECT)

预览图片。

OBJECT参数说明:

参数 类型 必填 说明
current String 当前显示图片的链接,不填则默认为 urls 的第一张
urls StringArray 需要预览的图片链接列表
success Function 接口调用成功的回调函数
fail Function 接口调用失败的回调函数
complete Function 接口调用结束的回调函数(调用成功、失败都会执行)

示例代码:

wx.previewImage({
  current: '', // 当前显示图片的http链接
  urls: [] // 需要预览的图片http链接列表
})

以上是官方示例文档;

下面是我自己在开发小程序时遇到的索性就写一下

前台代码:

//调用图片选择和相机
//图片上传后预览、保存、识别
js代码:
page({
 data: {
    img_list:''
  },
chooseImg:function(){//调用
    var _this = this;
    wx.chooseImage({
      count: 1, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: function (res) {
        console.log(res)
        // 返回选定照片的本地文件路径列表,tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths
        _this.setData({
          img_l: res.tempFilePaths
        })
      }
    })
  },
  preview_img:function(){//预览tupia
    wx.previewImage({
      current: this.data.img_l, // 当前显示图片的http链接
      urls: this.data.img_l // 需要预览的图片http链接列表
    })
  }
})
效果:

小程序从本地相册选择图片或使用相机拍照wx.chooseImage上传后预览并可以识别图中二维码_第1张图片

点击选择图片:


可以选择本地图片或直接调用相机:


小程序从本地相册选择图片或使用相机拍照wx.chooseImage上传后预览并可以识别图中二维码_第2张图片

点击图片预览、长按显示选项:

小程序从本地相册选择图片或使用相机拍照wx.chooseImage上传后预览并可以识别图中二维码_第3张图片



你可能感兴趣的:(小程序)