纯JavaScript图像操作

我有一个用例，我想创建（a）Node应用程序（b）执行基本的图像操作（PNG调整大小和裁剪），但（c）我不能像本地库一样具有外部依赖性，GraphicsMagick，ImageMagick，PhantonJS，Inkscape等。纯JavaScript图像操作

这一切都必须在纯JavaScript中完成。

鉴于我想要做的操作非常简单（只是PNG调整大小和裁剪），这似乎不可能。但是，我找不到最终没有外部或本地依赖关系的裁剪/调整大小的库。

这样一个真正纯粹的JavaScript库是否存在裁剪/调整大小？如果我必须自己做这件事，那么在纯JavaScript中实现这个有多困难？我应该从哪里开始？

另外，是否有一个合适的C函数，我可以使用emscripten编译，例如？

来源

2014-09-12 Oliver Moran

https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=JavaScript%20librar y％20crop％2Fresize – 2014-09-12 20:24:44

@JamesG。所有优秀的东西，如果我可以使用无头浏览器，如Phantom JS，DOM实现，如js-dom。但是，它们都具有外部（本地）依赖关系。 – 2014-09-12 20:28:06

处理纯Javascript中的PNG *是可能的* - 对“可能”的慷慨解释。 Javascript可以用eaze操纵二进制文件;解压，然后*重新*压缩原始图像数据并不那么容易（这需要一个纯JS版本的Flate和Deflate），但仍然在“可行”的范围内。不过，我不相信它会很快。 – usr2564301 2014-09-12 20:31:05

OK，我结束了我自己的滚动，我已经发布了一个NPM包在这里：https://www.npmjs.org/package/jimp

使用例子是：

var Jimp = require("jimp"); 

var lenna = new Jimp("lenna.png", function() { 
    this.crop(100, 100, 300, 200) // crop 
     .resize(220, 220) // resize 
     .write("lenna-small-cropped.png"); // save 
});

的突破是找到一个JavaScript双三次双通道缩放算法：https://github.com/grantgalitz/JS-Image-Resizer

对Mike'Pomax'Kamermans的赞赏指出了正确的方向，并为Grant Galitz提供了一个惊人的缩放算法。

来源

2014-09-13 23:07:03

谢谢你，我很惊讶，对此没有什么反馈。我不得不稍微修改它以直接与缓冲区一起工作，对于小型操作来说它绝对看起来很棒。做得好！ – 2014-09-24 22:07:34

@IgorR，谢谢。如果你有任何改进，请打开一个问题或提出拉请求：https：//github.com/oliver-moran/jimp – 2014-09-28 19:23:19

我所做的是不完整的，只适用于JPG，这是一个肮脏的执行不够好，拉，只是使它为我的目的工作。当我有一段时间会尝试完成它为PNG和改善代码，然后提出拉请求。我只是想知道，如果完全有可能没有，那么大多数人可以满足* Magick的负担。 – 2014-09-30 08:38:50

你可以尝试，为图像处理比较Node.js的模块 - 调整的https://github.com/ivanoff/images-manipulation-performance

author's results: 
    sharp.js : 9.501 img/sec; done in 10.525585 sec; 
    canvas.js : 8.246 img/sec; done in 12.12766 sec; 
    gm.js : 4.433 img/sec; done in 22.557112 sec; 
    gm-imagemagic.js : 3.654 img/sec; 
    lwip.js : 1.203 img/sec; 
    jimp.js : 0.445 img/sec;

来源

2016-08-11 06:48:48

我不知道为什么这是downvoted，但我发现上面的链接相当有用。 – 2018-02-25 16:37:09

例和作物使用纯JavaScript图像处理与MarvinJ：

var canvas1 = document.getElementById("canvas1"); 
 
var canvas2 = document.getElementById("canvas2"); 
 
var canvas3 = document.getElementById("canvas3"); 
 

 
image = new MarvinImage(); 
 
image.load("https://i.imgur.com/gaW8OeL.jpg", imageLoaded); 
 

 
function imageLoaded(){ 
 
    imageOut = image.clone() 
 
    image.draw(canvas1) \t 
 
    // Crop 
 
    Marvin.crop(image, imageOut, 50, 50, 100, 100); 
 
    imageOut.draw(canvas2); 
 
    // Scale 
 
    Marvin.scale(image, imageOut, 100); 
 
\t imageOut.draw(canvas3); 
 
}

<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script> 
 
<canvas id="canvas1" width="200" height="200"></canvas> 
 
<canvas id="canvas2" width="200" height="200"></canvas><br/> 
 
<canvas id="canvas3" width="200" height="200"></canvas>

来源

2017-11-16 02:27:13

纯JavaScript图像操作

回答

相关问题