sp-html2canvas-render：https://ext.dcloud.net.cn/plugin?id=15050
之前在iOS中通过：
<view id="targetView" style="padding: 10px;">
<!-- 顶部背景 -->
<image class="bg-image" src="bgImageUrl" />
</view>
在保存的时候，会报错（应该是后端没有设置跨越导致的，因为随便找了一张百度上的图是OK的），后面也没有叫后端去处理这个，因为这个图片链接在页面中是可以展示正常的。
后面把代码稍微调整成加载图片的base64，如下：
<view id="targetView" style="padding: 10px;">
<!-- 顶部背景 -->
<view class="bg-image" :style="{
backgroundImage: 'url(' + bgImageBase64 + ')',
backgroundSize: 'cover',
backgroundPosition: 'center',
backgroundColor: '#ff1818',
}" />
</view>
async getImgBase64(url, type = "bg") {
// #ifdef H5
// H5端使用 canvas 转换
let res = await uni.request({
url: url,
responseType: "arraybuffer"
});
let blob = new Blob([res.data], {
type: "image/jpeg"
});
let reader = new FileReader();
reader.onload = (e) => {
if (type == "bg") {
this.bgImageBase64 = e.target.result;
} else {
this.footerAvatar = e.target.result;
}
};
reader.readAsDataURL(blob);
// #endif
// #ifdef APP-PLUS
// App端直接用本地方法
plus.downloader.createDownload(url, {}, (d, status) => {
if (status == 200) {
plus.io.resolveLocalFileSystemURL(
d.filename,
(entry) => {
entry.file((file) => {
let fileReader = new plus.io.FileReader();
fileReader.onloadend = (e) => {
if (type == "bg") {
this.bgImageBase64 = e.target.result;
} else {
this.footerAvatar = e.target.result;
}
};
fileReader.readAsDataURL(file);
});
}
);
}
}).start();
// #endif
},
