uin 小程序 canvas绘制海报保存图片到手机 并适应屏幕

uin 小程序 canvas绘制海报保存图片到手机 并适应屏幕

效果图保存前后

html代码

<canvas canvas-id="myCanvas" class="myCanvas" v-if='list.show==1' @click="list.show2=true"></canvas>
		<!-- 邀请函分享 list.show==1-->
<view class="invite_dolg" v-show="list.show2">
	<view class="invite_dolg_bg">
		<view @click="getImg">
			<image src="../../../static/img/main/prictur.png" mode=""></image>
			<view>保存图片</view>
		</view>
	</view>
</view>

js代码

data() {
		return {
			canvas:{}
		},
mounted(){
			this.getData()	
		},
methods:{
      // canvas生成图片
			getImg(){
				let that=this
				uni.canvasToTempFilePath({
				  x: 0,
				  y: 0,
				  width: this.canvas.width,
				  height: this.canvas.height,
				  canvasId: 'myCanvas',
				  success: function(res) {
					uni.saveImageToPhotosAlbum({
					    filePath: res.tempFilePath,
					    success: function () {
							uni.showToast({
							     title: '已保存成功'
							 });
					    }
					});
				  } 
				})
			},
			//获取标签参数
			getData(){
				let that=this
				uni.getSystemInfo({
				　　success: function(res) { // res - 各种参数
				　　    let info = uni.createSelectorQuery().select(".myCanvas");
				　　　  　info.boundingClientRect(function(data) { //data - 各种参数
				          that.canvas=data
						  that.pross( data)
				　　    }).exec()
				       }
				});
			},
			//绘制
			pross(data){
				const ctx = uni.createCanvasContext('myCanvas')
				//绘制背景色
				ctx.setFillStyle('#ffffff')
				ctx.fillRect(0,0, data.width, data.height)
				//绘制内容
				ctx.setFontSize(14)
				ctx.setTextAlign('center')
				ctx.setTextBaseline('middle')
				ctx.setFillStyle('#c2c2c2')
				ctx.fillText('- 轻备学院 -', (data.width/2), 40)
				ctx.setFillStyle('#FD5656')
				ctx.font = 'normal bold 25px sans-serif';
				ctx.fillText('轻备学院课程邀请函', (data.width/2), 75)
				ctx.font = 'normal normal 14px sans-serif';
				ctx.setFillStyle('#999999')
				ctx.fillText('你的好友正在邀请你加入轻备学院「小学', (data.width/2), 105)
				ctx.fillText('教师资格证」课程学习', (data.width/2), 125)
				//分隔线
				ctx.beginPath()
				ctx.moveTo(0,170)
				ctx.lineTo(600, 170)
				ctx.setStrokeStyle('#f6f6f6')
				ctx.stroke()
				ctx.arc(0, 170, 7, 0, 2 * Math.PI)
				ctx.arc(data.width, 170, 7, 0, 2 * Math.PI)
				ctx.setFillStyle('#FC5F2A')
				ctx.fill()
				//
				ctx.drawImage('../../../static/img/main/none.png', data.width/3, data.width/3+120, data.width/3, data.width/3)
				ctx.setFontSize(14)
				ctx.setFillStyle('#999999')
				ctx.fillText('轻备学院——用心改变学习效率', (data.width/2), (data.height-80))
				//footer#FFE8A4
				ctx.setFillStyle('#FFE8A4')
				ctx.fillRect(0, (data.height-60), data.width, 60)
				ctx.setFillStyle('#999999')
				ctx.setFontSize(20)
				ctx.fillText('微信扫码查看', (data.width/2), (data.height-30))
				ctx.draw()
			},
			
}