問題描述

最進公司在做的小程序师抄，但是小程序分享只能是圖片，不能自定義樣式 但是我們還有個需求冤狡，就是分享出去的 必須要讓人直觀的看出求職者的 基本信息,功夫不負有心人肋坚，最后給解決了！

直接上代碼

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位 多余后 三個點顯示      沒有公司 顯示所畢業(yè)院校
 * 薪資             沒有薪資 顯示 所學專業(yè)
 */

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)
});