微信小程序之批量上傳并壓縮圖片的實例代碼
更新時間:2018年07月05日 14:18:20 作者:Jaiaxn
這篇文章主要介紹了微信小程序之批量上傳并壓縮圖片的實例代碼,需要的朋友可以參考下
具體內容如下所示:
首先,要在.wxml文件里面創(chuàng)建一個canvas,作用是承載壓縮的圖片,以供上傳的時候獲取
這個canvas不能隱藏,否則沒效果,可以將其移至屏幕外。
<canvas canvas-id='attendCanvasId' class='myCanvas'></canvas>
然后呢,就是.js文件里面的方法了
// 點擊加_壓縮 takePhoto: function () { var that = this; let imgViewList = that.data.imgViewList; //這個是用來承載頁面循環(huán)展示圖片的 //拍照、從相冊選擇上傳 wx.chooseImage({ count: 4, //這個是上傳的最大數量,默認為9 sizeType: ['compressed'], //這個可以理解為上傳的圖片質量類型(官方給的),雖然沒什么卵用,要不然還要我們自己寫壓縮做什么 sourceType: ['album', 'camera'], //這個是圖片來源,相冊或者相機 success: function (res) { var tempFilePaths = res.tempFilePaths //這個是選擇后返回的圖片列表 that.getCanvasImg(0, 0, tempFilePaths); //進行壓縮 } }); }, //壓縮并獲取圖片,這里用了遞歸的方法來解決canvas的draw方法延時的問題 getCanvasImg: function (index,failNum, tempFilePaths){ var that = this; if (index < tempFilePaths.length){ const ctx = wx.createCanvasContext('attendCanvasId'); ctx.drawImage(tempFilePaths[index], 0, 0, 300, 150); ctx.draw(true, function () { index = index + 1;//上傳成功的數量,上傳成功則加1 wx.canvasToTempFilePath({ canvasId: 'attendCanvasId', success: function success(res) { that.uploadCanvasImg(res.tempFilePath); that.getCanvasImg(index,failNum,tempFilePaths); }, fail: function (e) { failNum += 1;//失敗數量,可以用來提示用戶 that.getCanvasImg(inedx,failNum,tempFilePaths); } }); }); } }, //上傳圖片 uploadCanvasImg: function (canvasImg){ var that = this; let imgViewList = that.data.imgViewList; var tempImg = canvasImg; wx.uploadFile({ url: app.d.fileServer,//文件服務器的地址 filePath: tempImg, formData: { paramPath: "gift" }, name: 'file', success: function (res) { var json2map = JSON.parse(res.data); imgViewList.push(app.d.imageUrlFix + json2map[0].fileUrl); that.setData({ imgViewList: imgViewList, }) } }) },
總結
以上所述是小編給大家介紹的微信小程序之批量上傳并壓縮圖片的實例代碼,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!
相關文章
JavaScript實現GriwView單列全選(自寫代碼)
在 GridView 里有一系列的 Checkbox ,要實現對其全選或全不選,二網上的都不否和要求,于是我自己寫了JavaScript 代碼,貼出來供大家參考2013-05-05Bootstrap Table 在指定列中添加下拉框控件并獲取所選值
通過 bootstrap-table 的Column 配置項中的formatter,將獲取到的數據轉換為包含數據的 select 控件。然后根據用戶選擇項更新對應單元格數據,最后通過getallselection方法獲取所選行數據2017-07-07js報錯:Maximum?call?stack?size?exceeded的解決方法
這篇文章主要給大家介紹了關于js報錯Maximum?call?stack?size?exceeded的解決方法,文中通過實例代碼將解決的方法介紹的非常詳細,需要的朋友可以參考下2023-02-02