微信小程序?qū)崿F(xiàn)圖片壓縮
更新時間：2019年12月03日 08:34:46 作者：chent_某位
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)圖片壓縮，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了微信小程序圖片壓縮的具體代碼，供大家參考，具體內(nèi)容如下
設(shè)計思路：
選擇圖片后調(diào)用微信壓縮圖片接口，壓縮后接收壓縮圖片的臨時地址，調(diào)用微信儲存接口保存圖片至本地。
參數(shù)：
imagesrc：圖片地址
imgcount：是否選擇圖片
show_hidden：是否展示按鈕
接口：
wx.chooseImage：選擇圖片
wx.compressImage：壓縮圖片
wx.saveImageToPhotosAlbum：保存圖片至相冊
wx.showToast：提示信息
wxml
<view>
<view>
<image src="{{imagesrc}}" style="width: 100%;" bindtap="chooseMyImage">
</image>
</view>
<view class="textView">
<text>
（推薦使用jpg格式的圖片）
</text>
</view>
<view class="ImgOperateView">
<button type="primary" bindtap="chooseMyImage">選擇圖片</button>
<button type="primary" bindtap="MyImageCompression" style="{{show_hidden}}">壓縮圖片</button>
</view>
</view>
js
// miniprogram/pages/ImgCompression/ImgCompression.js
Page({
/**
* 頁面的初始數(shù)據(jù)
*/
data: {
imagesrc:"../../images/NoImage.jpg",
imgcount:0,
show_hidden: "display:none;",
},
//選擇圖片
chooseMyImage:function () {
var that = this;
wx.chooseImage({
count:1,
success: function(res) {
that.setData({
imagesrc:res.tempFilePaths[0],
imgcount:1,
show_hidden:"display:block"
}),
wx.showToast({
title: "已選擇圖片",
})
},
fail: function() {
wx.showToast({
title:"請選擇圖片",
icon:"none",
})
}
})
},
//壓縮圖片
MyImageCompression:function () {
var that = this;
if(that.data.imgcount == 1){
wx.showToast({
title: "正在壓縮圖片",
icon:"loading",
})
wx.compressImage({
src:that.data.imagesrc,
quality:0,
success: function(res) {
wx.showToast({
title: "壓縮成功",
});
wx.saveImageToPhotosAlbum({
filePath:res.tempFilePath,
success:function(res) {
wx.showToast({
title: "已保存至相冊",
});
}
})
},
fail: function() {
wx.showToast({
title:"壓縮失敗",
icon:"none",
})
}
})
}
}
})
效果圖：
為大家推薦現(xiàn)在關(guān)注度比較高的微信小程序教程一篇：《微信小程序開發(fā)教程》小編為大家精心整理的，希望喜歡。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了JS防止網(wǎng)頁被嵌入iframe框架的方法,結(jié)合實例形式分析了針對不同瀏覽器防止網(wǎng)頁被嵌入框架的相關(guān)注意事項與操作技巧,需要的朋友可以參考下2016-09-09
JavaScript?雙位非運算(~~?操作符)使用場景實例探索
本文為大家介紹JavaScript中雙位非運算?~~，?~~?操作符是一個強大且經(jīng)常被忽視的特性，它提供了一種快速、簡潔的方式來處理數(shù)字和執(zhí)行類型轉(zhuǎn)換，通?？梢员挥糜跀?shù)學(xué)計算和類型轉(zhuǎn)換，我們先了解一下?~~?的基本概念和它的一些應(yīng)用場景2024-01-01
Taro UI框架開發(fā)小程序?qū)崿F(xiàn)左滑喜歡右滑不喜歡效果的示例代碼
這篇文章主要介紹了Taro UI開發(fā)小程序?qū)崿F(xiàn)左滑喜歡右滑不喜歡效果,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-05-05
這篇文章主要介紹關(guān)于導(dǎo)出Excel通用方法的實用前端技巧,希望能夠幫助大家更好地處理數(shù)據(jù)導(dǎo)出需求,接下來,我將為大家詳細介紹這個方法和代碼實現(xiàn),需要的朋友可以參考下2023-09-09
在TypeScript中,類型斷言用于告訴編譯器某個變量的類型,這在我們確定變量的類型比編譯器更準(zhǔn)確時非常有用,本文給大家分享了幾種TypeScript中使用類型斷言方式,需要的朋友可以參考下2023-09-09
本節(jié)主要介紹了ie8下面處理 new Date()的問題,需要的朋友可以參考下2014-07-07
這篇文章主要為大家詳細介紹了基于Javascript倒計時效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了Paypal支付不完全指北，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要給大家介紹了關(guān)于JS保留小數(shù)幾種簡單方法,在JS中保留小數(shù)的方法有很多,可以Math函數(shù)或者以字符串形式來進行處理,但在有的時候需要四舍五入,有時候不需要,需要的朋友可以參考下2023-10-10
JS中循環(huán)遍歷數(shù)組的幾種常用方式總結(jié)
文章主要總結(jié)了?JS?中循環(huán)遍歷數(shù)組的十二種常用方式,包括?for?循環(huán)（普通和優(yōu)化版）、forEach、map、filter、for…of、for…in、find、findIndex、some、every、reduce?等,并對它們的特點、語法、優(yōu)缺點、適用場景及返回值等進行了詳細說明,需要的朋友可以參考下2025-01-01