javascript - graphs - jquery d3

Fusionar imagen usando Javascript

Question

¿Es posible fusionar imágenes usando javascript?

Por ejemplo, si tiene 2 archivos de imágenes rectangulares .jpg o .png del mismo tamaño, ¿es posible alinearlo uno al lado del otro y producir una copia fusionada de los dos en un nuevo archivo de imagen .jpg o .png?

Answer 1

Huỳnh Quốc Phong tiene parcialmente razón:

Puede usar Canvas para combinar imágenes. Pero pueden originarse desde otros dominios. Solo carga las imágenes en tu dom. Una vez que se cargan las imágenes (se pueden consultar con javascript, ver a continuación), puede usarlas en su lienzo.

var canvas = canvasBuild.getContext(''canvasObj'');
var img = document.getElementById(''mergePic1'');
canvas.drawImage(img, 0, 0);

Para verificar si las imágenes fueron cargadas, recomendaría usar el plugin jQuery http://desandro.github.io/imagesloaded/ - pero también se puede hacer sin él.

Answer 2

No, no puedes hacer eso.

Con un poco de magia css / html puedes hacer que appear fundido.

Si realmente los quieres combinados, sugeriría Photoshop.

O puede hacer que un código de servidor cree y combine imágenes para usted.

Answer 3

Puede usar JavaScript para ''combinarlos'' en un lienzo y convertir ese lienzo en imagen.

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var imageObj1 = new Image();
var imageObj2 = new Image();
imageObj1.src = "1.png"
imageObj1.onload = function() {
ctx.drawImage(imageObj1, 0, 0, 328, 526);
imageObj2.src = "2.png";
imageObj2.onload = function() {
ctx.drawImage(imageObj2, 15, 85, 300, 300);
var img = c.toDataURL("image/png");
document.write(''<img src="'' + img + ''" width="328" height="526"/>'');
}
};

Debido a la seguridad, sus dos imágenes deben estar en el mismo dominio con su archivo JavaScript (es decir, http://123.com/2.png , http://123.com/2.png y http://123.com/script.js ) de lo contrario la función toDataURL() levantará un error.

Answer 4

Puede usar la biblioteca de Pixastic JavaScript para combinar, filtrar y mezclar varias imágenes. http://www.pixastic.com/lib/docs/actions/blend/

Pero esto solo funciona en los navegadores modernos que admiten el elemento Canvas. Desafortunadamente IE8 no está apoyando esto.