问题描述
最进公司在做的小程序，但是小程序分享只能是图片，不能自定义样式 但是我们还有个需求，就是分享出去的 必须要让人直观的看出求职者的 基本信息,功夫不负有心人，最后给解决了！
直接上代码
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)});复制代码