이전 기사 "WeChat Mini 프로그램과 웹(코드 공유) 간의 상호 작용에 대한 간략한 분석 "에서 WeChat Mini 프로그램과 웹 간의 상호 작용에 대한 이해를 설명했습니다. 다음 글은 WeChat 애플릿 페이지에서 이미지를 저장하는 방법에 대한 이해를 제공할 것입니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.
Background
미니프로그램의 웹뷰에 사진을 저장하세요. WeChat의 js-sdk는 saveImageToPhotosAlbum 메소드를 제공하지 않기 때문에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
웹과 미니 프로그램 간의 더 많은 상호 작용을 보려면
여기를 참조하세요
솔루션 아이디어
먼저 WeChat js-sdk
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>
로그인 후 복사
를 3단계로 로드하세요
html</code에서 이미지를 <code>base64로 변환하세요. > 측면으로 이동한 다음 postmessage
// 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)
}
})
}
}) 로그인 후 복사
🎜🎜2를 통해 애플릿에 전달합니다. 애플릿은
postmessage를 수신하고
base64 이미지를 가져옵니다. 데이터. 🎜🎜
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();
}
})) 로그인 후 복사
🎜🎜3. 사진을 앨범에 저장하세요(미니프로그램에서) 🎜🎜🎜
base64 이미지 데이터를 받으므로 먼저 이미지 파일로 저장해야 합니다. 🎜rrreee🎜🎜getFileSystemManager의 writeFile이 작성한 base64에는 이미지의 헤더 바이트가 포함되어 있지 않습니다. 그래서 데이터를 제거해야 합니다:image/jpeg;base64 및 기타 문자🎜🎜🎜파일 경로를 사용하여 앨범에 저장할 수 있습니다🎜rrreee🎜수신하지 못하셨나요? 실시간으로 실행되지 않나요? 🎜🎜문서에서는
h5의
postMessage가 정보를 즉시 제출하지만 미니 프로그램
webview에서는 이를 즉시 수락하지 않는 것으로 나타났습니다. > 청취 기능은 특정 시간에만 트리거되고 메시지를 수신합니다. 즉,
postMessage의 모든 메시지는 공유 수명 주기 또는
webview가 종료된 후에만 트리거될 수 있습니다. . 이는 메시지 대기열입니다. 🎜rrreee🎜🎜So🎜, 저장을 실행할 때 즉시 반환 이벤트를 트리거할 수 있습니다. 🎜rrreee🎜전체 코드는 다음과 같습니다. 🎜🎜
html 사이드 코드: 🎜rrreee🎜소형 프로그램 사이드 코드: 🎜rrreee🎜기타 관련🎜🎜🎜원격 사진 저장🎜🎜rrreee🎜추천 학습: 🎜 SVG 비디오 튜토리얼🎜🎜🎜
위 내용은 WeChat 애플릿 페이지에 구현된 저장 이미지에 대한 심층 분석(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
