關(guān)于將手機(jī)里的圖片放在上傳到小程序，在小程序里這種方法并不陌生，甚至大多數(shù)小程序都附帶有這種功能，那么這種功能是怎么實(shí)現(xiàn)的呢，一起來看看吧?。。?/p>
1.微信小程序加載圖片的幾種方法
1.本地圖片的加載
例如：本地路徑：/pages/images/1.png
<image class="widget" src="/pages/images/1.png"></image>
//此處可以通過mode來設(shè)置圖片的放置方式然后在wxss中設(shè)置自己需要的樣式即可
?關(guān)于mode的其他詳情可以前往官方文檔進(jìn)行查看：image | 微信開放文檔 (qq.com)
2.加載網(wǎng)絡(luò)圖片
例如：網(wǎng)絡(luò)圖片地址為：http://img1.3lian.com/2015/w7/85/d/101.jpg（此圖片已無效）
<image class="widget" src="http://img1.3lian.com/2015/w7/85/d/101.jpg" mode="aspectFill"></image>然后在wxss中設(shè)置自己需要的樣式即可
mode的使用方法如上
3.使用本地svg圖片（svg是可縮放矢量圖形）
詳情可以進(jìn)行以下鏈接查看：小程序支持 SVG | 微信開放社區(qū) (qq.com)
<image class="number-icon" src="/static/svg/shandian.svg"></image>本地svg與本地圖片的調(diào)用使用方法相同（svg相比較于圖片更加清晰）
此處還可使用base64的方法將svg轉(zhuǎn)化為base64的代碼在wxss中使用
<view class="skin-icon1"></view>.skin-icon1 {
width: 40rpx;
height: 40rpx;
background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAyMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgY2xpcC1wYXRoPSJ1cmwoI2NsaXAwXzg3MzVfMTI3NDM3KSI+CjxwYXRoIGQ9Ik0xMC4wMDAxIDE4LjMzMzRDMTQuNjAyNSAxOC4zMzM0IDE4LjMzMzQgMTQuNjAyNSAxOC4zMzM0IDEwLjAwMDFDMTguMzMzNCA1LjM5NzcxIDE0LjYwMjUgMS42NjY3NSAxMC4wMDAxIDEuNjY2NzVDNS4zOTc3MSAxLjY2Njc1IDEuNjY2NzUgNS4zOTc3MSAxLjY2Njc1IDEwLjAwMDFDMS42NjY3NSAxNC42MDI1IDUuMzk3NzEgMTguMzMzNCAxMC4wMDAxIDE4LjMzMzRaIiBzdHJva2U9IiM0QkRDQUIiIHN0cm9rZS13aWR0aD0iMS42NjY2NyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CjxwYXRoIGQ9Ik0zLjc1IDE1LjQxNjdMNy4wODMzMyAxMS42NjY3TDEzLjc1IDE3LjA4MzQiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPHBhdGggZD0iTTcuNDk5OTIgOC43NTAwOEM4LjQyMDM5IDguNzUwMDggOS4xNjY1OSA4LjAwMzg5IDkuMTY2NTkgNy4wODM0MUM5LjE2NjU5IDYuMTYyOTQgOC40MjAzOSA1LjQxNjc1IDcuNDk5OTIgNS40MTY3NUM2LjU3OTQ0IDUuNDE2NzUgNS44MzMyNSA2LjE2Mjk0IDUuODMzMjUgNy4wODM0MUM1LjgzMzI1IDguMDAzODkgNi41Nzk0NCA4Ljc1MDA4IDcuNDk5OTIgOC43NTAwOFoiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3Ii8+CjxwYXRoIGQ9Ik0xMCAxMy43NDk5TDEzLjMzMzMgOS41ODMyNUwxNy41IDEyLjkxNjYiIHN0cm9rZT0iIzRCRENBQiIgc3Ryb2tlLXdpZHRoPSIxLjY2NjY3IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KPC9nPgo8ZGVmcz4KPGNsaXBQYXRoIGlkPSJjbGlwMF84NzM1XzEyNzQzNyI+CjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgZmlsbD0id2hpdGUiLz4KPC9jbGlwUGF0aD4KPC9kZWZzPgo8L3N2Zz4K");
background-size: cover;
}
此處一樣可以展示出圖片效果，而且不會(huì)占據(jù)小程序內(nèi)部的空間，是很不錯(cuò)的降低空間儲(chǔ)存的方法?
2.如何獲取手機(jī)內(nèi)部的圖片
以下部分為js代碼，獲取到你所上傳圖片的鏈接（此處鏈接的產(chǎn)生是微信自帶的api返回的）
//從相冊(cè)獲取照片
wx.chooseMedia({
count: 1,
mediaType: ['image'],
sourceType: ['album'],
sizeType: ['original'],
success(res) {
var tempFilePath = res.tempFiles[0].tempFilePath;
try {
const FileSystemManager = wx.getFileSystemManager();
var url = FileSystemManager.saveFileSync(tempFilePath, wx.env.USER_DATA_PATH + '/' + tempFilePath.replace("wxfile://", ""));
this.setData({
picture: url
});
} catch {
wx.showToast({
title: '設(shè)置失敗',
icon: 'error',
duration: 2000
});
}
},
fail() {
wx.showToast({
title: '上傳失敗',
icon: 'error',
duration: 2000
});
}
});在此處拿到鏈接之后就可以將其渲染到主頁面上了
<!-- 自定義圖片 -->
<image class="ima" src="{{picture}}" mode="aspectFill"></image>這里此處由于自定義圖片位于個(gè)性換膚界面與需要渲染的頁面距離較遠(yuǎn)，故采用存緩存的方式，將圖片鏈接先儲(chǔ)存在緩存之中，在返回主頁面的時(shí)候小程序在監(jiān)聽到返回主頁面時(shí)會(huì)觸發(fā)onshow函數(shù)，故將讀取緩存的位置放在onshow函數(shù)中即可拿到對(duì)應(yīng)的圖片鏈接，然后將其設(shè)置給picture這個(gè)變量即可，在wxml頁面通過{{picture}}來引用picture里面的鏈接地址，即可完成圖片背景的自定義設(shè)置啦！同樣可以通過class選擇器來實(shí)現(xiàn)對(duì)圖片樣式的設(shè)置
關(guān)于更多的詳情可查看微信小程序官方文檔：wx.chooseMedia(Object object) | 微信開放文檔 (qq.com)文章來源：http://www.zghlxwxcb.cn/news/detail-443584.html
3.總結(jié)
此處知識(shí)點(diǎn)的總結(jié)希望可以幫到各位剛?cè)腴T的開發(fā)者們，總體來說此處的知識(shí)點(diǎn)并不復(fù)雜，加以練習(xí)便可熟練的掌握啦，那各位咱們下次再見了，期待和各位一起變強(qiáng)?。?！
文章來源地址http://www.zghlxwxcb.cn/news/detail-443584.html
到了這里，關(guān)于微信小程序——圖片的加載與獲取手機(jī)內(nèi)部的圖片的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
