简单实现uniapp上使用canvas生成分享海报

最近做了一个壁纸和头像的小程序，收集了十万张壁纸和头像。

想到了生成海报分享朋友圈功能 于是乎利用canvas插入内容生成图片，由于是固定的模板，所以代码不多，实现十分简单，主要是要确定内容的位置，大小就搞定了；其实，要是模板不固定的，动态的，那可以封装成组件，只要判断要写入的内容的类型，参数，遍历生成既可。

1、效果图（可以扫图片里面的码体验）

2、cavans标签，设置唯一的canvas-id

<canvas style="width: 400px; height: 750px;" canvas-id="firstCanvas" id="firstCanvas"></canvas>

设置画布的大小，要是封装组件，当然也可以动态写入宽高

:style="{'width':list.width,'height':list.height}"

3、创建 canvas 绘图上下文

this.ctx = uni.createCanvasContext('firstCanvas');

4、写入海报内容

插入图片

ctx.drawImage('../../static/1.jpg', 0, 0, 400, 600);
//params：图片路径，x轴，y轴，img宽，img高

要是插入网络地址的图片，就不能直接用上面的方法，否则会空白引入失败，此时需要把网络照片缓存到本地

		uni.getImageInfo({
		          src: 'https://lsz520.xyz/public/picture/6577ac667b7d44c9a3cf4aa0d5c99d72.jpg',
		          success: function (res) {
		         	 ctx.drawImage(res.path, 0, 0, 400, 600);  
		         }
		})

插入文字

				 ctx.setFontSize(16)//设置文字大小
				  ctx.setFillStyle('#CCCCCC')//颜色
				  ctx.fillText('长按识别二维码', 10, 645)//文字内容，位置

插入线条

			  ctx.moveTo(10, 715)
				ctx.lineTo(390, 715)
			  ctx.stroke()

5、完整代码

uni.getImageInfo({
		          src: 'https://lsz520.xyz/public/picture/6577ac667b7d44c9a3cf4aa0d5c99d72.jpg',
		          success: function (res) {
					  console.log(res)
					ctx.fillStyle = '#fff';
					ctx.fillRect(0, 0, 400,740);
		          ctx.drawImage(res.path, 0, 0, 400, 600);
				  ctx.drawImage('../../static/erwm.jpg', 310, 625, 80, 80);
				  ctx.setFontSize(16)
				  ctx.setFillStyle('#909399')
				  ctx.moveTo(10, 615)
				  ctx.lineTo(390, 615)
				  ctx.setLineWidth(0.5)
				  ctx.setStrokeStyle('#CCCCCC')
				  ctx.fillText('长按识别二维码', 10, 645)
				  ctx.fillText('查看他/她分享的壁纸详情', 10, 673)
				   ctx.setFillStyle('#FFFFFF')
				  ctx.setFontSize(60)
				  ctx.fillText(_this.time, 105, 103)
				  ctx.setFontSize(22)
				  ctx.fillText(_this.now, 105, 156)
				  ctx.moveTo(10, 715)
				  ctx.lineTo(390, 715)
				  ctx.stroke()
				  ctx.draw()
				  setTimeout(()=>{
				   uni.canvasToTempFilePath({
				    canvasId: 'firstCanvas',
				    fileType: 'jpg',
				    success: function(res) {
				     uni.hideLoading()
					 _this.$refs.popup.open()
				     _this.img = res.tempFilePath
				    },
				   })
				  },100)
				  }
				  
		})

//保存图片时，h5端不能直接保存，只能通过预览长按保存
	   save() {
	    let _this = this;
	    // #ifdef H5
	    uni.previewImage({
	     urls: [_this.img]
	    })
	    // #endif
	    // #ifdef APP-PLUS||MP-WEIXIN
	    uni.saveImageToPhotosAlbum({
	     filePath: _this.img,
	     success: function() {
	      console.log('save success');
	     }
	    });
	    // #endif
	   }

值得注意的是，canvas貌似上没有可以设置内容的层级关系，所以要加入的内容要按顺序加入，排在后面写入的内容，他的层级就越高，就会叠加在上面，这里的层级关系相当于css的z-index；

纯总结文章，觉得有用的点赞收藏