- 小程序页面,通过webview 嵌入的H5页面
<template>
<web-view @message="postMessage" :src="url"></web-view>
</template>
<script>
export default {
data() {
return {
imgBase64: "",
url: "http://192.168.111.178:8080/H5Page",
};
},
methods: {
postMessage(options) {
this.imgBase64 = options.detail.data[0].imgBase64 || "";
if (this.imgBase64) {
this.toSave();
}
},
toSave() {
uni.showLoading({
title: "正在生成图片",
mask: true,
});
uni.getSetting({
success: res => {
if (!res.authSetting["scope.writePhotosAlbum"]) {
uni.authorize({
scope: "scope.writePhotosAlbum",
success: () => {
uni.hideLoading();
this.saveImg();
},
fail: res => {
uni.hideLoading();
uni.showToast('无法保存图片,请先授权')
},
});
} else {
uni.hideLoading();
this.saveImg();
}
},
});
},
saveImg() {
const base64Str = this.imgBase64.slice(22),
buffer = uni.base64ToArrayBuffer(base64Str),
filePath = wx.env.USER_DATA_PATH + "/base64src.png";
uni.getFileSystemManager().writeFile({
filePath,
data: buffer,
encoding: "binary",
success: (res) => {
uni.saveImageToPhotosAlbum({
filePath,
success: res => {
uni.showToast('图片保存成功')
},
fail: error => {
uni.showToast('图片保存失败')
},
});
},
fail: error => {
uni.showToast('图片保存失败')
}
});
}
}
};
</script>
- H5页面
<template>
<div class="wrap" >
<div class="ct" v-show="bgImg">
<img class="ct-close" @click="Close" src="~static/images/cancel.png" />
<div class="ct-content" id="poster" ref="poster" :style="bgImg ? setStyle() : ''">
<div class="ct-txt">{{text}}</div>
</div>
<div class="ct-submit" v-throttle="saveImg">保存图片</div>
</div>
</div>
</template>
<script>
import wx from 'weixin-js-sdk'
import axios from 'axios'
import snapshot from "@/utils/html2Canvas";
export default {
data () {
return {
bgImg: '',
text: ''
}
},
async mounted () {
const bgImg = await this.getImageInfo(
'/api/img/20211008/123456.png'
)
this.bgImg = bgImg.src
},
methods: {
setStyle () {
return `background: url(${this.bgImg}) no-repeat; background-size: 100% 100%; `
},
Close () {
wx.miniProgram.navigateBack({ delta: 1 })
},
getImageInfo (path) {
return new Promise((resolve, reject) => {
axios
.get(path, { responseType: 'blob' })
.then(res => {
const blob = res.data
const url = URL.createObjectURL(blob)
const img = new Image()
img.src = url
img.onload = () => {
resolve(img)
}
})
.catch(() => {
console.log('加载图片失败')
})
})
},
async saveImg () {
const imgBase64 = await snapshot(this.$refs.poster)
wx.miniProgram.postMessage({
data: {
imgBase64
}
})
wx.miniProgram.navigateBack({ delta: 1 })
}
}
}
</script>