基于uniapp的小程序canvas生成图片系列操作

只是部分代码，方便自己后续快速查询

基础

1. 要有基本的canvas盒子，由于api使用的都是px，建议通过样式表隐藏基本的canvas。（这里需要生成圆形头像，额外有一个canvas专门来生成）

	<canvas class="canvasBox" canvas-id="shareCanvas"></canvas>
    <canvas class="upHeadBox" canvas-id="shareUpHead"></canvas>
     <!-- canvas的宽高根据项目需求，最好和设计统一宽高，方便后续生成 -->

2. 创建一个canvas的实例,在接下来生成图片的代码中将随时会调用，建议放在页面实例的变量中。

	data(){
		return{
			shareCanvas: uni.createCanvasContext('shareCanvas')，
	      	shareUpHead: uni.createCanvasContext('shareUpHead')
		}
	}

3. 生成背景

	// 如果背景是要用图片的话直接调用下方api即可，图片的地址一定要是本地图片，网络图片需要下载下载再调用
	this.shareCanvas.drawImage('/static/images/myInvite/poster_bg.png', 0, 0, 630, 954); // x ,y , 宽， 高  
	// 如果是纯色背景矩形的话直接用这种方法
	this.shareCanvas.setFillStyle('#FFFFFF') // 声明填充颜色
	this.shareCanvas.fillRect(0, 0, 630, 954) // 画下白色矩形

4. 生成圆角矩形

	/**
     * 绘制圆角矩形
     * @param {Object} ctx - canvas组件的绘图上下文
     * @param {Number} x - 矩形的x坐标
     * @param {Number} y - 矩形的y坐标
     * @param {Number} w - 矩形的宽度
     * @param {Number} h - 矩形的高度
     * @param {Number} r - 矩形的圆角半径
     * @param {String} [c = 'transparent'] - 矩形的填充色
     */
    roundRect(ctx, x, y, w, h, r, c = '#fff') {
      if (w < 2 * r) {
        r = w / 2;
      }
      if (h < 2 * r) {
        r = h / 2;
      }

      ctx.beginPath();
      ctx.fillStyle = c;

      ctx.arc(x + r, y + r, r, Math.PI, Math.PI * 1.5);
      ctx.moveTo(x + r, y);
      ctx.lineTo(x + w - r, y);
      ctx.lineTo(x + w, y + r);

      ctx.arc(x + w - r, y + r, r, Math.PI * 1.5, Math.PI * 2);
      ctx.lineTo(x + w, y + h - r);
      ctx.lineTo(x + w - r, y + h);

      ctx.arc(x + w - r, y + h - r, r, 0, Math.PI * 0.5);
      ctx.lineTo(x + r, y + h);
      ctx.lineTo(x, y + h - r);

      ctx.arc(x + r, y + h - r, r, Math.PI * 0.5, Math.PI);
      ctx.lineTo(x, y + r);
      ctx.lineTo(x + r, y);

      ctx.fill();
      ctx.closePath();
    },
    // 直接穿好对应参数调用即可

5. 生成圆形图片

	let imgSrc = '' // 你想要生成的原图地址
	this.shareUpHead.arc(50, 50, 50, 0, 2 * Math.PI);
	this.shareUpHead.clip();
	this.shareUpHead.drawImage(imgSrc, 0, 0, 100, 100);
	this.shareUpHead.draw();
	setTimeout(async () => {
        // canvas操作后最好延时生成图片,不然可能有问题
        let [error, res] = await uni.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 100,
          height: 100,
          destWidth: 100,
          destHeight: 100,
          canvasId: 'shareUpHead'
        });
        // 在H5平台下，tempFilePath 为 base64，小程序应该会是个临时的图片路径
        this.shareCanvas.drawImage(res.tempFilePath, 270, 262, 90, 90);
        this.setCanvasText();
      }, 400);

6. 生成文字

	this.shareCanvas.textAlign = 'center'; // 居中文字，文字的x轴处于canvas的中间点即可
	this.shareCanvas.setFillStyle('#000'); // 文字颜色	
	this.shareCanvas.font = '32px Arial'; // 文字大小和文字字体
	this.shareCanvas.fillText('文字文字', 315, 388); // 文字， x轴坐标，y轴坐标

7. 最后生成图片

	let [err, res] = await uni.canvasToTempFilePath({
	  x: 0, // 从canvas的x轴的0点开始选中
	  y: 0,// 从canvas的y轴的0点开始选中
	  width: 630, // 选中canvas多宽
	  height: 954, // 选中canvas多宽
	  destWidth: 630, // 生成的图片多宽
	  destHeight: 954, // 生成的图片多高
	  canvasId: 'shareCanvas' // canvas的id
	});
	let imgSrc = res.tempFilePath // 这个就是生成的图片路径了

暂时先写这些（太菜，肚子里没货了），如果还有什么有用（有趣也行）的生成方法欢迎大佬们帮我补充一下，感谢阅读