Anwendung Bild Filter zu Leinwand Bild-Daten oder JavaScript

Ich bin Flash-Entwickler und arbeite ich auf ein JavaScript-port von einem Spiel. In der Flash-version, ich benutze glühen, blur und color-matrix-Filter zu manipulieren, um den Schein der display-Objekte. Ich möchte das gleiche zu tun mit meinem JavaScript-Ansicht. Einige von diesen sind Verzierungen, während andere werden verwendet, um gezielt produzieren das gewünschte Ergebnis erzielt wird. Weil dieses Projekt die Ziele sind das erstellen eines genauen port, Frage ich mich, welche Möglichkeiten ich habe, um Filter anwenden, um raw canvas Daten, die inline-SVG-tags oder gerade nach oben von DOM-Elementen.

Habe ich mir überlegt Pixastic, aber mein Kollege besteht auf einer GPL-Lizenz für die Zeit, was bedeutet, dass alle tech ich muss GPL kompatibel. Pixastic verwendet die Mozilla Public Lizenz, so kann ich es nicht verwenden. (Das ist eine riesige Enttäuschung, lassen Sie mich Ihnen sagen.)

Ich sage es noch einmal knapp: wie kann ich effektiv anzuwenden, pixel Filter, um DOM-Elemente, Leinwand, Bild, Daten-oder SVG-tags mit JavaScript?

  • Haben Sie gebeten, den Autor zu ändern, die Lizenz-oder dual-Lizenz Pixastic? Ich Frage mich, ob er hat einen besonderen Grund für die Verwendung von MPL statt BSD oder eine andere beliebte alternative...
InformationsquelleAutor Rezmason | 2011-01-10
  1. 5

    Hier ist ein Beispiel, in dem ein paar svg Filter:

    und die entsprechende Leinwand-version:

    Hier sind einige js-Bibliotheken für die Leinwand zu tun, was ich denke, du suchst:

    Einer Reihe von svg-filter-Beispiele finden Sie auf http://svg-wow.org (CC0-Lizenz).

    • Hier ist eine nette stackblur demo, quasimondo.com/StackBlurForCanvas/StackBlurDemo.html .
    • Quasimondo ist der Mensch, ist er nicht? Ich denke, ich werde zu verwenden, dass StackBlur, wenn mein GPL-happy Freund hat keinen Grund sehen, für mich nicht. BitmapData.js sieht sehr effizient für einige andere Operationen, obwohl ich nicht sicher wissen, bis ich es versuchen.
    InformationsquelleAutor Erik Dahlström
  2. 3

    Habe ich eine Bibliothek (Kontext-blender) für die Durchführung Photoshop-Stil-blend-Effekte zwischen HTML-Leinwände. Dies ist nicht genau das, was Sie brauchen, wie Sie möchten, dass einige convolution-Filter auf den Pixeln anderer als das original, aber die code-Pfad der gleiche sein wird: getImageData(), munge die Daten putImageData.

    Meiner Bibliothek passiert, MIT-Lizenz, so fühlen sich frei, um zu untersuchen, gibt es keine Angst vor Fragen.

    InformationsquelleAutor Phrogz
  3. 1

    Filter.js Bibliothek für die Bildverarbeitung (darunter viele AS3 filter-Typen, wie Faltung, colormatrix, displacement map usw.)

    https://github.com/foo123/FILTER.js

    PS ich bin der Autor

    InformationsquelleAutor Nikos M.
  4. 1

    Der beste Weg, um filter Bilder in Javascript durch ein Bildverarbeitungs-framework. Eine Reine Javascript-Optionen:

    Im Fall von MarvinJ, verwenden Sie den folgenden code um das Bild zu laden:

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

    Verwende ich die folgenden input-Bild zu zeigen, einige Filter:

    Anwendung Bild Filter zu Leinwand Bild-Daten oder JavaScript

    Graustufen:

     Marvin.grayScale(image, imageOut);

    Anwendung Bild Filter zu Leinwand Bild-Daten oder JavaScript

    Schwarz und Weiß:

    Marvin.blackAndWhite(image, imageOut, 10);

    Anwendung Bild Filter zu Leinwand Bild-Daten oder JavaScript

    Sepia:

    Marvin.sepia(image, imageOut, 40);

    Anwendung Bild Filter zu Leinwand Bild-Daten oder JavaScript

    Prägen:

    Marvin.emboss(image, imageOut);

    Anwendung Bild Filter zu Leinwand Bild-Daten oder JavaScript

    Edge Detection:

    Marvin.prewitt(image, imageOut);

    Anwendung Bild Filter zu Leinwand Bild-Daten oder JavaScript

    Blur:

    Marvin.gaussianBlur(image, imageOut, 3);

    Anwendung Bild Filter zu Leinwand Bild-Daten oder JavaScript

    Helligkeit und Kontrast:

    Marvin.brightnessAndContrast(image, imageOut, 70, 60);

    Anwendung Bild Filter zu Leinwand Bild-Daten oder JavaScript

    Farbe Kanal:

    Marvin.colorChannel(image, imageOut, 0, 0, 110);

    Anwendung Bild Filter zu Leinwand Bild-Daten oder JavaScript

    Lauffähigen Beispiel aus dem vorherigen Filter:

    JS:

    var canvas1 = document.getElementById("canvas1");
var image = new MarvinImage();
image.load("https://i.imgur.com/By6tvip.jpg", imageLoaded);

function imageLoaded(){
	var imageOut = new MarvinImage(image.getWidth(), image.getHeight());
  
	//GrayScale
	Marvin.grayScale(image, imageOut);
	imageOut.draw(canvas1);
	
	//Black and White
	Marvin.blackAndWhite(image, imageOut, 10);
	imageOut.draw(canvas2);
	
	//Sepia
	Marvin.sepia(image, imageOut, 40);
	imageOut.draw(canvas3);
	
	//Emboss
	Marvin.emboss(image, imageOut);
	imageOut.draw(canvas4);
  
	//Edge
	imageOut.clear(0xFF000000);
	Marvin.prewitt(image, imageOut);
	imageOut.draw(canvas5);
  
	//Gaussian Blur
	Marvin.gaussianBlur(image, imageOut, 5);
	imageOut.draw(canvas6);
  
	//Brightness
	Marvin.brightnessAndContrast(image, imageOut, 70, 60);
	imageOut.draw(canvas7);
  
	//Color Channel
	Marvin.colorChannel(image, imageOut, 0, 0, 110);
	imageOut.draw(canvas8);
}

    HTML:

    <script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas1" width="192" height="120"></canvas>
<canvas id="canvas2" width="192" height="120"></canvas>
<canvas id="canvas3" width="192" height="120"></canvas>
<canvas id="canvas4" width="192" height="120"></canvas>
<canvas id="canvas5" width="192" height="120"></canvas>
<canvas id="canvas6" width="192" height="120"></canvas>
<canvas id="canvas7" width="192" height="120"></canvas>
<canvas id="canvas8" width="192" height="120"></canvas>

    InformationsquelleAutor Gabriel Ambrósio Archanjo
Schreibe einen Kommentar