Reine JavaScript Bildbearbeitung

Ich habe einen Anwendungsfall, wo ich (a) eine Knotenanwendung erstellen möchte, die (b) grundlegende Bildmanipulationen durchführt (PNG resize und zuschneiden), aber (c) wo ich externe Abhängigkeiten wie native Bibliotheken nicht haben kann , GraphicsMagick, ImageMagick, PhantonJS, Inkscape usw.Reine JavaScript Bildbearbeitung

Alles muss in reinem JavaScript gemacht werden.

Angesichts wie einfach die Manipulation, die ich tun möchte (nur PNG Größe ändern und zuschneiden) scheint dies nicht unmöglich. Ich kann jedoch keine Zuschneide-/Größenänderungsbibliothek finden, die letztendlich keine externe oder native Abhängigkeit aufweist.

Gibt es eine wirklich reine JavaScript-Bibliothek für crop/resize? Wie schwierig wäre es, dies in reinem JavaScript zu implementieren, wenn ich es selbst machen müsste? Und wo soll ich anfangen?

Gibt es alternativ dazu eine geeignete C-Funktion, die ich zB mit emscripten übersetzen könnte?

Quelle

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 –

@JamesG. alle tollen Sachen, wenn ich einen Headless-Browser wie Phantom JS, eine DOM-Implementierung wie js-dom verwenden könnte. Sie haben jedoch alle externe (native) Abhängigkeiten. –

Umgang mit PNGs in reinem Javascript ist * möglich * - für eine großzügig breite Interpretation von "möglich". Javascript kann Binärdateien mit eaze manipulieren; das dekomprimieren und dann * re * -komprimieren der rohen Bilddaten ist nicht so einfach (das erfordert eine reine JS-Version von Flate und Deflate), aber immer noch im Bereich von "machbar". Ich glaube jedoch nicht, dass es schnell gehen wird. – usr2564301

OK, beendete ich meine eigene Aufrollen, die ich als NPM-Paket hier veröffentlicht haben: https://www.npmjs.org/package/jimp

Beispiel der Verwendung ist:

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 
});

Der Durchbruch einen JavaScript bikubisch zwei Pass Skalierung wurde zu finden, Algorithmus hier: https://github.com/grantgalitz/JS-Image-Resizer

Kudos zu Mike 'Pomax' Kamermans für das Zeigen der richtigen Richtung zu nehmen und Gralitz für einen erstaunlichen Skalierungsalgorithmus zu gewähren.

Quelle

2014-09-13 23:07:03

Vielen Dank und ich bin überrascht, dass es wenig Feedback gibt. Ich musste es ein wenig ändern, um direkt mit Puffern zu arbeiten, und es sieht definitiv gut für kleine Operationen aus. Gut gemacht! –

@IgorR, danke. Wenn Sie irgendwelche Verbesserungen haben, öffnen Sie bitte ein Problem oder machen Sie eine Pull-Anfrage: https://github.com/oliver-moran/jimp –

was ich getan habe, ist unvollständig und funktioniert nur mit jpg, es ist eine schmutzige Implementierung nicht gut genug für eine ziehen, machte es nur für meine Zwecke arbeiten. Wenn ich etwas Zeit habe, werde ich versuchen, es für png zu vervollständigen und den Code zu verbessern, und dann eine Pull-Anfrage machen. Ich frage mich nur, wie die meisten Leute mit der Last von * Magicks glücklich sein können, wenn es völlig unmöglich ist, darauf zu verzichten. –

Sie können versuchen, Node.js Module für Bilder Manipulation zu vergleichen - 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;

Quelle

2016-08-11 06:48:48

Ich weiß nicht, warum das abgelehnt wurde, aber ich fand den Link oben ziemlich nützlich. –

Beispiel für die Größe und Ernte mit MarvinJ reine Javascript Bildmanipulation mit:

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>

Quelle

2017-11-16 02:27:13

Antwort

Verwandte Themen