小程序从相机或者相册选取图片

从相机或者相册选取图片

wx.chooseImage 

wx.chooseImage({

    count:1,

    sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有     sourceType: ['album', 'camera'],

    success:function(res){

    },

    fail:function(e){

    }

})

返回路径为临时路径，在微信开发模拟器上显示为

http://.......

在真实手机上显示为

wxfile://

接下来你可能需要显示图片，或者是进行一些其他的操作

我在做人脸识别的时候，选择图片后，转base64的时候遇到一个问题，在这和大家分享一下儿，希望对大家有帮助

我在 chooseImage后直接进行了转base64的操作，代码如下：

wx.request({

    url:that.src, //文件路径

    method:'GET',

    responseType: 'arraybuffer',

    success:res =>{

        let base64 = wx.arrayBufferToBase64(res.data);

        let userImageBase64 = 'data:image/jpg;base64,' + base64;     

        //将base64编码的图片传给后台

    }, fail:function(e){ }

});

但是遇到了一个问题，就是在模拟器上是显示正常的，但是在真机上显示会报request: url invalid ,原因应该wxfile格式的文件不能被 wx.request 解析

后来找到了两种解决办法，分享给大家

第一种：将本地文件上传给服务器，服务器返回服务器路径

wx.uploadFile({

    url: 'http://10.100.102.111:5000/uploadFile',

    filePath: that.src,

    name: ‘file’,

    formData:{

        'data': that.src

    },

    success: function(res){

        console.log(res);

        var data = res.data

    } 

})

第二种：使用canvas转化

首选准备一个canvas

在chooseImage的success回调中你要先调 wx.getImageInfo获取图片的实际宽高信息，之后调getBase64Image

imgpath:图片路径

width：图片实际的宽度

height：图片实际的高度

callback ：获取base64之后的回调函数，你可以写你获取base64后的逻辑

getBase64Image(imgpath,width,height,callback){

    console.log(imgpath,width,height)

    let canvas = wx.createCanvasContext('canvas')

    this.oricanvas.width = width; this.oricanvas.height = height;

    this.setData({ ['oricanvas.width']:width, ['oricanvas.height']:height }) // 1. 绘制图片至canvas     canvas.drawImage(imgpath, 0, 0, width, height) // 绘制完成后执行回调，API 1.7.0     canvas.draw(false,function(){

        console.log('aaa'); // 2. 获取图像数据， API 1.9.0

        wx.canvasGetImageData({ canvasId: 'canvas', x: 0, y: 0, width: width, height: height,             success(res) {

                // 3. png编码

                let pngData = upng.encode([res.data.buffer], res.width, res.height)

                // 4. base64编码

                let base64 = wx.arrayBufferToBase64(pngData)

                callback && callback(base64);

            }

        })

    })

}