Ändra storlek på och konvertera bilder

Total.js 5 · total5@0.0.19 imagesthumbnailsgraphicsmagick Körd med Total.js 5

Total.js bearbetar bilder genom att anropa GraphicsMagick (gm) eller ImageMagick, som måste vara installerade på servern (brew install graphicsmagick, apt install graphicsmagick). Inställningen $imageconverter väljer programmet: gm (standard), im eller magick.

Image.load(filename) (eller en Buffer eller en ström) returnerar en kedja som registrerar operationerna och kör dem när du anropar .save(filename, callback). De användbara operationerna är resize(width, height) (behåller proportionerna inom rutan), thumbnail(width, height) (en snabb, liten förhandsvisning), miniature(width, height) (passar in bilden i rutan och fyller resten med bakgrunden), crop(width, height, x, y), rotate(degrees), grayscale(), blur(radius), quality(percentage) och output('jpg') för att konvertera formatet. Uppladdade filer gör det direkt: file.image() i en hanterare för @upload-rutter returnerar samma kedja.

Att läsa storleken kräver inte GraphicsMagick: Image.measure('png', buffer) returnerar { width, height } från de första byten av PNG-, JPG-, GIF- och WebP-data.

$.image(options) är till för en rutt som skapar en bild på begäran: ext är formatet, load(next) lämnar över källan (en ström eller en sökväg) med next(...), image(img) beskriver operationerna och cache är ett namn under vilket resultatet sparas i tmp/ för de följande förfrågningarna.

controllers/images.js

const Zlib = require('zlib');
const Fs = require('fs');

exports.install = function() {
	ROUTE('GET /resize/', resize);
	ROUTE('GET /thumb/', thumb);
};

// Builds a solid red PNG so that the example needs no file
function makepng(width, height) {

	function chunk(type, data) {
		var length = Buffer.alloc(4);
		length.writeUInt32BE(data.length);
		var body = Buffer.concat([Buffer.from(type), data]);
		var crc = Buffer.alloc(4);
		crc.writeUInt32BE(Zlib.crc32(body));
		return Buffer.concat([length, body, crc]);
	}

	var header = Buffer.alloc(13);
	header.writeUInt32BE(width, 0);
	header.writeUInt32BE(height, 4);
	header[8] = 8; // bit depth
	header[9] = 2; // RGB

	var row = Buffer.alloc(1 + width * 3);
	for (var x = 0; x < width; x++)
		row[1 + x * 3] = 255;

	var raw = Buffer.concat(Array(height).fill(row));

	return Buffer.concat([
		Buffer.from([137, 80, 78, 71, 13, 10, 26, 10]),
		chunk('IHDR', header),
		chunk('IDAT', Zlib.deflateSync(raw)),
		chunk('IEND', Buffer.alloc(0))
	]);
}

function source() {
	var filename = PATH.tmp('source.png');
	Fs.writeFileSync(filename, makepng(200, 100));
	return filename;
}

function resize($) {

	var target = PATH.tmp('small.jpg');

	Image.load(source()).resize(50, 50).output('jpg').save(target, function(err) {

		if (err) {
			$.invalid(err);
			return;
		}

		var size = Image.measure('jpg', Fs.readFileSync(target));
		$.json({ width: size.width, height: size.height, original: Image.measure('png', Fs.readFileSync(source())) });
	});
}

function thumb($) {
	$.image({
		ext: 'png',
		cache: 'thumb-example',
		load: function(next) {
			next(Fs.createReadStream(source()));
		},
		image: function(img) {
			img.resize(40, 40);
		}
	});
}