微信小程式圖片四個API用法
小程式的圖片API主要是
- wx.chooseImage 選擇圖片
- wx.previewImage 預覽圖片
- wx.getImageInfo 獲取圖片的資訊
- wx.saveImageToPhotosAlbum 儲存圖片
以下通過一個案例是四種API的使用方法
描述:
1. 首先選擇本地圖片儲存到變數陣列中,然後再頁面中渲染圖片。
2. 給每個圖片一個事件,並用data-傳遞當前圖片的url,然後通過相應的事件預覽圖片。
3. 預覽成功後獲取圖片的相關資訊,
4. 最後使用儲存圖片
wxml:
<button type="primary" bindtap ="chooseImg">選擇圖片</button>
<!-- 通過獲取的圖片陣列,遍歷圖片 -->
<block wx:for="{{imgUrls}}" wx:key="{{index}}">
<image src='{{item}}' data-url="{{item}}" bindtap='previewImg'></image>
</block>
js:
Page({
data: {
imgUrls: []
},
onLoad: function (options) {
wx.showToast({
title: '載入中' ,
icon: 'loading',
duration: 1000,
mask: true,
success: function(){
console.log('載入開始了');
}
})
},
chooseImg: function(){
var that = this;
wx.chooseImage({ //選擇圖片
count: 9, //最多可以選擇圖片的張數
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有
success: function(res) {
that.setData({
imgUrls: res.tempFilePaths //將獲取的圖片url陣列賦值給變數
});
},
})
wx.hideToast();
},
previewImg: function(e){
var current = e.target.dataset.url;
wx.previewImage({ //預覽圖片
current: current, //需要預覽的當前圖片的url
urls: this.data.imgUrls, //需要預覽的圖片連結列表
success: function(){
console.log("圖片預覽成功");
wx.getImageInfo({ //獲取圖片的資訊
src: current,
success: function(res){
console.log(res); //width,height等屬性
wx.saveImageToPhotosAlbum({ //儲存圖片
filePath: res.path, //圖片檔案路徑
success: function(res){
wx.showToast({
title: '儲存成功',
icon: 'success',
duration: 2000
})
console.log('儲存圖片成功',res);
},
fail: function(err){
console.log(err);
//使用者授權
if (err.errMsg == 'saveImageToPhotosAlbum:fail cancel'){
wx.openSetting({
success(settingdata) {
console.log(settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
console.log('獲取許可權成功,給出再次點選圖片儲存到相簿的提示。')
} else {
console.log('獲取許可權失敗,給出不給許可權就無法正常使用的提示')
}
}
})
}
}
})
}
})
}
})
}
})
相關推薦
微信小程式圖片四個API用法
小程式的圖片API主要是 wx.chooseImage 選擇圖片 wx.previewImage 預覽圖片 wx.getImageInfo 獲取圖片的資訊 wx.saveImageToPhotosAlbum 儲存圖片 以下通過一個案例是四種API
微信小程式圖片處理 image元件用法
image 圖片。 屬性名 型別 預設值 說明 最低版本 src String 圖片資源地址,支援雲檔案ID(2.2.3起) &nb
關於微信小程式圖片本地顯示真機測試上不能顯示的問題
廢話不多說直接入正題 圖片不能過大 圖片命名不能含有中文 圖片命名也不能有空格 圖片大小寫要區分 以介面或者連結形式的圖片開頭不能是大寫的HTTP結尾也不能是.PNG 上面就是我在今天碰到問題時在網上搜到的普遍解決方法 但如果問題還沒解決,怎麼辦呢?
mpvue寫微信小程式-圖片引入(一)
1、快速上手(http://mpvue.com/mpvue/quickstart/) 按官網給出流程,建立: 執行後,在微信工具檢視: 編輯器中檢視目錄結構: 為了執行的
微信小程式圖片拼接的時候底部留白的問題解決
原文連結:傳送門 1.給圖片包裹元素加屬性 position: relative;
微信小程式:高德API-PoI地址搜尋
在開始開發前有幾步必要步驟: 1.進入高德地圖API官網,登陸,開發支援-微信小程式SDK,控制檯,應用管理,建立開發需要的key。注意:服務平臺,必須是微信小程式。key用於什麼開發就建立什麼平臺Key。 2.下載 amap-wx.js開發包,https://lbs.amap
微信小程式:高德API之定位。
在開始開發前有幾步必要步驟: 1.進入高德地圖API官網,登陸,開發支援-微信小程式SDK,控制檯,應用管理,建立開發需要的key。注意:服務平臺,必須是微信小程式。key用於什麼開發就建立什麼平臺Key。 2.下載 amap-wx.js開發包,https://lbs.amap
5行程式碼實現微信小程式圖片上傳與騰訊免費5G儲存空間的使用
本文介紹瞭如何在微信小程式開發中使用騰訊官方提供的雲開發功能快速實現圖片的上傳與儲存,以及介紹雲開發的 5G 儲存空間的基本使用方法,這將大大提高微信小程式的開發效率,同時也是微信小程式系列教程的視訊版更新的文字版本摘要。 此文為 「60 節實戰課微信小程式開發視訊教程」 的第 51 小節
微信小程式圖片點選放大
WXML <view class='imgList'> <view class='imgList-li' wx:for='{{imgArr}}'> <image class='img' src='{{i
微信小程式解除 10 個請求併發限制了?!
這可能是一個冷訊息,所以標題比較勁爆。 小程式併發限制由來已久,從剛釋出時的 5 併發,到後來的 10 併發,同時發出的請求數若超出這個限制則將被殘忍拋棄,由此催生了很多開發者在自己的專案中造了「請求排隊」的輪子。然而事實上,早在一年半以前,該限制就被微信官方取消。 10 個請求的併發限制 關於併
微信小程式——返回上個頁面帶引數
當前頁面: var pages = getCurrentPages(); //當前頁面 var prevPage = pages[pages.length - 2]; //上一頁面 pr
微信小程式連線圖靈API實現智慧聊天(超級簡單)
小程式的demo.wxml <view class='top'>{{tittle}}</view> <view class='que' > <block wx:for="{{syas}}" wx:for-item="it
web端重構微信小程式 圖片上傳
注意 一般情況上傳照片有兩種方式: 本地圖片轉換成base64,然後通過普通的post請求傳送到服務端。 操作簡單,適合小圖,以及如果想相容低版本的ie沒辦法用此方法 使用 但微信小程式不支援base64格式上傳,使用的是小程式的apiwx.uploa
微信小程式-傳遞多個引數與事件處理
開發過程中經常會遇到從一個頁面攜帶資料到另一個頁面的情況,所以需要知道以下資訊,什麼是事件?有哪些傳遞方式?如果傳遞陣列呢?如果傳遞物件呢? 一、事件 什麼是事件 事件是檢視層到邏輯層的通訊方式 事件可以將使用者的行為反饋到邏輯層進行處理 事件可以繫結在元件上,當
微信小程式基於高德api地理/逆地理編碼獲取地址
1.先使用微信自帶方法wx.getLocation去獲取經緯度。 wx.getLocation({ type: 'wgs84', //預設為 wgs84 返回 gps 座標,gcj02 返回可用於 wx.openLocation 的座標 suc
微信小程式圖片文字水平垂直居中對齊解決方案
我們知道常用的居中對齊方式有很多種例如: text-align:center; align-items:center; justify-content: center; margin: auto; #子容器在父容器中居中 但是在view中的文字對齊卻不能簡單的使用text-ali
微信小程式呼叫qq音樂API介面
2018年11月14日 15:23:10 LC_cat 閱讀數:8 標籤: 小程式
微信小程式圖片縮放、移動
一波乾貨 .wxml <!--scale.wxml--> <view class="container"> <view class="tip"> <text>scroll-view子元素縮放</text&g
微信小程式 - 圖片懶載入
wxml <!-- 資料來源 --> <view class='item-{{index}}' wx:for="{{lazyData}}" wx:key="*this.src"> <image src='{{item.show?
微信小程式(四):Tab分頁
本文介紹在微信小程式中實現多Tab分頁的功能。內容多出自官方文件,增加了一些作者實踐過程中遇到的問題與注意點。 本文基於微信小程式公測版,IDE:微信開發者工具 0.10.102800 1.1 元件 tabBar 微信小程式提供了一個元件