微信小程序之批量上傳并壓縮圖片的實(shí)例代碼
具體內(nèi)容如下所示:
首先,要在.wxml文件里面創(chuàng)建一個(gè)canvas,作用是承載壓縮的圖片,以供上傳的時(shí)候獲取
這個(gè)canvas不能隱藏,否則沒(méi)效果,可以將其移至屏幕外。
<canvas canvas-id='attendCanvasId' class='myCanvas'></canvas>
然后呢,就是.js文件里面的方法了
// 點(diǎn)擊加_壓縮
takePhoto: function () {
var that = this;
let imgViewList = that.data.imgViewList; //這個(gè)是用來(lái)承載頁(yè)面循環(huán)展示圖片的
//拍照、從相冊(cè)選擇上傳
wx.chooseImage({
count: 4, //這個(gè)是上傳的最大數(shù)量,默認(rèn)為9
sizeType: ['compressed'], //這個(gè)可以理解為上傳的圖片質(zhì)量類型(官方給的),雖然沒(méi)什么卵用,要不然還要我們自己寫(xiě)壓縮做什么
sourceType: ['album', 'camera'], //這個(gè)是圖片來(lái)源,相冊(cè)或者相機(jī)
success: function (res) {
var tempFilePaths = res.tempFilePaths //這個(gè)是選擇后返回的圖片列表
that.getCanvasImg(0, 0, tempFilePaths); //進(jìn)行壓縮
}
});
},
//壓縮并獲取圖片,這里用了遞歸的方法來(lái)解決canvas的draw方法延時(shí)的問(wèn)題
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;//上傳成功的數(shù)量,上傳成功則加1
wx.canvasToTempFilePath({
canvasId: 'attendCanvasId',
success: function success(res) {
that.uploadCanvasImg(res.tempFilePath);
that.getCanvasImg(index,failNum,tempFilePaths);
}, fail: function (e) {
failNum += 1;//失敗數(shù)量,可以用來(lái)提示用戶
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,//文件服務(wù)器的地址
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,
})
}
})
},
總結(jié)
以上所述是小編給大家介紹的微信小程序之批量上傳并壓縮圖片的實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
JavaScript判斷元素是否在可視區(qū)域的三種方法
這這篇文章給大家總結(jié)了JavaScript判斷元素是否在可視區(qū)域的三種方法,getBoundingClientRect,IntersectionObserver和offsetTop、scrollTop這三種方法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
javascript實(shí)現(xiàn)倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)倒計(jì)時(shí)效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02
詳解微信小程序與內(nèi)嵌網(wǎng)頁(yè)交互實(shí)現(xiàn)支付功能
這篇文章主要介紹了詳解微信小程序與內(nèi)嵌網(wǎng)頁(yè)交互實(shí)現(xiàn)支付功能,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10
javascript之Object.assign()的痛點(diǎn)分析
這篇文章主要介紹了javascript之Object.assign()的痛點(diǎn)分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03
JS實(shí)現(xiàn)圖片預(yù)加載無(wú)需等待
網(wǎng)站開(kāi)發(fā)時(shí)經(jīng)常需要在某個(gè)頁(yè)面需要實(shí)現(xiàn)對(duì)大量圖片的瀏覽;用javascript來(lái)實(shí)現(xiàn)一個(gè)圖片瀏覽器,讓用戶無(wú)需等待過(guò)長(zhǎng)的時(shí)間就能看到其他圖片2012-12-12
原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果
這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)旋轉(zhuǎn)木馬效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-02-02
JavaScript實(shí)現(xiàn)定時(shí)隱藏與顯示圖片的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)定時(shí)隱藏與顯示圖片的方法,可實(shí)現(xiàn)javascript定時(shí)關(guān)閉圖片的功能,涉及javascript針對(duì)頁(yè)面元素屬性定時(shí)操作的相關(guān)技巧,需要的朋友可以參考下2015-08-08
JavaScript知識(shí)點(diǎn)總結(jié)(十)之this關(guān)鍵字
這篇文章主要介紹了JavaScript知識(shí)點(diǎn)總結(jié)(十)之this關(guān)鍵字的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值,需要的朋友可以參考下2016-05-05

