node操作文字生成图片

这次给大家带来node操作文字生成图片,node操作文字生成图片的注意事项有哪些,下面就是实战案例,一起来看一下。

解决思路

文字转svg -> svg转png -> 合并图片

相关轮子

images Node.js 轻量级跨平台图像编解码库,不需要额外安装依赖

text-to-svg 文字转svg

svg2png svg转png图片

示例代码

'use strict';const fs = require('fs');const images = require('images');const TextToSVG = require('text-to-svg');const svg2png = require("svg2png");const Promise = require('bluebird');Promise.promisifyAll(fs);const textToSVG = TextToSVG.loadSync('fonts/文泉驿微米黑.ttf');const sourceImg = images('./i/webwxgetmsgimg.jpg');const sWidth = sourceImg.width();const sHeight = sourceImg.height();const svg1 = textToSVG.getSVG('魏长青-人人讲App', { x: 0, y: 0, fontSize: 24, anchor: 'top',});const svg2 = textToSVG.getSVG('邀请您参加', { x: 0, y: 0, fontSize: 16, anchor: 'top',});const svg3 = textToSVG.getSVG('人人讲课程', { x: 0, y: 0, fontSize: 32, anchor: 'top',});Promise.coroutine(function* generateInvitationCard() { const targetImg1Path = './i/1.png'; const targetImg2Path = './i/2.png'; const targetImg3Path = './i/3.png'; const targetImg4Path = './i/qrcode.jpg'; const [buffer1, buffer2, buffer3] = yield Promise.all([  svg2png(svg1),  svg2png(svg2), svg2png(svg3), ]); 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 = 240; const target3Img = images(targetImg3Path); const t3Width = target3Img.width(); const t3Height = target3Img.height(); const offsetX3 = (sWidth - t3Width) / 2; const offsetY3 = 270; const target4Img = images(targetImg4Path); const t4Width = target4Img.width(); const t4Height = target4Img.height(); const offsetX4 = (sWidth - t4Width) / 2; const offsetY4 = 400; images(sourceImg) .draw(target1Img, offsetX1, offsetY1) .draw(target2Img, offsetX2, offsetY2) .draw(target3Img, offsetX3, offsetY3) .draw(target4Img, offsetX4, offsetY4) .save('./i/card.png', { quality : 90 });})().catch(e => console.error(e));

登录后复制

注意事项

text-to-svg需要中文字体的支持,不然中文会乱码

在我的破电脑上执行一次只花了500多毫秒,感觉足够了,分享出来希望能给大家一个参照                                   

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

JS的正则表达式应用

JS中typeof和类型判断(附代码)

JS怎样检测浏览器内的脚本

以上就是node操作文字生成图片的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2771777.html

(0)
上一篇 2025年3月8日 13:04:07
下一篇 2025年3月8日 13:04:32

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 解决vue-cli的打包图片路径错误

    这次给大家带来解决vue-cli的打包图片路径错误,解决vue-cli打包图片路径错误的注意事项有哪些,下面就是实战案例,一起来看一下。 最近第一次使用vue-cli构建项目,第一次打包部署到服务器上的时候出现图片加载不出来,结合网上的方法…

    编程技术 2025年3月8日
    200
  • layer前端组件图片显示功能

    这次给大家带来,的注意事项有哪些,下面就是实战案例,一起来看一下。 实现图片显示功能:layer 1.在这里介绍一种layer前端组件 layer是一款口碑极佳的web弹层组件,她具备全方位的解决方案,致力于服务各个水平段的开发人员,您的页…

    编程技术 2025年3月8日
    200
  • 按概率生成数字

    这次给大家带来按概率生成数字,按概率生成数字的注意事项有哪些,下面就是实战案例,一起来看一下。 js按照配置的概率生成,概率规则如下:1————50% 2——&#821…

    编程技术 2025年3月8日
    200
  • JS实现图片在网页中被拖拽

    这次给大家带来JS实现图片在网页中被拖拽,JS实现图片在网页中被拖拽的注意事项有哪些,下面就是实战案例,一起来看一下。 Title #pbox{ width: 100%; height:100%; } #box{ width: 200px;…

    编程技术 2025年3月8日
    200
  • JS点击循环切换播放图片

    这次给大家带来JS点击循环切换播放图片,JS点击循环切换播放图片的注意事项有哪些,下面就是实战案例,一起来看一下。 单击循环切换图片var i = 1;function nextImg(){i++;//步骤2:获取页面元素var next …

    编程技术 2025年3月8日
    200
  • vue实现点击图片放大功能(附代码)

    这次给大家带来vue实现点击图片放大功能(附代码),vue实现点击图片放大功能的注意事项有哪些,下面就是实战案例,一起来看一下。 1.建立子组件,来实现图片方法功能: BigImg.vue                          …

    编程技术 2025年3月8日
    200
  • js实现在移动端图片轮播

    Document html,body{ width:100%; overflow-x:hidden; } html{ font-size:100px; } .banner{ position:relative; height:3rem; o…

    编程技术 2025年3月8日
    200
  • node服务器跨域步奏详解

    这次给大家带来node服务器跨域步奏详解,node服务器跨域的注意事项有哪些,下面就是实战案例,一起来看一下。 背景 我们都知道浏览器有一个既核心也最基本的安全功能,即同源策略。同源分别是:协议,域名,端口。如果浏览器访问服务器不同源的话,…

    2025年3月8日
    200
  • vue如何利用js等比压缩图片

    这篇文章介绍的内容是关于vue如何利用js等比压缩图片,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下最近做一个旅游项目 大家都知道旅游项目图片居多     1.在项目中由于图片尺寸过大  再加上给图片设置了宽高导致图片压缩严…

    2025年3月8日 编程技术
    200
  • jQuery判断上传图片类型与大小方法详解

    这次给大家带来jQuery判断上传图片类型与大小方法详解,jQuery判断上传图片类型与大小的注意事项有哪些,下面就是实战案例,一起来看一下。 这里使用jQuery判断上传图片的类型和大小: 图片格式为:图片大小为:$(function()…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论