微信小程序?qū)崿F(xiàn)圖片壓縮功能
小龍大哥的微信小程序在初始階段相當(dāng)于IE界的6,在這里給大家說(shuō)一個(gè)剛趟過(guò)去的坑。
拍照的API。
wx.chooseImage({ count: 1, // 默認(rèn)9 sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths; } });
在上邊,明確的給出大小的類型,本想省事,然并沒(méi)有什么用…..
廢話少說(shuō),給大家說(shuō)下IOS和安卓中差別,拍照?qǐng)D片壓縮的坑。
// 點(diǎn)擊照相 takePictures:function(){ var that = this; wx.chooseImage({ count: 1, // 默認(rèn)9 sizeType: ['compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有 sourceType: ['camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有 success: function (res) { // 返回選定照片的本地文件路徑列表,tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片 var tempFilePaths = res.tempFilePaths; that.setData({ attendSuccessImg:tempFilePaths[0] }); // 上傳圖片 //判斷機(jī)型 var model = ""; wx.getSystemInfo({ success:function(res){ model= res.model; } }) if(model.indexOf("iPhone") <= 0){ that.uploadFileOpt(that.data.attendSuccessImg); console.log(111111) }else{ drawCanvas(); } // 縮放圖片 function drawCanvas(){ const ctx = wx.createCanvasContext('attendCanvasId'); ctx.drawImage(tempFilePaths[0], 0, 0, 94, 96); ctx.draw(); that.prodImageOpt(); } } }); }, // 生成圖片 prodImageOpt:function(){ var that = this; wx.canvasToTempFilePath({ canvasId: 'attendCanvasId', success: function success(res) { that.setData({ canvasImgUrl:res.tempFilePath }); // 上傳圖片 that.uploadFileOpt(that.data.canvasImgUrl); }, complete: function complete(e) { } }); },
再點(diǎn)擊拍照后,IOS的進(jìn)行了圖片壓縮功能,然而,安卓的依然是那么大,所以 在這過(guò)程中,我們需要判斷下當(dāng)前機(jī)型,然后執(zhí)行canvas壓縮。
上述代碼,拿到即可用,但少一部分wxml中需要添加一個(gè)canvas標(biāo)簽。
進(jìn)行接口調(diào)用。希望對(duì)大家有幫助。
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇:《微信小程序開(kāi)發(fā)教程》小編為大家精心整理的,希望喜歡。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
利用BootStrap彈出二級(jí)對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)方法
彈出二級(jí)對(duì)話框,即在對(duì)話框的基礎(chǔ)上再?gòu)棾鲆粋€(gè)對(duì)話框.這篇文章主要介紹了利用BootStrap彈出二級(jí)對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-09-09JS根據(jù)json數(shù)組多個(gè)字段排序及json數(shù)組常用操作
這篇文章主要介紹了js根據(jù)json數(shù)組多個(gè)字段排序及json數(shù)組常用操作,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06使用Require.js封裝原生js輪播圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了使用Require.js封裝原生js輪播圖的實(shí)現(xiàn)代碼,需要的朋友可以參考下2017-06-06javascript截取字符串(通過(guò)substring實(shí)現(xiàn)并支持中英文混合)
用js方法substring()、方法substr()實(shí)現(xiàn)如標(biāo)題所示的截取字符串并支持中英文混合,具體代碼如下,感興趣的各位可以參考下哈2013-06-06Javascript中prototype與__proto__的關(guān)系詳解
這篇文章主要給大家介紹了關(guān)于Javascript中prototype與__proto__的關(guān)系的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-03-03js實(shí)現(xiàn)無(wú)限層級(jí)樹(shù)形數(shù)據(jù)結(jié)構(gòu)(創(chuàng)新算法)
這篇文章主要介紹了js實(shí)現(xiàn)無(wú)限層級(jí)樹(shù)形數(shù)據(jù)結(jié)構(gòu),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02