uniapp canvas生成海报加入水印并下载保存

页面定义 canvas

<canvas :style="{width:canvasWidth,height:canvasHeight}" canvas-id="myCanvas" ></canvas>

配置 css

canvas{
    border:solid 1px gray;
    position:absolute;
    left:5000rpx;
}

生成海报

uni.getImageInfo({
	src:this.tempFilePaths,
	success:res=>{
		this.canvasWidth=`${res.width}px`;
		this.canvasHeight=`${res.height}px`;
		var ctx = uni.createCanvasContext('myCanvas',this);
		ctx.clearRect(0,0,res.width,res.height);
		ctx.beginPath();
            // this.tempFilePaths为图片路径
 		ctx.drawImage(this.tempFilePaths,0,0,res.width,res.height);
		// 为图片添加水印
		ctx.translate(res.width/2,res.height/2);
		ctx.rotate(45 * Math.PI / 180);
		let horizontal=res.width/4;
		let vertical=res.height/3;
		for(let i=0;i<=3;i++){