node图片合成

node图片合成最近在工作上有一个需求是在server(node.js),将几张图片和文字合成。 经过google一番,尝试了3个库: node-images: 国人开发的一个轻量级,不需要额外安装依赖的图片处理库。可以实现图片大小,合并等功能。本打算使用它来完成需求。不过已经近一年不维护了。…

最近在工作上有一个需求是在server(node.js),将几张图片和文字合成。

经过google一番,尝试了3个库:

  • node-images: 国人开发的一个轻量级,不需要额外安装依赖的图片处理库。可以实现图片大小,合并等功能。本打算使用它来完成需求。不过已经近一年不维护了。node 8.x版本跑步起来。看了一下issue,发现各个平台、系统的兼容性堪忧。还是不去踩这个坑了。另外其也不支持文字写入。

  • node-canvas:功能很强大,搜到不少Demo,没有做深入调研。应该是可以实现需求。

  • 终于到了重点:gm。nodeJs对GraphicsMagick和ImageMagick的封装。图片处理的老牌工具,包含各种各样的功能。由于两个工具本身都不是js实现,所以需要额外安装。这里就主要说说gm。

install:

在安装gm之前,我们需要安装GraphicsMagick和ImageMagick
mac这里:

brew install imagemagick
brew install graphicsmagick

linux的话,拿apt-get安装就ok。

这两个安装完毕之后。在工程目录:

npm i gm --save

就ok

usage:

我们现在想把图一(test.jpg)(600*600)的右下角添加图二(1.jpg)(140*140),使其合成一张图。
node图片合成
node图片合成
这里 我们使用gm的draw方法。

const gm = require('gm')
gm('./test.jpg')
  .draw('image Over 460, 460, 140, 140 "./1.jpg"')
  .write(`./output/${Date.now()}.jpg`, function(err) {
    if (!err) {
      console.log('done')
    }else {
      console.log(err.message || "出错了!");
    }
  })

跑一下程序,output目录下就多出来一张合成的照片咯。当然gm还有很多种合成照片的方式:
compose/mosaic/append(api文档说的很细致这里就不展开了)

node图片合成

gm的APi文档地址是:gm api文档

图片和图片合成很简单之后我们还想添加一段文字,查阅api我们发现有这个方法:drawText

.drawText(x, y, text [, gravity])

如果没有gravity参数,那么就将text绘制到图片中的(x,y)坐标处。
如果带有gravity参数,从(x,y)坐标开始到右下角构成的图片范围内,依据gravity含义绘制文字。

gravity的选项如下:

NorthWest, North, NorthEast, West, Center, East, SouthWest, South, or SouthEast

gm('./test.jpg')
  .draw('image Over 460, 460, 140, 140 "./1.jpg"')
  .drawText(100, 100, 'wa~~~')
  .write(`./output/${Date.now()}.jpg`, function(err) {
    if (!err) {
      console.log('done')
    }else {
      console.log(err.message || "出错了!");
    }
  })

上述代码,我们想要在图片 左上为(0,0)。(100,100)的位置添加wa~
跑一下这是报了一个错:

Error: unable to read font `/usr/local/share/ghostscript/fonts/n019003l.pfb' @ error/annotate.c/RenderFreetype/1123: `(null)'

这是因为我们没有装ghostscript(一套建基于Adobe、PostScript及可移植文档格式(PDF)的页面描述语言等而编译成的免费软件。)

brew install ghostscript

安装好了在执行就ok了。
顺势我们再试试中文。

.drawText(100, 100, '哇~~~')

乱码了。google一下发现gm、GraphicsMagick的使用中,中文乱码问题屡见不鲜。
解决方案总结起来就是1)utf-8编码;2)要指定中文字体库

这里我们下载了微软雅黑的ttf文件,放在根目录的font文件夹下.我们再添加一些字体属性:

gm('./test.jpg')
  .draw('image Over 460, 460, 140, 140 "./1.jpg"')
  .drawText(100, 100, '哇')
  .fontSize(36)
  .fill('#fff')
  .font('./font/微软雅黑.ttf')
  .write(`./output/${Date.now()}.jpg`, function(err) {
    if (!err) {console.log('done')}else{
      console.log(err.message || "出错了!");
    }
  })

这样 白的的36号字的哇就出现在了图片上。
node图片合成

今天的文章node图片合成分享到此就结束了,感谢您的阅读。

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

(0)
编程小号编程小号

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注