小程序从本地相册选择图片或使用相机拍照wx.chooseImage上传后预览并可以识别图中二维码
2018-01-27 14:46
936 查看
官方文档://参考
OBJECT参数说明:
注:文件的临时路径,在小程序本次启动期间可以正常使用,如需持久保存,需在主动调用 wx.saveFile,在小程序下次启动时才能访问得到。
success返回参数说明:
File 对象结构如下:
示例代码:
OBJECT参数说明:
示例代码:
以上是官方示例文档;
下面是我自己在开发小程序时遇到的索性就写一下
前台代码:
<button bindtap='chooseImg'>选择图片</button>//调用图片选择和相机
<view><image src='{{img_l}}' bindtap='preview_img'></image></view>//图片上传后预览、保存、识别js代码:
点击选择图片:
可以选择本地图片或直接调用相机:
点击图片预览、长按显示选项:
wx.chooseImage(OBJECT)
从本地相册选择图片或使用相机拍照。OBJECT参数说明:
参数 | 类型 | 必填 | 说明 |
---|---|---|---|
count | Number | 否 | 最多可以选择的图片张数,默认9 |
sizeType | StringArray | 否 | original 原图,compressed 压缩图,默认二者都有 |
sourceType | StringArray | 否 | album 从相册选图,camera 使用相机,默认二者都有 |
success | Function | 是 | 成功则返回图片的本地文件路径列表 tempFilePaths |
fail | Function | 否 | 接口调用失败的回调函数 |
complete | Function | 否 | 接口调用结束的回调函数(调用成功、失败都会执行) |
success返回参数说明:
参数 | 类型 | 说明 | 最低版本 |
---|---|---|---|
tempFilePaths | StringArray | 图片的本地文件路径列表 | |
tempFiles | ObjectArray | 图片的本地文件列表,每一项是一个 File 对象 | 1.2.0 |
字段 | 类型 | 说明 |
---|---|---|
path | String | 本地文件路径 |
size | Number | 本地文件大小,单位:B |
wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源 a9f3 是相册还是相机,默认二者都有 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链接列表 })
以上是官方示例文档;
下面是我自己在开发小程序时遇到的索性就写一下
前台代码:
<button bindtap='chooseImg'>选择图片</button>//调用图片选择和相机
<view><image src='{{img_l}}' bindtap='preview_img'></image></view>//图片上传后预览、保存、识别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链接列表 }) } })效果:
点击选择图片:
可以选择本地图片或直接调用相机:
点击图片预览、长按显示选项:
相关文章推荐
- 微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- [转]微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
- 微信小程序-从相册获取图片,视频 使用相机拍照,录像上传+服务器(nodejs版)接收
- 微信小程序从本地相册选择图片或使用相机拍照之我的理解
- 微信图像接口:拍照或从手机相册中选图接口chooseImage+预览图片接口previewImage+上传图片接口uploadImage+下载图片接口downloadImage
- 相机选择照片及拍照后使用AFNetworking图片上传(支持一张及多张上传)
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
- android 使用本机相机照相或用本地相册更新imageview里面的图片
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等
- android webView使用js/css实现夜间模式 长按识别图片以及二维码,网页可以上传图片
- Android仿微信图片上传,可以选择多张图片,缩放预览,拍照上传等