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