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

基于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: ateCanvasContext('shareCanvas')，shareUpHead: ateCanvasContext('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);veTo(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.pFilePath, 270, 262, 90, 90);this.setCanvasText();}, 400);

6. 生成文字

	Align = '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 = pFilePath // 这个就是生成的图片路径了

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