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

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

页面定义 canvas

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

配置 css

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

生成海报

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