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

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

 
使用过程如下：

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

复制代码

代码镶嵌在原本的代码框架中就是现在这样：
《---picture.js》

1. //index.js
   
2. //获取应用实例
   
3. var app = getApp()
   
4. Page({
   
5.   data: {
   
6. source:"",
   
7.   },
   
8. 
   
9. 
   
10. listenerButtonChooseImage: function() {
    
11.       var that = this;
    
12.       wx.chooseImage({
    
13.           count: 1,
    
14.           //original原图，compressed压缩图
    
15.           sizeType: ['original'],
    
16.           //album来源相册 camera相机 
    
17.           sourceType: ['album', 'camera'],
    
18.           //成功时会回调
    
19.           success: function(res) {
    
20.                 //重绘视图
    
21.               that.setData({
    
22.                   source: res.tempFilePaths,
    
23.                              })
    
24. 
    
25. wx.previewImage({
    
26.    current: 'http://119.29.74.46/myphoto/0.jpg', // 当前显示图片的链接，不填则默认为 urls 的第一张
    
27.   urls: [ 'http://119.29.74.46/myphoto/0.jpg',
    
28.    'http://119.29.74.46/myphoto/1.jpg',
    
29.     'http://119.29.74.46/myphoto/2.jpg',
    
30.      'http://119.29.74.46/myphoto/3.jpg',
    
31.       'http://119.29.74.46/myphoto/4.jpg'
    
32.       , 'http://119.29.74.46/myphoto/5.jpg',
    
33.        'http://119.29.74.46/myphoto/6.jpg',
    
34.         'http://119.29.74.46/myphoto/7.jpg'],
    
35.   success: function(res){
    
36. 
    
37. 
    
38.   },
    
39.   fail: function() {
    
40.     // fail
    
41.   },
    
42.   complete: function() {
    
43.     // complete
    
44.   }
    
45. })          }
    
46.       })
    
47.   },
    
48. 
    
49.    onShareAppMessage: function () {
    
50.     return {
    
51.       title: '欢迎使用颜大傻牌跑步计',
    
52.       desc: '将你的战绩分享到~~~',
    
53.       path: '/page/picture/picture.js'
    
54.     }
    
55.   },
    
56. })

复制代码

《---picture.wxml》

1. 
   
2. 
   
3. 
   
4. 点击我选择相册
   
5. 
   
6. 
   
7. 发布

复制代码

整体的文件架构图如下：
 
二、增置了图片预览
图片预览功能需要服务器端的配置。所以，今后这可能是作为一个网站架构，成为某种服务性的商业软件的需要。配置服务器的小程序相对于功能性的来说要麻烦点，因为需要服务端的配合。但是幸亏我手头有几个空置的云服务器，所以就直接拿来写了一个这种东西。后期可能会直接开发一个类似于朋友圈的，可以把图片放到服务器上去。附上文字，然后慢慢的形成一个闭环的圈子。当然这是我的想法， 目前小程序只是玩耍的工具。
图片预览功能其实很简单，就是把服务器端的图片下载下来进行一种压缩格式的预览。稍后容我一一道来。目前这个功能，怎么来说呢，其实就是个鸡肋。因为我的图片大多是本地文件，要不就是直接加载的服务端的图片，预览这个作用实在让我难以找到用途。不过，如果今后真要布置一个圈子的话，这一点又是必不可少的。毕竟预览这个功能可以省下巨多流量！
《picture.js》

1. //index.js
   
2. //获取应用实例
   
3. var app = getApp()
   
4. Page({
   
5.   data: {
   
6. source:"http://159.203.250.111/Carly.png",
   
7.   },
   
8. 
   
9. 
   
10. listenerButtonChooseImage: function() {
    
11.       var that = this;
    
12.       wx.chooseImage({
    
13.           count: 1,
    
14.           //original原图，compressed压缩图
    
15.           sizeType: ['original'],
    
16.           //album来源相册 camera相机 
    
17.           sourceType: ['album', 'camera'],
    
18.           //成功时会回调
    
19.           success: function(res) {
    
20.                 //重绘视图
    
21.               that.setData({
    
22.                   source: res.tempFilePaths,
    
23.                              })
    
24. 
    
25.           }
    
26.       })
    
27.   },
    
28. 
    
29.   yulan:function(){
    
30.     wx.previewImage({
    
31.    current: 'http://119.29.74.46/myphoto/0.jpg', // 当前显示图片的链接，不填则默认为 urls 的第一张
    
32.   urls: [ 'http://119.29.74.46/myphoto/0.jpg',
    
33.    'http://119.29.74.46/myphoto/1.jpg',
    
34.     'http://119.29.74.46/myphoto/2.jpg',
    
35.      'http://119.29.74.46/myphoto/3.jpg',
    
36.       'http://119.29.74.46/myphoto/4.jpg',
    
37.        'http://119.29.74.46/myphoto/5.jpg',
    
38.        'http://119.29.74.46/myphoto/6.jpg',
    
39.         'http://119.29.74.46/myphoto/7.jpg'],
    
40.   success: function(res){
    
41. 
    
42. 
    
43.   },
    
44.   fail: function() {
    
45.     // fail
    
46.   },
    
47.   complete: function() {
    
48.     // complete
    
49.   }
    
50. })
    
51.   },
    
52. 
    
53.    onShareAppMessage: function () {
    
54.     return {
    
55.       title: '欢迎使用颜大傻牌跑步计',
    
56.       desc: '将你的战绩分享到~~~',
    
57.       path: '/page/picture/picture.js'
    
58.     }
    
59.   },
    
60. })

复制代码

《picture.wxml》
《---picture.wxml》

1. 
   
2. 
   
3. 
   
4. 
   
5. 
   
6. 
   
7. 点击我选择相册
   
8. 
   
9. 
   
10. 发布
    

复制代码

 

4.gif (419.75 KB, 下载次数: 0)

下载附件

4 小时前 上传

预览功能的原理很简单，其实就是给你一个按钮，绑定一个事件。这个事件就是向服务器请求预览图片加载，所谓预览图片加载呢。其实就是一个压缩过的，低像素的图片啦。然后给你发送过来，你就完成了所谓的预览。