Pull to refresh

JavaScript обработка изображений нативными функциями

Reading time2 min
Views28K

Доброго времени суток, читатель!


Как-то понадобилась мне в проекте, работающем на node.js, обработка изображений. И чтоб скачал файлик, закинул в папку и подключил как модуль. Ан нет, таких в природе не оказалось. По этому тогда пришлось воспользоваться node-imagemagick. Но сейчас пост не о этой библиотеке.

Пост о том, что захотелось сделать такую библиотеку, которую скачал, закинул файлик в проект, подключил модуль и всё работает! Ну и сделал. Правда поддержка gif'ок не реализована, но я надеюсь на огромное сообщество, которое заинтересуется и поможет доделать библиотеку.

Назвал её по простому, imageLib.js, и на github выложил, правда под MIT.

Замеры скорости не производил, да и незачем, ясно же, что работает она медленнее всех существующих. Но ради идеи оно того стоило.

А вот и пример чтения PNG изображения и последующая вставка холста размером 200х200 пикселей с черной рамкой и прямоугольником в это изображение:

var imageLib = require('./imageLib.js');

imageLib('./images/trees.png').pngToData(function() {
	var that = this;
	
	imageLib(200, 200).create(function() {
		var x, y;
		
		for(x=20; x < 180; x++) {
			for(y=20; y < 40; y++) {
				this.setPixel(x, y, 255, 0, 0, 255); // black
			}
		}
		
		for(y=0; y < this.height; y++) {
			this.setPixel(0, y, 255, 0, 0, 255);
			this.setPixel(this.width-1, y, 255, 0, 0, 255);
		}
		
		for(x=0; x < this.width; x++) {
			this.setPixel(x, 0, 255, 0, 0, 255);
			this.setPixel(x, this.height-1, 255, 0, 0, 255);
		}
		
		this.pasteTo(that, 10, 10, true);
		
		that.toPng('./images/trees_samp.png');
	});
});


С помощью библиотеки можно читать и записывать JPEG, PNG картинки, изменять их размер. Также можно узнать цвет и альфа канал пикселя, или же его перезаписать. Ну и соответственно копирование одной картинки в другую.

Полный список функций и их примеры можно найти на странице модуля:

github.com Ссылка на GitHub.com: github.com/lampaa/imageLib

nodejs Ссылка на node.js: node.js
Tags:
Hubs:
Total votes 33: ↑28 and ↓5+23
Comments10

Articles