项目中H5需要实现canvas生成海报,于是用了html2canvas,中间各种BUG,其中跨域问题一直没有处理好,后台服务器设置了支持跨域也不可以。最后解决方案是,把网络图片全部转成base64展示,在调用html2canvas保存图片。APP端canvas的用法参考我的另一篇文章,uniapp中使用canvas,APP端支持生成海报并返回临时路径,用来保存到手机
<view class="pick poster" id="poster">
<!-- 这里边是你需要保存的页面样式,需要什么样式就写什么样的就行,都放在这里边 -->
</view>
import html2canvas from 'html2canvas'; // 引入 html2canvas
// 网络图片跨域问题,后台出了一条接口,需要把网络图片链接转成base64,自己调接口,这块就不写了。
toImg() {
let dom = document.querySelector('#poster'); // 获取dom元素
html2canvas(dom, {
width: dom.clientWidth, //dom 原始宽度
height: dom.clientHeight,
scrollY: 0,// html2canvas默认绘制视图内的页面,需要把scrollY,scrollX设置为0
scrollX: 0,
useCORS: true,//支持跨域,但好像没什么用
}).then((canvas) => {
//成功后调用返回canvas.toDataURL返回图片的base64,H5不支持下载base64,PC浏览器测试没问题,可以正常下载。
this.base64 = canvas.toDataURL('image/png', 1);
// 这里简单点,直接吧base64传给后台,后台返回个url链接,用来下载
this.$http.post("/api/upload/image_by_base64", {
image: this.base64
}).then(res => {
if (res.status == 200) {
this.downImg = res.data.data;
uni.showToast({
icon: 'success',
mask: true,
title: '已完成',
});
}
})
});
},