uniapp中，H5端使用html2canvas生成海报

项目中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: '已完成',
				});
			}
		})
	});
},