從相機(jī)或者相冊(cè)選取圖片
wx.chooseImage?
wx.chooseImage({
? ? count:1,
????sizeType: ['original', 'compressed'], // original 原圖，compressed 壓縮圖，默認(rèn)二者都有 ????sourceType: ['album', 'camera'],
? ? success:function(res){
????},
? ? fail:function(e){
????}
})
返回路徑為臨時(shí)路徑，在微信開(kāi)發(fā)模擬器上顯示為
http://.......
在真實(shí)手機(jī)上顯示為
wxfile://
接下來(lái)你可能需要顯示圖片，或者是進(jìn)行一些其他的操作
我在做人臉識(shí)別的時(shí)候，選擇圖片后，轉(zhuǎn)base64的時(shí)候遇到一個(gè)問(wèn)題，在這和大家分享一下兒，希望對(duì)大家有幫助
我在 chooseImage后直接進(jìn)行了轉(zhuǎn)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編碼的圖片傳給后臺(tái)
? ? }, fail:function(e){ }
});
但是遇到了一個(gè)問(wèn)題，就是在模擬器上是顯示正常的，但是在真機(jī)上顯示會(huì)報(bào)request: url invalid ,原因應(yīng)該wxfile格式的文件不能被 wx.request 解析
后來(lái)找到了兩種解決辦法，分享給大家
第一種：將本地文件上傳給服務(wù)器，服務(wù)器返回服務(wù)器路徑
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轉(zhuǎn)化
首選準(zhǔn)備一個(gè)canvas
<canvas canvas-id="canvas" style="width:{{oricanvas.width}};height:{{oricanvas.height}}"></canvas>
在chooseImage的success回調(diào)中你要先調(diào) wx.getImageInfo獲取圖片的實(shí)際寬高信息，之后調(diào)getBase64Image
imgpath:圖片路徑
width：圖片實(shí)際的寬度
height：圖片實(shí)際的高度
callback ：獲取base64之后的回調(diào)函數(shù)，你可以寫(xiě)你獲取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) // 繪制完成后執(zhí)行回調(diào)，API 1.7.0 ????canvas.draw(false,function(){
????????console.log('aaa'); // 2. 獲取圖像數(shù)據(jù)， 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);
????????????}
????????})
????})
}
