只是部分代码,方便自己后续快速查询
基础
- 要有基本的canvas盒子,由于api使用的都是px,建议通过样式表隐藏基本的canvas。(这里需要生成圆形头像,额外有一个canvas专门来生成)
<canvas class="canvasBox" canvas-id="shareCanvas"></canvas>
<canvas class="upHeadBox" canvas-id="shareUpHead"></canvas>
<!-- canvas的宽高根据项目需求,最好和设计统一宽高,方便后续生成 -->
- 创建一个canvas的实例,在接下来生成图片的代码中将随时会调用,建议放在页面实例的变量中。
data(){
return{
shareCanvas: uni.createCanvasContext('shareCanvas'),
shareUpHead: uni.createCanvasContext('shareUpHead')
}
}
- 生成背景
// 如果背景是要用图片的话直接调用下方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) // 画下白色矩形
- 生成圆角矩形
/**
* 绘制圆角矩形
* @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();
},
// 直接穿好对应参数调用即可
- 生成圆形图片
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);
- 生成文字
this.shareCanvas.textAlign = 'center'; // 居中文字,文字的x轴处于canvas的中间点即可
this.shareCanvas.setFillStyle('#000'); // 文字颜色
this.shareCanvas.font = '32px Arial'; // 文字大小和文字字体
this.shareCanvas.fillText('文字文字', 315, 388); // 文字, x轴坐标,y轴坐标
- 最后生成图片
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 // 这个就是生成的图片路径了
暂时先写这些(太菜,肚子里没货了),如果还有什么有用(有趣也行)的生成方法欢迎大佬们帮我补充一下,感谢阅读