微信小程序实战开发：图片选取以及拍照功能

2019-11-09 14:59:51

字体：大中小

来源：转载

供稿：网友

一、图片选择功能从本地相册选择图片或使用相机拍照

使用过程如下：wx.chooseImage({ count: 1, // 默认9 sizeType: ['original', 'comPRessed'], // 可以指定是原图还是压缩图，默认二者都有 sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有 success: function (res) { // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片 var tempFilePaths = res.tempFilePaths }})复制代码代码镶嵌在原本的代码框架中就是现在这样：《---picture.js》//index.js//获取应用实例var app = getApp()Page({ data: {source:"", },listenerButtonChooseImage: function() { var that = this; wx.chooseImage({ count: 1, //original原图，compressed压缩图 sizeType: ['original'], //album来源相册 camera相机 sourceType: ['album', 'camera'], //成功时会回调 success: function(res) { //重绘视图 that.setData({ source: res.tempFilePaths, })wx.previewImage({ current: 'http://119.29.74.46/myphoto/0.jpg', // 当前显示图片的链接，不填则默认为 urls 的第一张 urls: [ 'http://119.29.74.46/myphoto/0.jpg', 'http://119.29.74.46/myphoto/1.jpg', 'http://119.29.74.46/myphoto/2.jpg', 'http://119.29.74.46/myphoto/3.jpg', 'http://119.29.74.46/myphoto/4.jpg' , 'http://119.29.74.46/myphoto/5.jpg', 'http://119.29.74.46/myphoto/6.jpg', 'http://119.29.74.46/myphoto/7.jpg'], success: function(res){ }, fail: function() { // fail }, complete: function() { // complete }}) } }) }, onShareAppMessage: function () { return { title: '欢迎使用颜大傻牌跑步计', desc: '将你的战绩分享到~~~', path: '/page/picture/picture.js' } },})复制代码《---picture.wxml》点击我选择相册发布复制代码整体的文件架构图如下：

二、增置了图片预览图片预览功能需要服务器端的配置。所以，今后这可能是作为一个网站架构，成为某种服务性的商业软件的需要。配置服务器的小程序相对于功能性的来说要麻烦点，因为需要服务端的配合。但是幸亏我手头有几个空置的云服务器，所以就直接拿来写了一个这种东西。后期可能会直接开发一个类似于朋友圈的，可以把图片放到服务器上去。附上文字，然后慢慢的形成一个闭环的圈子。当然这是我的想法，目前小程序只是玩耍的工具。图片预览功能其实很简单，就是把服务器端的图片下载下来进行一种压缩格式的预览。稍后容我一一道来。目前这个功能，怎么来说呢，其实就是个鸡肋。因为我的图片大多是本地文件，要不就是直接加载的服务端的图片，预览这个作用实在让我难以找到用途。不过，如果今后真要布置一个圈子的话，这一点又是必不可少的。毕竟预览这个功能可以省下巨多流量！《picture.js》//index.js//获取应用实例var app = getApp()Page({ data: {source:"http://159.203.250.111/Carly.png", },listenerButtonChooseImage: function() { var that = this; wx.chooseImage({ count: 1, //original原图，compressed压缩图 sizeType: ['original'], //album来源相册 camera相机 sourceType: ['album', 'camera'], //成功时会回调 success: function(res) { //重绘视图 that.setData({ source: res.tempFilePaths, }) } }) }, yulan:function(){ wx.previewImage({ current: 'http://119.29.74.46/myphoto/0.jpg', // 当前显示图片的链接，不填则默认为 urls 的第一张 urls: [ 'http://119.29.74.46/myphoto/0.jpg', 'http://119.29.74.46/myphoto/1.jpg', 'http://119.29.74.46/myphoto/2.jpg', 'http://119.29.74.46/myphoto/3.jpg', 'http://119.29.74.46/myphoto/4.jpg', 'http://119.29.74.46/myphoto/5.jpg', 'http://119.29.74.46/myphoto/6.jpg', 'http://119.29.74.46/myphoto/7.jpg'], success: function(res){ }, fail: function() { // fail }, complete: function() { // complete }}) }, onShareAppMessage: function () { return { title: '欢迎使用颜大傻牌跑步计', desc: '将你的战绩分享到~~~', path: '/page/picture/picture.js' } },})复制代码《picture.wxml》《---picture.wxml》<view class="header" style="flex-direction:row;"><image src="{{source}}" mode="fulltoFill" class="pic"/><button type="primary" bindtap="listenerButtonChooseImage" class="button_anniu">点击我选择相册</button><button bindtap="" class="button_anniu"> 发布 </button></view>复制代码