Javascript 有哪些包可用于 node.js 进行图像裁剪?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/4541332/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 12:51:58  来源:igfitidea点击:

What packages are available for node.js to do image cropping?

javascriptnode.jsimagemagick

提问by Travis

I'm creating a website using node.js. I have seen many libraries mentioned that piggy back on top of imagemagick etc. There is a list here: https://github.com/ry/node/wiki/modules#graphics

我正在使用 node.js 创建一个网站。我见过很多图书馆提到在 imagemagick 等之上捎带。这里有一个列表:https: //github.com/ry/node/wiki/modules#graphics

What I'm trying to do is take the image that a user uploads, crop it/size it to certain dimensions the site requires. What is the best/most active script to do this? I'd like one with npm support. Does anyone have actual experience using some of these?

我想要做的是获取用户上传的图像,将其裁剪/将其调整为网站所需的特定尺寸。执行此操作的最佳/最活跃脚本是什么?我想要一个支持 npm 的。有没有人有使用其中一些的实际经验?

采纳答案by Travis

Think I found a decent imagemagick wrapper that can handle this pretty well. Even in memory before writing the file to disk. (aka user upload -> node imagemagick lib -> cdn and never touching the disk ... which is what I want)

认为我找到了一个不错的 imagemagick 包装器,可以很好地处理这个问题。即使在将文件写入磁盘之前在内存中。(又名用户上传 -> 节点 imagemagick lib -> cdn 并且从不接触磁盘......这就是我想要的)

https://github.com/rsms/node-imagemagick

https://github.com/rsms/node-imagemagick

回答by sak

For anyone who is trying to do decide between Canvas and ImageMagick, I just tried both for comparison, and I'm getting much better results from imagemagick. Here's an image that was resized and cropped from 1024x768 to 128x128:

对于任何试图在 Canvas 和 ImageMagick 之间做出决定的人,我只是尝试了两者进行比较,我从 imagemagick 中得到了更好的结果。这是一张从 1024x768 调整大小并裁剪为 128x128 的图像:

http://i.imgur.com/tfeft.png

http://i.imgur.com/tfeft.png

回答by Tyler Larson

If you need to be able to draw or do effects on your images maybe you will still need canvas or ImageMagick but in terms of speed and memory usage there are a few better options.

如果您需要能够在图像上绘制或添加效果,也许您仍然需要画布或 ImageMagick,但在速度和内存使用方面,有一些更好的选择。

Here is a benchmark of a few different image libraries.

这是几个不同图像库的基准。

https://github.com/libvips/libvips/wiki/Speed-and-memory-use

https://github.com/libvips/libvips/wiki/Speed-and-memory-use

ImageMagick is slow and consumes lots of memory.

ImageMagick 速度慢且消耗大量内存。

Try Vips, which is used by the sharp library.

试试 Vips,它是由sharp 库使用的

回答by RandomEtc

I've used node-canvas from the LearnBoost folks - https://github.com/learnboost/node-canvasor npm install canvas- they are very responsive to issues and the library is well written and stable. I don't think you can create an image from memory yet but if node-imagemagick doesn't work out for you then it would be worth a try.

我使用了 LearnBoost 人员的 node-canvas - https://github.com/learnboost/node-canvas或者npm install canvas- 他们对问题非常敏感,并且该库编写良好且稳定。我认为您还不能从内存中创建图像,但是如果 node-imagemagick 对您不起作用,那么值得一试。

If you're familiar with the browser-side canvas API it should be straight forward to create an image from a file and draw it into a smaller canvas. There's an example of that here:

如果您熟悉浏览器端画布 API,则应该直接从文件创建图像并将其绘制到较小的画布中。这里有一个例子:

https://github.com/LearnBoost/node-canvas/blob/master/examples/resize.js

https://github.com/LearnBoost/node-canvas/blob/master/examples/resize.js

If you're familiar with C++ it's fairly easy to add methods to the native objects, the project built cleanly for me on Mac OS first time. The documentation for cairo, the graphics library that powers node-canvas, is quite clear too. I'd take a look at the load functions of the Image object to see if there's a way to load from a Node Buffer:

如果您熟悉 C++,那么向本机对象添加方法是相当容易的,这个项目是第一次在 Mac OS 上为我干净地构建的。开罗的文档,图形库,权力节点的画布,是很清楚的了。我会看一下 Image 对象的加载函数,看看是否有办法从节点缓冲区加载:

https://github.com/LearnBoost/node-canvas/blob/master/src/Image.h

https://github.com/LearnBoost/node-canvas/blob/master/src/Image.h

https://github.com/LearnBoost/node-canvas/blob/master/src/Image.cc

https://github.com/LearnBoost/node-canvas/blob/master/src/Image.cc

Good luck!

祝你好运!