mezcla dos imágenes en un canvas de JavaScript

¿Cómo se combinan dos matrices de datos de píxeles para crear una image? con la opción de usar diferentes modos de fusión?

Pixastic es un marco especial para el uso avanzado del canvas, aquí hay ejemplos de fusión: http://www.pixastic.com/lib/docs/actions/blend/

Si desea hacer esto solo, puede extraer datos de píxeles de 2 imágenes, combinarlos con una ecuación matemática y colocarlos en un canvas. Aquí hay información sobre cómo get y poner datos de píxeles desde / a canvas: http://ajaxian.com/archives/canvas-image-data-optimization-tip


Actualización: ejemplo simple con mezcla alfa de 2 imágenes en proporción 50-50. (Imágenes tomadas de http://img.javascriptes.com/graphics/Butterfly.jpg y http://img.javascriptes.com/graphics/Flower.jpg )

<img src="Butterfly.jpg" id="img1"> <img src="Flower.jpg" id="img2"> <p>Blended image<br><canvas id="canvas"></canvas></p> <script> window.onload = function () { var img1 = document.getElementById('img1'); var img2 = document.getElementById('img2'); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var width = img1.width; var height = img1.height; canvas.width = width; canvas.height = height; var pixels = 4 * width * height; context.drawImage(img1, 0, 0); var image1 = context.getImageData(0, 0, width, height); var imageData1 = image1.data; context.drawImage(img2, 0, 0); var image2 = context.getImageData(0, 0, width, height); var imageData2 = image2.data; while (pixels--) { imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5; } image1.data = imageData1; context.putImageData(image1, 0, 0); }; </script> 

Creé una biblioteca separada, liviana y de código abierto para realizar modos de fusión estilo Photoshop de un context HTML Canvas a otro: context-blender . Aquí está el uso de muestra:

 // Might be an 'offscreen' canvas var over = someCanvas.getContext('2d'); var under = anotherCanvas.getContext('2d'); over.blendOnto( under, 'screen', {destX:30,destY:15} ); 

Vea el file README para más información.

Tengo la tarea de volver a crear este applet de Java con JavaScript (debe ser compatible con las tabletas y funcionar en todos los browseres modernos> IE8). Estoy creando imágenes usando: var image1 = new Image(); y luego estableciendo source: img.src = "some path";

Entonces, desde pepkin88 veo que la siguiente function combinará dos imágenes combinando sus datos de matriz de píxeles, anulando los datos previos de la primera image con los nuevos datos combinados, y finalmente colocando los nuevos datos en el canvas dando como resultado una image combinada:

 window.onload = function () { var img1 = document.getElementById('img1'); var img2 = document.getElementById('img2'); var canvas = document.getElementById("canvas"); var context = canvas.getContext("2d"); var width = img1.width; var height = img1.height; canvas.width = width; canvas.height = height; var pixels = 4 * width * height; context.drawImage(img1, 0, 0); var image1 = context.getImageData(0, 0, width, height); var imageData1 = image1.data; context.drawImage(img2, 0, 0); var image2 = context.getImageData(0, 0, width, height); var imageData2 = image2.data; while (pixels--) { imageData1[pixels] = imageData1[pixels] * 0.5 + imageData2[pixels] * 0.5; } image1.data = imageData1; context.putImageData(image1, 0, 0); }; 

SIN EMBARGO, si vio el applet java que soy responsable de la recreación, verá que la fusión ocurre continuamente en time real a medida que arrastra la image con el puntero las imágenes se mezclan constantemente en function de las regiones superpuestas.

SO, estoy buscando modificar el código para dar count de esto, y continuamente tengo las posiciones x, y, de las imágenes dibujadas (basadas en la esquina superior izquierda), y la w, h de todas las imágenes permanece estática:

los siguientes fragments no incluyen todo lo que estoy haciendo, solo lo que percibo es importante que lo sepa

 //Rectangle Class from Java converted to JS function Rectangle(x, y, width, height, src) { this.x = x; this.y = y; this.w = width; this.h = height; this.img = new Image(); this.img.src = src; } //Stores instance in rect array rect[0] = new Rectangle(1, (height - 111)/2, 150, 105, "images/mMain.png"); //Draw method that's called Rectangle.prototype.draw = function(ctx) { //this.checkBound(); ctx.drawImage(this.img, this.x, this.y, this.w, this.h); prepareMix(this.img, this.x, this.y, this.w, this.h); } 

Entonces, estoy trabajando en una function prepareMix que recibe información de la image y la usa para get y almacenar datos de image:

  function prepareMix(src, x, y, w, h) { pixels = 4 * w * h; var image = mtx.getImageData(x, y, w, h); var imgData = image.data; } 

Hizo una list de qué hacer:

  1. Sentir la superposition
  2. Obtener y almacenar los datos de image superpuestos
  3. Mezcle las matrices de datos de la región superpuestas
  4. Reemplace los datos de image superpuestos con los datos combinados
  5. Pon los nuevos datos en el canvas

1. Sentir la superposition:

Planificar: almacena las posiciones de las imágenes y compara los datos de las posiciones para saber si se está produciendo o no superposition. SI la superposition es VERDADERA, ¿para qué dos imágenes es verdadera? Distinguir estas imágenes que se superponen de otras imágenes para que se puedan invocar methods sobre ellas.

js, css, html e imágenes en zip aquí CAJA