ホームページ >ウェブフロントエンド >H5 チュートリアル >WeChat アプレット ページに実装された画像保存の詳細な分析 (コード付き)
WeChat アプレット ページに実装された画像保存の詳細な分析 (コード付き)
- 奋力向前転載
- 2021-08-18 09:42:535261ブラウズ
前回の記事「WeChat ミニ プログラムと Web (コード共有) の相互作用の簡単な分析 」では、WeChat ミニ プログラムと Web 間の相互作用について説明します。ウェブ。次の記事では、WeChat アプレット ページで画像を保存する方法を説明しますので、困っている友人は参考にしていただければ幸いです。
背景
ミニ プログラムの webview に画像を保存します。 WeChat の js-sdk は saveImageToPhotosAlbum メソッドを提供していないため、
ミニ プログラムとの詳細な web インタラクションについては、こちらを参照してください
ソリューションのアイデア
最初に WeChat をロードjs-sdk
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
3 つのステップ
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# では、 ## listen 関数は特定の時間にのみトリガーされ、メッセージを受信します。つまり、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)
}
})
}
}
So。保存を実行するとすぐに戻りイベントをトリガーできます。
function() {
// 此处省略
wx.miniProgram.postMessage({
data: {
xxx: 'aaa'
}
})
wx.miniProgram.navigateBack({
delta: 1
}) //注意这里.
}完全なコードは次のとおりです:
html終了コード:
小さな端末コード:webchat webview save image <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script> <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>
// 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();
}
}))推奨学習: 以上がWeChat アプレット ページに実装された画像保存の詳細な分析 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。