欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Nodejs下使用gm圆形裁剪并合成图片的示例

程序员文章站 2022-07-08 08:59:55
说到nodejs下的图片处理可能第一想到就是gm,gm底层可以是graphicsmagic(其实也是gm的由来),也可以是imagemagick(其实graphicsmag...

说到nodejs下的图片处理可能第一想到就是gm,gm底层可以是graphicsmagic(其实也是gm的由来),也可以是imagemagick(其实graphicsmagic本身也是从imagemagic分割而来,现在独立了)。虽然这两个工具本身都不是js实现,所以需要额外安装,不过此工具非常常见,可能已经预装在linux系统下,而且安装也很方便,所以不用因为看到是“第三方”就放弃。虽然说这两个软件都只是底层,无需关心,可笔者在实践中发现必须得用graphicsmagic,所以这里就只介绍graphicsmagics的安装与使用。

gaphicsmagic 安装

graphicsmagic 官网是:

官网和网上大多数教程都是教如何编译,可个人觉得可以直接通过软件库安装,比如

apt-get install graphicsmagic

如果要学习用命令行的方式使用graphicsmagic可以看这里://www.jb51.net/linuxjishu/120332.html

nodejs下的gm安装

gm是一个node库,所以可用npm安装

npm install gm

官方文档:

圆形剪裁原理

gm是对graphicsmagic的封装,所以理论上graphicsmagic有的功能都能通过gm以接口的形式实现。gm本身不支持圆形剪裁(至少笔者不知如何实现),同样意味着其底层也不直接支持。

gm比较常用的功能是:缩放、方形裁剪、格式转换。

所以本教程的圆形裁剪的核心是 借助svg ,通过svg构建一个圆形的图片,然后通过gm转化为png,即利用svg变换图片格式。

svg是可以实现圆形图片的裁剪的,网上查到有两种方式实现圆形裁剪

1、通过clip-path

定义一个圆形的路径,然后在图片的style中设置clip-path,也就是通过这个这样实现图片裁剪,理论上是真正意义上的“裁剪”

<svg>
  <defs>
    <clippathid="clippath">
      <circlecx="5"cy="5"r="5"/>
    </clippath>
  </defs>
  <imagestyle="clip-path: url(#clippath);"href="{{icon_img}}" rel="external nofollow" rel="external nofollow" x="0"y="0"width="10"height="10"/> 
</svg>

如果用clip-path可以看这个

可是这样的配置在浏览器上看没有丝毫问题,但是发现通过gm转化为png后,style没有任何效果,还是方形的。

2、通过circle标签

<svg>
  <defs>
    <patternpatternunits="userspaceonuse"id="raduisimage"x="0"y="0"width="10"height="10">
      <imagehref="{{icon_img}}" rel="external nofollow" rel="external nofollow" x="0"y="0"width="10"height="10"/>
    </pattern>
  </defs>
  <circlecx="5"cy="5"r="5"fill="url(#raduisimage)"></circle>
</svg>

先定义一个图案,也就是原来的图片,然后创建个圆形,并用刚刚定义的图案填充在这个圆形里面即可。

合成图片原理

懂的上述剪裁的原理,合成就变得简单了。直接把想要合成的图片以svg的方式拼凑在一起即可。虽然gm本身支持图片合成,使用compose或者mosaic (详见这个 教程 )不过感觉不如svg更加明了。

注意笔者尝试通过svg加上文字,不过发现中文字无法被识别,所以仍然只能通过gm添加,添加时需要设置字体(详见下一章代码实现)

如果要在一个大图里嵌入两张圆形的图片,则需要设置两个pattern,这时有个经验:

  1. pattern的x和y设置为0,0
  2. pattern的width和height设置的和 画布 一样
  3. image的x,y设置为其 “实际位置” ,也就是对应 circle 的 cx-r 以及 cy-r ,剪 r 是因为cx和cy指的是圆形中心,而x,y是图形的左上角位置。

代码实现

const gm = require('gm')
const fs = require('fs')
let templatesvg = "/path/to/original.svg"
let outputsvg = "/path/to/repalced.svg"
let input = "/path/to/icon.png"
let font = "/path/to/font.ttf"
let fontcolor = "white"
let fontsize = 10

fs.readfile(templatesvg,'utf-8',function(err,data){
  if (err) throw err
  var d = data.replace('{{icon_img}}',input)
  fs.writefile(outputsvg,d,function(err){
    if (err) throw err
    gm(outputsvg)
    .font(font)
    .fill(fontcolor)
    .fontsize(fontsize)
    .drawtext(textposition[0], textposition[1], text)//
    .write(output,function(err){
      if(err) cb(err)
      // next
    })
  })
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。