在小程序文檔中我們可以看到wx.previewImage的功能是在新頁面中全屏預(yù)覽圖片,預(yù)覽的過程中用戶可以進行保存圖片、發(fā)送給朋友等操作。但其實還有一個隱藏功能縮放圖片,最小為原比例。話不多說,上代碼:
xml代碼:
<view class="container">
<image class="img" src="/assets/images/longpress-image-scan/wx-qr-code.jpg" data-src="/assets/images/longpress-image-scan/wx-qr-code.jpg" bind:tap="previewImage" mode="widthFix" />
</view>
src的路徑換成自己的圖片路徑就可以了,可以是像上面一樣的本地圖片路徑,也可以是線上圖片鏈接。
js代碼:文章來源:http://www.zghlxwxcb.cn/news/detail-797727.html
Page({
/**
* 預(yù)覽圖片
* @param {*} e
*/
previewImage(e){
const {src:imgSrc} = e.currentTarget.dataset
console.log(imgSrc);
wx.previewImage({
current: imgSrc,
urls: [imgSrc],
success: res => {
console.log(res);
},
fail: err => {
console.log(err);
}
})
}
})
注意:該功能需在真機上測試,微信開發(fā)者工具中的模擬器看不到效果喲。文章來源地址http://www.zghlxwxcb.cn/news/detail-797727.html
到了這里,關(guān)于小程序中使用wx.previewImage實現(xiàn)圖片預(yù)覽與縮放的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!