node生成图片

问题描述

最进公司在做的小程序，但是小程序分享只能是图片，不能自定义样式 但是我们还有个需求，就是分享出去的 必须要让人直观的看出求职者的 基本信息,功夫不负有心人，最后给解决了！

直接上代码

const fs = require("fs");
const images = require("images");
const TextToSVG = require("text-to-svg");
const svg2png = require("svg2png");
const Promise = require("bluebird");
const path = require("path");
const imgPath = (value) => { return path.join(__dirname, value) };


Promise.promisifyAll(fs);


/**
 * 具体转化流程
 * 文字转svg -> svg转png -> 合并图片
 * 
 * 具体所需判断
 * 头像             没有头像判断 男女 显示默认头像
 * 姓名             
 * 所在公司         长度显示13位 多余后 三个点显示      没有公司 显示所毕业院校
 * 薪资             没有薪资 显示 所学专业
 */

let name = "刘雯卿";

let company = "58同城";

let maxPay = "8000元/月"


 // 引入默认背景图
const sourceImg = images(imgPath('./work/default.png'));
const sWidth = sourceImg.width();
const sHeight = sourceImg.height();


// 设置字体颜色以及基准点
const textBoldToSVG = TextToSVG.loadSync(imgPath('fonts/PINGFANG_HEAVY.TTF'));
const textToSVG = TextToSVG.loadSync(imgPath('fonts/PINGFANG_REGULAR.TTF')); 
const svg1 = textBoldToSVG.getSVG(name, {
    x: 0,                       // 文本开头的水平位置（默认值：0）
    y: 0,                       // 文本的基线的垂直位置（默认值：0）
    fontSize: 50,               // 文本的大小（默认：）72
    // letterSpacing: "",          // 设置字母的间距
    anchor: 'top',              // 坐标中的对象锚点
});
const svg2 = textToSVG.getSVG(company, {
    x: 0,
    y: 0,
    fontSize: 38,
    anchor: 'top',
});
const svg3 = textBoldToSVG.getSVG(maxPay, {
    x: 0,
    y: 0,
    fontSize: 38,
    anchor: 'top',
});


// 设置颜色
const svgOne = svg1.replace(`xmlns="http://www.w3.org/2000/svg"`, `fill="#fff" xmlns="http://www.w3.org/2000/svg"`);
const asdTwo = svg2.replace(`xmlns="http://www.w3.org/2000/svg"`, `fill="#fff" xmlns="http://www.w3.org/2000/svg"`);
const asdThree = svg3.replace(`xmlns="http://www.w3.org/2000/svg"`, `fill="#fff" xmlns="http://www.w3.org/2000/svg"`);


Promise.coroutine(function* generateInvitationCard() {
    // 定义路径
    const targetImg1Path = './work/1.png';
    const targetImg2Path = './work/2.png';
    const targetImg3Path = './work/3.png';
    const targetImg5Path = './work/man@124.png';        // 默认男女头像
    const targetImg4Path = './work/woman@124.png';      // 默认男女头像

    // 转buffer
    const [buffer1, buffer2, buffer3] = yield Promise.all([
        svg2png(svgOne),
        svg2png(asdTwo),
        svg2png(asdThree),
    ]);

    // buffer 写入图片
    yield Promise.all([
        fs.writeFileAsync(targetImg1Path, buffer1),
        fs.writeFileAsync(targetImg2Path, buffer2),
        fs.writeFileAsync(targetImg3Path, buffer3),
    ]);

    // 定位显示位置
    const target1Img = images(targetImg1Path);
    const t1Width = target1Img.width();
    const t1Height = target1Img.height();
    const offsetX1 = (sWidth - t1Width) / 2;
    const offsetY1 = 200;

    const target2Img = images(targetImg2Path);
    const t2Width = target2Img.width();
    const t2Height = target2Img.height();
    const offsetX2 = (sWidth - t2Width) / 2;
    const offsetY2 = 285;

    const target3Img = images(targetImg3Path);
    const t3Width = target3Img.width();
    const t3Height = target3Img.height();
    const offsetX3 = (sWidth - t3Width) / 2;
    const offsetY3 = 360;

    const target4Img = images(targetImg4Path);
    const t4Width = target4Img.width();
    const t4Height = target4Img.height();
    const offsetX4 = (sWidth - t4Width) / 2;
    const offsetY4 = 34;

    // 写入图片
    images(sourceImg)                               // 从文件中加载图片
        // .size(400)                               // 几何缩放图像到400像素宽度
        .draw(images(target1Img), offsetX1, offsetY1)
        .draw(images(target2Img), offsetX2, offsetY2)
        .draw(images(target3Img), offsetX3, offsetY3)
        .draw(images(target4Img), offsetX4, offsetY4)
        .save('./work/card.png', {                  // 将图像保存到一个文件中，质量为90
            quality: 90 
        });
})().catch(e => {
    console.error(e)
});