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