Eliminar una imagen de un lienzo en HTML5

5 minutos de lectura

Eliminar una imagen de un lienzo en HTML5
Alex Ivasyuv

hay un ejemplo, que carga 2 imágenes:

    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    var img1 = new Image();
    img.src = "https://stackoverflow.com/path/to/image/img1.png";
    img.onload = function() {
      ctx.drawImage(img, 0, 0);
    };

    var img2 = new Image();
    img2.src = "/path/to/image/img2.png";
    img2.onload = function() {
      ctx.drawImage(img2, 100, 100);
    };

Necesito eliminar (reemplazar) img2 del lienzo. Cuál es el mejor manera de hacerlo?

  • ¿Qué quieres ser en el lienzo cuando se haya ido?

    – Puntiagudo

    11 ago.

  • img1 + otro en lugar de img2

    – Alex Ivasyuv

    11 ago.

  • Utilizando tela.jseliminar la segunda imagen sería tan simple como canvas.remove(img2) 🙂

    – Kangax

    14 jul.

  • Puede borrar el lienzo antes de cargar la segunda imagen de esta manera: ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);

    – Manoj De Mel

    27 sep.

Creo que tal vez no entiendes lo que es un lienzo.

Un lienzo es esencialmente una cuadrícula bidimensional de píxeles a lo largo de un eje ‘X’ y un eje ‘Y’. Utiliza la API para dibujar píxeles en ese lienzo, por lo que cuando dibuja una imagen, básicamente está dibujando los píxeles que componen esa imagen en su lienzo. La razón por la que NO existe un método que le permita simplemente eliminar una imagen es porque el lienzo no sabe que hay una imagen allí en primer lugar, solo ve píxeles.

Esto es diferente al HTML DOM (Document Object Model) donde todo es un elemento HTML, o una ‘cosa’ real con la que puede interactuar, conectar eventos de script, etc. Este no es el caso con cosas que dibuja en un lienzo. . Cuando dibuja una ‘cosa’ en un lienzo, esa cosa no se convierte en algo a lo que pueda apuntar o enganchar, son solo píxeles. Para obtener una ‘cosa’, debe representar su ‘cosa’ de alguna manera, como un objeto JavaScript, y mantener una colección de estos objetos JS en algún lugar. Así funcionan los juegos de Canvas. Esta falta de una estructura similar a DOM para Canvas hace que el renderizado sea muy rápido, pero puede ser una molestia para implementar elementos de la interfaz de usuario a los que puede conectarse e interactuar fácilmente, eliminar, etc. Para eso, es posible que desee probar SVG.

Para responder a su pregunta, simplemente pinte un rectángulo en su lienzo que cubra su imagen usando las mismas coordenadas y dimensiones X/Y que usó para su imagen original, o pruebe la solución de Pointy. ‘Cubrir’ es probablemente la terminología incorrecta, ya que en realidad está reemplazando los píxeles (no hay capas en Canvas).

  • Una buena analogía para esto: HTML DOM es como un documento de Photoshop, mientras que HTML5 Canvas es como un PNG. Los documentos de Photoshop tienen capas con las que puede interactuar, modificar y eliminar. Las imágenes PNG, por otro lado, contienen un solo archivo “plano” de píxeles. No puede “eliminar” o “modificar” elementos de un PNG. Solo puede cambiar los valores de color de cada píxel individual.

    – Jasón

    05 ago.

  • Lienzo transparente HTML5 de HTML5 Canvas Tutoriales

    – Alan Larimer

    09 oct.

No está claro qué desea que muestre el lienzo cuando la imagen desaparezca. Si desea que sea transparente, puede obtener los datos de la imagen y llenarlos con píxeles transparentes:

var img = ctx.createImageData(w, h);
for (var i = img.data.length; --i >= 0; )
  img.data[i] = 0;
ctx.putImageData(img, 100, 100);

donde “w” y “h” serían el ancho y el alto de su imagen original.

editar – si solo quieres otra imagen allí, ¿por qué no simplemente poner una allí? Sobrescribirá los píxeles que haya en el lienzo.

  • si lo hice bien, no hay forma de decir “eliminar ese objeto img del lienzo”. Deberías reescribirlo, ¿verdad?

    – Alex Ivasyuv

    11 ago. 2010 a las 13:00

  • Sí, no puedes “quitar píxeles”, que yo sepa.

    – Puntiagudo

    11 ago.

Puede usar la función clearRect () para borrar el área de la imagen. En lugar de borrar todo el contexto, puede borrar solo el área de la imagen usando esto:

ctx.clearRect(xcoordinate_of_img1,ycoordinate_of_img1,xcoordinate_of_img1 + img1.width ,ycoord_of_img1 +img1.height );

  • Creo que sería más optimizado ejecutar for-loop tantas veces como el número de píxeles en la imagen.

    – usuario1484782

    29 nov.

Si lo que dijo “Sunday Ironfoot” es correcto, entonces la mejor manera de eliminar una imagen es dibujar las imágenes una vez más desde cero. Para esto, necesita tener una matriz de imágenes y dibujar solo las que usa. Por ejemplo,

function EmptyClass{};
var img=new Array();
img[0]=new EmptyClass;
img[0].i=new Image();
img[0].src="https://stackoverflow.com/questions/3458244/yourfile1.jpg";
img[0].enabled=true;

img[1]=new EmptyClass;
img[1].i=new Image();
img[1].src="yourfile2.jpg";
img[1].enabled=false;// <-------- not enabled, should not be drawn equivalent to removing


img[2]=new EmptyClass;
img[2].i=new Image();
img[2].src="yourfile3.jpg";
img[2].enabled=true;

for(var i=0;i<3;i++){
if(img[i].enabled)ctx.drawImage(img[i], 100, 100);
}

PD: estoy creando un motor para el lienzo de javascript. Lo publicare dentro de una semana

Paz

Eliminar una imagen de un lienzo en HTML5
Un solo paso a paso

A diferencia de dibujar cosas usted mismo, si ‘reemplaza’ LA imagen en un lienzo, la anterior todavía está allí.

Canvas c2;
...
        if (null != Image2) {
            var ctx = c2.getContext("2d");
            ctx.clearRect(0, 0, c2.width, c2.height);
        }

Eliminar una imagen de un lienzo en HTML5
David Liljegren

Puede borrar una imagen dibujando la misma imagen nuevamente, usando un operación compuesta global

ctx.globalCompositeOperation ="xor"
ctx.drawImage(img2, 100, 100);

Ver https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/globalCompositeOperation

1641753764 2 Eliminar una imagen de un lienzo en HTML5
infocidio

¿Puedes superponer objetos de lienzo (supongo que debería intentarlo antes de preguntar, puedes -1 uno por ser perezoso)? Supongo que estaría interesado en tener un elemento de lienzo como fondo, y luego otro para una capa de objetos que aparecen y desaparecen de la vista. Podría ser un poco más eficiente que tener que volver a dibujar cada imagen si una se elimina o se mueve. Jugaré a ver qué encuentro.

.

¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad