微信小程序上傳圖片并等比列壓縮到指定大小的實(shí)例代碼
更新時間：2019年10月24日 08:48:20 作者：騎摩托敲代碼
這篇文章主要介紹了微信小程序 上傳圖片并等比列壓縮到指定大小，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
微信小程序官方API中 wx.chooseImage() 是可以進(jìn)行圖片壓縮的，可惜的是不能壓縮到指定大小。
實(shí)際開發(fā)中需求可能是壓縮到指定大小：
原生js可以使用canvas來壓縮，但由于微信小程序?qū)anvas有封裝，使得利用canvas來壓縮圖片有了一些區(qū)別：
直接上代碼：
主函數(shù)：
以上的三個函數(shù)可以寫在一個公共的js文件里面 我是寫在 common.js中的:
html:
在html中需要添加個canvas標(biāo)簽，一般這個標(biāo)簽不讓他出現(xiàn)在頁面中，因?yàn)樗淖饔脙H僅是壓縮圖片的工具：
<canvas class="canvas" canvas-id="canvas" :style="{width:cWidth+'px',height:cHeight+'px', visibility: 'hidden', 'position':'absolute', 'z-index': '-1', left: '-10000rpx',top:'-10000rpx'}"></canvas>
在methods中增加chooseImg方法：
代碼在實(shí)際項目中使用，能完成壓縮圖片到指定大小的需求。
總結(jié)
以上所述是小編給大家介紹的微信小程序上傳圖片并等比列壓縮到指定大小的實(shí)例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要給大家介紹了d3.js中強(qiáng)制異步文件讀取同步的幾種方法，文中給出了詳細(xì)的介紹和解決方法，對大家具有一定的參考價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧。2017-02-02
vue3 uniapp微信登錄功能實(shí)現(xiàn)
根據(jù)最新的微信小程序官方的規(guī)定,uniapp中的uni.getUserInfo方法不再返回用戶頭像和昵稱、以及手機(jī)號,這篇文章主要介紹了vue3 uniapp微信登錄功能實(shí)現(xiàn),需要的朋友可以參考下2024-04-04
這篇文章主要介紹了javascript仿百度輸入框提示自動下拉補(bǔ)全的相關(guān)資料,需要的朋友可以參考下2016-01-01
微信小程序?qū)崿F(xiàn)視頻播放器發(fā)送彈幕
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)視頻播放器發(fā)送彈幕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)滾動條自動滾動，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12
javascript不同頁面?zhèn)髦档母倪M(jìn)版
改進(jìn)點(diǎn)：支持同頁面有多個文本框，可自動向不同的文本框傳值。先看演示吧2008-09-09
深入淺析JavaScript系列（13）：This? Yes,this!
在這篇文章里，我們將討論跟執(zhí)行上下文直接相關(guān)的更多細(xì)節(jié)。討論的主題就是this關(guān)鍵字。實(shí)踐證明，這個主題很難，在不同執(zhí)行上下文中this的確定經(jīng)常會發(fā)生問題2016-01-01
20分鐘成功編寫bootstrap響應(yīng)式頁面 就這么簡單
這篇文章主要教大家如何在20分鐘內(nèi)成功編寫bootstrap響應(yīng)式頁面，其實(shí)很簡單，培養(yǎng)大家分分鐘開發(fā)出一個高大上的頁面能力，感興趣的小伙伴們可以參考一下2016-05-05
js讀取json文件片段中的數(shù)據(jù)實(shí)例
下面小編就為大家?guī)硪黄猨s讀取json文件片段中的數(shù)據(jù)實(shí)例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
用eval方法，把傳進(jìn)來的這個方法名所代表的方法當(dāng)作一個對象來賦值給method1的func屬性,需要的朋友可以參考下2014-04-04