干饭人表情包使用nodejs实现

很流行的一款表情包效果举牌人，这次也用nodejs实现一把。需要的插件

text-to-svg 把文字转换为svg

text-to-svggithub.com

const TextToSVG = require("text-to-svg"); const textToSVG = TextToSVG.loadSync("./fonts/msyh.ttf"); // 加载字体文件 const svg1 = textToSVG.getSVG('这是一段文字', {  x: 0,  y: 0,  fontSize: 20,  anchor: "top", }); // 把文字转换为svg

svg2png 把svg转换为png图片

domenic/svg2pnggithub.com

const fs = require('fs'); const svg2png = require("svg2png"); // 把svg保存成图片 svg2png(Buffer.from(svg1), {}).then(buffer=>fs.writeFile("./dest.png", buffer));

images 此插件的作用主要是对图片进行拼接组合

zhangyuanwei/node-imagesgithub.com

var images = require("images");  images("input.jpg")                     //Load image from file   //加载图像文件   .size(400)                          //Geometric scaling the image to 400 pixels width  //等比缩放图像到400像素宽     .draw(images("logo.png"), 10, 10)   //Drawn logo at coordinates (10,10)  //在(10,10)处绘制Logo     .save("output.jpg", {               //Save the image to a file, with the quality of 50  quality : 50 //保存图片到文件,图片质量为50     });

通过以上三个插件的结合就可以实现效果。

安装

npm init -y npm i text-to-svg svg2png images express # 安装插件，安装express的目的是做一个web页面作为入口进行展示

实现

目录结构如下

fonts images public utils app.js

utils/tools.js

const images = require("images"); const TextToSVG = require("text-to-svg"); const svg2png = require("svg2png"); const textToSVG = TextToSVG.loadSync("./fonts/msyh.ttf");  /**  * 根据文字生成图片  * @param txt   需要生成的文字  * @param cb    生成之后的回调函数  */ function initImg(txt, cb) {   txt = txt.trim();   let w = Math.max(...txt.split("\n").map((item) => item.length)) * 80; // 计算宽度，换行分割之后取最大宽度作为图片最终的宽度   let h = txt.split("\n").length * 164; // 计算高度，换行分割后的行数*每一行的高度    // 每一个文字进行分割生成svg图片     const txtPromise = txt.split("").map((item) => {     const svg1 = textToSVG.getSVG(item, {       x: 0,       y: 0,       fontSize: 20,       anchor: "top",     });     return svg2png(Buffer.from(svg1), {});   });   // 所有生成png的Promise对象放在一个Promise.all数组中,等所有的svg都生成之后把结果一起进行绘制   Promise.all(txtPromise).then((txtImgs) => {     const result = images(w, h); // 最终绘制的结果     let xIndex = 0;     let yIndex = 0;     txtImgs.forEach((p, index) => {       if (txt.split("")[index] == "\n") {         yIndex += 1;         xIndex = 0;       } else {         result.draw(           images(             `./images/QP4a5rvW_${Math.floor(Math.random() * 40)}.png`           ).draw(images(p).rotate(35), 22, 8),           xIndex * 80,           yIndex * 164         );         xIndex += 1;       }     });     const fileName = Math.random() + ".png";     result.save(`./public/${fileName}`);     cb(fileName);   }); }  module.exports = {   initImg, };

app.js

const express = require("express"); const { initImg } = require("./utils/tools"); const app = express(); app.use(   express.urlencoded({     extended: false,   }) ); app.use(express.json()); app.use(express.static("./public"));  app.post("/api/v1/jpr", (req, res) => {   console.log(req.body);   initImg(req.body.content, (filename) => {     res.json({       code: 1,       info: "/" + filename,     });   }); });

public/index.html

<!DOCTYPE html> <html>   <head>     <meta charset="UTF-8" />     <meta name="viewport" content="width=device-width, initial-scale=1.0" />     <title>举牌人</title>     <link       rel="stylesheet"       href="https://cdn.jsdelivr.net/npm/tailwindcss@2.0.2/dist/tailwind.min.css"     />   </head>   <body class="container flex flex-col justify-center items-center">     <img src="" id="img" alt="" class="w-1/2" />     <textarea       type="text"       class="w-1/2 px-4 py-2 m-2 border border-gray-300"       placeholder="请输入举牌文字"       id="txt"     ></textarea>      <button       onclick="saveHandle()"       class="bg-red-600 text-red-100 font-bold px-4 py-2 m-2 w-1/3"     >       生成     </button>     <script>       function saveHandle() {         console.log(document.getElementById("txt").value);         fetch("/api/v1/jpr", {           method: "POST",           body: JSON.stringify({             content: document.getElementById("txt").value,           }),           headers: {             "Content-Type": "application/json",           },         })           .then((res) => res.json())           .then((data) => {             document.getElementById("img").src = data.info;           });       }     </script>   </body> </html>

运行

node app.js # 在浏览器中访问 http://localhost:3000

原文来自千锋教育，转载请注明出处。

安装

实现

运行

更多相关文章

随机推荐