基于egg.js生成圣诞帽
2025-11-09 10:37:51
egg,canvas生成圣诞帽
2682
首先我们需要一个egg.js框架,前提是安装了node
$ mkdir egg-example && cd egg-example $ npm init egg --type=simple $ npm i
如果有cnpm 更佳
$ mkdir egg-example && cd egg-example $ cnpm init egg --type=simple $ cnpm i
安装一个canvas模块
cnpm i -S canvas 启动项目,查看http://127.0.0.1:7001/是否可以正常访问 npm run dev
然后找一个半透明的圣诞帽子放在根目录,命名为logo.png 把app\controller\home.js路径下的文件全部替换
'use strict';
const Controller = require('egg').Controller;
const { createCanvas, loadImage, Image } = require('canvas');
class HomeController extends Controller {
async index() {
const { ctx } = this;
//获取参数,最好改为post
let { base64, width = 128, height = 128 } = ctx.query;
//提示
if (!base64) {
ctx.body = {
success:false,
data:null,
meg:`base64缺一不可!`
};
return;
}
let res = await getData({base64,width, height});
if (res.success) {
ctx.body = res.data
} else {
ctx.body = res;
}
}
}
function getData({
base64,
width,
height
}) {
return new Promise((resolve, reject) => {
const canvas = createCanvas(width, height)
const context = canvas.getContext('2d')
const img = new Image();
img.onload = () => context.drawImage(img, 0, 0, width, height);
img.onerror = err => {
reject({
success: false,
data: err,
msg:'头像加载出错'
})
}
img.src = base64;
loadImage('./logo.png').then(image => {
context.drawImage(image, 0, 0, 90, 90);
canvas.toDataURL('image/png', (err, png) => {
if (err) {
reject({
success: false,
data: err,
msg:'圣诞帽没有带上'
});
} else {
resolve({
success: true,
data: png,
msg:'圣诞帽成功'
})
}
})
})
})
}
module.exports = HomeController;
现在把base64的头像作为url参数就可以得到戴帽子的base64了
http://127.0.0.1:7001/?base64=data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
今天,你学废了么
