深入解析微信小程式頁面中實現的儲存圖片（附程式碼）
之前的文章《》中，給大家瞭解一下微信小程式和web之間的互動。下面本篇文章給大家瞭解一下微信小程式頁面中實現的儲存圖片，有需要的朋友可以參考一下，希望對你們有幫助。
背景
在小程式的webview裡儲存圖片。因為微信的js-sdk沒有提供saveImageToPhotosAlbum方法
更多web和小程式的互動，請
解決思路
先載入微信js-sdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
分三步
1、html端把圖片轉為base64，然後透過postmessage傳遞給小程式
let img = new Image();
img.src = "xxxx"; //這裡是圖片的src
img.crossOrigin = "anonymous"; //The opeartaion is insecure . 其它跨域的問題 自行代理解決
img.onload = function () {
let canvas = document.createElement("canvas");
canvas.width = img.width;
canvas.height = img.height;
let ctx = canvas.getContext("2d");
ctx.drawImage(this, 0, 0);
let imgBase64Data = canvas.toDataURL("image/jpeg", 1); //這裡就拿到了base64
wx.miniProgram.postMessage({
data: {
imgData: imgBase64Data, // 剛才拿到的base64 資料
},
});
};
2、小程式監聽postmessage拿到圖片base64資料。
// wxml
<
web - view src = "http://www.chuchur.com/save-image"
bindmessage = "getMessage" > < /web-view>
// js
Page({
data: {
imageData: null
}
getMessage(e) {
this.setData({
imageData: e.detail.data[0].imgData
})
}
})
3. 儲存圖片到相簿（在小程式裡）
因為拿到是base64圖片資料，首先要把它存為圖片檔案。
wx.getFileSystemManager().writeFile({
filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //這裡先把檔案寫到臨時目錄裡.
data: this.data.imageData.slice(22), // 注意這裡
encoding: "base64",
success: (res) => {
console.log("success");
},
fail: (error) => {
console.log(error);
},
});
getFileSystemManager的writeFile寫入的base64是不包含圖片的頭位元組的。所以要幹掉data:image/jpeg;base64，等字元
有了檔案路徑就可以儲存到相簿了
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //這是把臨時檔案 儲存到 相簿, 收工
success: (res) => {
wx.showToast({
title: "儲存成功！",
});
},
fail: (error) => {
console.log(error);
},
});
沒有接收到？不是實時觸發？
文件發現雖然h5中的postMessage會馬上提交資訊，但是小程式並不會馬上受理，在小程式webview上的監聽函式，只會在特定時機觸發並收到訊息：也就是postMessage所有的訊息都只能等得分享或webview的生命週期結束才會被觸發。他是一個訊息佇列：
getMessage: function(e) {
if (e.type === 'message' && e.detail && e.detail.data && e.detail.data.length > 0) {
e.detail.data.forEach(function(dataItem) {
if (dataItem.type === 'qbreport' && dataItem.key) {
// todo： yourFn(dataItem.key)
}
})
}
}
所以，我們在執行儲存的時候可以立馬觸發它的返回事件。
function() {
// 此處省略
wx.miniProgram.postMessage({
data: {
xxx: 'aaa'
}
})
wx.miniProgram.navigateBack({
delta: 1
}) //注意這裡.
}
完整的程式碼如下：
html端程式碼：
<html>
<title>webchat webview save image</title>
<header>
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
</hearder>
<body>
<button id="saveImage" onclick="saveImage">下載圖片</button>
<script>
function saveImage() {
let img = new Image()
img.src = 'xxxx' //這裡是圖片的src
img.crossOrigin = 'anonymous' //The opeartaion is insecure , 其他跨域問題自行代理解決.
img.onload = function() {
let canvas = document.createElement('canvas')
canvas.width = img.width
canvas.height = img.height
let ctx = canvas.getContext('2d')
ctx.drawImage(this, 0, 0)
let imgBase64Data = canvas.toDataURL('image/jpeg', 1) //這裡就拿到了base64
wx.miniProgram.postMessage({
data: {
imgData: imgBase64Data // 剛才拿到的base64 資料
}
})
wx.miniProgram.navigateBack({
delta: 1
}) //注意這裡.
}
}
</script>
</body>
</html>
小程式端程式碼：
// wxml
<
web - view src = "http://www.chuchur.com/save-image"
bindmessage = "getMessage" > < /web-view>
// js
Page({
getMessage(e) {
let img = e.detail.data[0].imgData
wx.getFileSystemManager().writeFile({
filePath: wx.env.USER_DATA_PATH + '/qrcode.jpeg', //這裡先把檔案寫到臨時目錄裡.
data: img.slice(22), //注意這裡
encoding: 'base64',
success: res => {
console.log('success')
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + '/qrcode.jpeg', //這是把臨時檔案 儲存到 相簿, 收工
success: res => {
wx.showToast({
title: '儲存成功！'
})
},
fail: error => {
console.log(error)
}
})
},
fail: error => {
console.log(error)
}
})
}
})
其它相關
儲存遠端圖片
wx.showLoading({
title: "正在下載圖片... ",
mask: !1
})
wx.downloadFile({
url: '填寫一個遠端的圖片連結',
success: function(t) {
wx.showLoading({
title: "正在儲存圖片",
mask: !1
})
wx.saveImageToPhotosAlbum({
filePath: t.tempFilePath,
success: function() {
wx.showModal({
title: "自定義提示資訊",
content: "儲存成功",
showCancel: !1
});
},
fail: function(t) {
wx.showModal({
title: "圖片儲存失敗",
content: t.errMsg,
showCancel: !1
});
},
complete: function(t) {
wx.hideLoading();
}
});
},
fail: function(t) {
wx.showModal({
title: "圖片下載失敗",
content: t.errMsg,
showCancel: !1
});
},
complete: function(t) {
wx.hideLoading();
}
}))
推薦學習：
以上就是深入解析微信小程式頁面中實現的儲存圖片（附程式碼）的詳細內容，更多請關注php中文網其它相關文章！
來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/506/viewspace-2827431/，如需轉載，請註明出處，否則將追究法律責任。
相關文章
- 微信小程式中base64圖片的顯示與儲存微信小程式
- 小程式–儲存圖片到相簿功能實現
- 微信小程式storage儲存微信小程式
- 微信小程式--實現圖片懶載入（lazyload）微信小程式
- 微信小程式基於騰訊雲物件儲存的圖片上傳微信小程式物件
- 微信小程式掃碼解析小程式碼微信小程式
- 5行程式碼實現微信小程式圖片上傳與騰訊免費5G儲存空間的使用行程微信小程式
- 微信小程式 實現網路圖片本地快取微信小程式快取
- 微信小程式開發系列七：微信小程式的頁面跳轉微信小程式
- 使用taro+canvas實現微信小程式的圖片分享功能Canvas微信小程式
- 微信H5實現網頁長按儲存圖片及識別二維碼H5網頁
- 微信小程式 圖片上傳微信小程式
- 微信小程式圖片使用示例微信小程式
- 微信掃小程式碼實現網頁端登入網頁
- 微信小程式（JAVAScript）實現餅圖微信小程式JavaScript
- 獲取微信小程式二維碼並且儲存微信小程式
- 微信小程式--通過canvas生成圖片並儲存到本地微信小程式Canvas
- 微信小程式朋友圈分享圖片生成方案實現微信小程式
- 【微信小程式canvas】實現小程式手寫板使用者簽名(附程式碼)微信小程式Canvas
- 微信小程式開發系列 (四) ：微信小程式的頁面跳轉路由設計微信小程式路由
- 微信小程式實現軌跡回放，微信原生小程式，基於uniapp的小程式？微信小程式APP
- 微信小程式 webview 頁面重新整理微信小程式WebView
- 模擬微信小程式頁面Page方法微信小程式
- 獲取微信小程式頁面路徑微信小程式
- 微信小程式裁剪圖片成圓形微信小程式
- 微信小程式中頁面間跳轉傳參方式微信小程式
- 微信小程式中圖片佔滿整個螢幕微信小程式
- 微信小程式深度解析微信小程式
- 當微信小程式遇上TensorFlow：小程式實現微信小程式
- 微信小程式實現全域性搜尋程式碼高亮微信小程式
- 小程式實現微信 【我的】介面
- 微信小程式功能之全屏滾動效果的實現程式碼微信小程式
- 微信小程式之swiper輪播圖中的圖片自適應高度微信小程式
- 微信小程式實現商城案例（賦原始碼)微信小程式原始碼
- 微信小程式頁面功能-----標籤切換微信小程式
- 微信小程式上傳圖片至七牛微信小程式
- 微信小程式之裁剪圖片成圓形微信小程式
- 微信小程式實戰影片教程附原始碼課件與多個微信小程式原始碼 14課微信小程式原始碼