溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下微信小程序頁面中如何實(shí)現(xiàn)保存圖片，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
在小程序的webview里保存圖片。因?yàn)槲⑿诺?code>js-sdk沒有提供saveImageToPhotosAlbum方法
先加載微信js-sdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
1、html端把圖片轉(zhuǎn)為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 數(shù)據(jù)
},
});
};2、小程序監(jiān)聽postmessage拿到圖片base64數(shù)據(jù)。
// 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. 保存圖片到相冊（在小程序里）
因?yàn)槟玫绞?code>base64圖片數(shù)據(jù)，首先要把它存為圖片文件。
wx.getFileSystemManager().writeFile({
filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //這里先把文件寫到臨時(shí)目錄里.
data: this.data.imageData.slice(22), // 注意這里
encoding: "base64",
success: (res) => {
console.log("success");
},
fail: (error) => {
console.log(error);
},
});getFileSystemManager的writeFile寫入的base64是不包含圖片的頭字節(jié)的。所以要干掉data:image/jpeg;base64，等字符
有了文件路徑就可以保存到相冊了
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + "/qrcode.png", //這是把臨時(shí)文件 保存到 相冊, 收工
success: (res) => {
wx.showToast({
title: "保存成功！",
});
},
fail: (error) => {
console.log(error);
},
});文檔發(fā)現(xiàn)雖然h6中的postMessage會(huì)馬上提交信息，但是小程序并不會(huì)馬上受理，在小程序webview上的監(jiān)聽函數(shù)，只會(huì)在特定時(shí)機(jī)觸發(fā)并收到消息：也就是postMessage所有的消息都只能等得分享或webview的生命周期結(jié)束才會(huì)被觸發(fā)。他是一個(gè)消息隊(duì)列：
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)
}
})
}
}所以，我們在執(zhí)行保存的時(shí)候可以立馬觸發(fā)它的返回事件。
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 數(shù)據(jù)
}
})
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', //這里先把文件寫到臨時(shí)目錄里.
data: img.slice(22), //注意這里
encoding: 'base64',
success: res => {
console.log('success')
wx.saveImageToPhotosAlbum({
filePath: wx.env.USER_DATA_PATH + '/qrcode.jpeg', //這是把臨時(shí)文件 保存到 相冊, 收工
success: res => {
wx.showToast({
title: '保存成功！'
})
},
fail: error => {
console.log(error)
}
})
},
fail: error => {
console.log(error)
}
})
}
})保存遠(yuǎn)程圖片
wx.showLoading({
title: "正在下載圖片... ",
mask: !1
})
wx.downloadFile({
url: '填寫一個(gè)遠(yuǎn)程的圖片鏈接',
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();
}
}))以上是“微信小程序頁面中如何實(shí)現(xiàn)保存圖片”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學(xué)習(xí)更多知識，歡迎關(guān)注億速云行業(yè)資訊頻道！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼