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

你可能感兴趣的:(uniapp,前端)