uniapp中使用canvas生成海报，并下载保存到手机相册

如下图，是在H5中测试，canvas生成后需要保存图片，使用uni.canvasToTempFilePath（官方文档API支持H5的）拿到绘制海报的base64，保存图片，如果提示画布被污染，看看是不是图片跨域的原因，需要后台也设置允许图片跨域，如果还不行（建议使用html2canvas,个人感觉这个插件不是很好用，各种跨域。我的另一篇文章里记录了用法，可以参考H5中html2canvas用法），APP端生成成功后，会返回图片的临时路径用来保存到相册（不存在图片跨域问题）。

完整代码：可以将整个代码复制到你得uniapp项目中直接运行。代码中做了详细的注释，关于API的用法，这里只做了简单的注释，具体还是参考
官方链接uniapp-canvas吧

<template>
	<view class="demo">
		<canvas :style="{ width: canvasW + 'px', height: canvasH + 'px' }" canvas-id="myCanvas" id="myCanvas"></canvas>
	</view>
</template>
<script>
	export default {
     
		components: {
     },
		data() {
     
			return {
     
				canvasW:0, // 画布宽
				canvasH:0, // 画布高
				SystemInfo:{
     }, // 设备信息
				goodsImg: {
     }, // 商品主图
				ewmImg:{
     }, // 二维码图片
				ewmW:120, // 二维码大小
				title:'COCOSILIYA抖音爆款男女士鎏金沙香水持久自然淡香流沙金香水', // 商品标题
				price:'158.00', // 价格
				Oldprice:'350.00', // 原价
				name:'天涯过客', // 推荐人
				posterFilePath：'',// 下载图片的临时路径
			}
		},
		async onLoad() {
     
			 // 获取设备信息，主要获取宽度，赋值给canvasW 也就是宽度：100%
			this.SystemInfo = await this.getSystemInfo();
			// 获取商品主图，二维码信息，APP端会返回图片的本地路径（H5端只能返回原路径）
			this.goodsImg = await this.getImageInfo('http://api.yoronglife.com//uploads/attach/2020/10/20201020/7f0ecf34d9408f7fc3b789894483ab75.jpg');