通过EJS模板生成图片的过程是先使用EJS生成模板内容，然后利用Puppeteer将该模板内容渲染成图片。[scode type="green" size=""]此方法仅在Win系统上使用[/scode]安装依赖npm install koa koa-router koa-views koa-static ejs puppeteer目录结构-views -template.ejs -public -images -fonts index.js代码[collapse status="false" title="template.ejs 代码"]代码中字体必须保证在非跨域状态下才可以使用 Image Generation <%= obj.date %> <%= obj.week %> 已签到<%= obj.userSignInDays%>天 <img src="<%= obj.userAvatar %>" alt=""> HI <%= obj.userName %> <%= obj.helloMsg %> 查收您的今日运势 <%= obj.fortuneMsg %> 查收您的今日人品 <%= obj.characterMsg %> --- 签到成功 --- <%= obj.signInMsg %> --- 额外奖励--- <% for (const key in obj.awardList) { %> <%= obj.awardList[key] %> <% } %> 余额: <%= obj.balance.coin %>硬币 <%= obj.balance.flower %>小花 <%= obj.balance.point %>点数 [/collapse][collapse status="false" title="index.js 代码"]大部分代码是由chatgpt生成const Koa = require('koa'); const Router = require('koa-router'); const views = require('koa-views'); const path = require('path'); const {writeFileSync} = require('fs'); const static = require('koa-static'); const app = new Koa(); const router = new Router(); // 使用koa-views中间件来配置模板引擎 app.use(views(__dirname + '/views', { extension: 'ejs', // 使用你喜欢的模板引擎，这里以ejs为例 })); const staticDir = path.join(__dirname, 'public'); app.use(static(staticDir)); router.get('/generate-image', async (ctx) => { // 获取请求参数 const today = new Date(); const month = today.getMonth() + 1; // 月份是从 0 开始计数的，因此需要加 1 const day = today.getDate(); let week=today.toLocaleDateString("zh",{weekday:'long'}); let obj = { date: `${month}/${day}`, week: '周'+week.charAt(week.length - 1), userSignInDays: 30, userAvatar:"http://localhost:3000/images/1.jpg", userName:"TongHui", helloMsg:"早上好，今天心情如何？", fortuneMsg:"宜 出门 忌 躺平", characterMsg:"[53] 运气一般般呢", signInMsg:"+3 硬币（每日签到）", awardList:[ "+1 小花 (每月首次签到)", "+10 硬币 (每月首次签到)", "+8 硬币 (每周首次签到)", "+6 硬币 (连续签到)" ], balance:{ coin:300, flower:1, point:0 } } // 渲染HTML模板，并将参数传递给模板 await ctx.render('template', {obj}); // 使用puppeteer导出HTML为图片 const puppeteer = require('puppeteer'); const browser = await puppeteer.launch(); const page = await browser.newPage(); // 设置页面为透明背景 await page.setViewport({width: 2020, height: 1000, deviceScaleFactor: 0.8}); await page.evaluate(() => { document.body.style.background = 'transparent'; }); // 替换成你的HTML内容 const htmlContent = await ctx.render('template', {obj}); await page.setContent(htmlContent); const screenshotBuffer = await page.screenshot({ clip: {x: 0, y: 0, width: 2020, height: 1000}, omitBackground: true }); // 生成图片名字 const filename = `${Date.now()}_image.png`; // 图片路径 const filePath = `./public/images/${filename}`; // 生成图片 writeFileSync(filePath, screenshotBuffer); // 关闭浏览器 await browser.close(); // 返回地址 ctx.body = {imagePath: `/images/${filename}`}; }); // 将路由应用到Koa实例 app.use(router.routes()); // 启动服务器 const PORT = 3000; app.listen(PORT, () => { console.log(`Server running on http://localhost:${PORT}`); });[/collapse]获取Apihttp://127.0.0.1:3000/generate-image返回{ "imagePath": "/images/1711952806672_image.png" }获取图片http://127.0.0.1:3000/images/1711952806672_image.png效果图
Div to Image with Width Hello, Div to Image! This is a simple example. Convert to Image
背景: 在看主播冬灰条直播时发现他做了一个很有趣的东西<语音实时转文字>,看他直播时发现使用typescript写的,后来发现webApi中存在这个api,然后....[scode type="green" size=""]前提: 有vue3和TypeScript基础[/scode]环境: node技术栈: TypeScript,VUE(全家桶)使用的组件是vueuse的useSpeechRecognition模块无环境安装过程建议百度教学视频注意事项建议使用Edge浏览器 因为使用谷歌浏览器需要科学手段(其他浏览器没试过),还有就是使用Edge浏览器会有标点符号美化如果项目一直运行且长时间没有说话或语音输入,建议使用监听器监听状态,只要检测语音状态关闭立即重新启动语音输入项目可以会存在文字卡顿现象