web-dev-qa-db-fra.com

Supprimer une image d'un canevas en HTML5

il y a un exemple, qui charge 2 images:

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

    var img1 = new Image();
    img.src = "/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);
    };

Je dois supprimer (remplacer) img2 de la toile. Quelle est la meilleure manière de le faire?

javascripthtml5canvas
21
Alex Ivasyuv

Il est difficile de savoir ce que vous souhaitez que la zone de travail affiche lorsque l'image est partie. Si vous voulez que ce soit transparent, vous pouvez obtenir les données d'image et les remplir avec des pixels transparents:

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

où "w" et "h" seraient la largeur et la hauteur de votre image d'origine.

edit - Si vous voulez juste une autre image, pourquoi ne pas en mettre une ici? Cela écrasera tous les pixels présents sur la toile.

14
Pointy

Je pense que vous ne comprenez peut-être pas ce qu'est une toile.

Un canevas est essentiellement une grille de pixels en 2 dimensions le long d'un axe "X" et d'un axe "Y". Vous utilisez l'API pour dessiner des pixels sur ce canevas. Ainsi, lorsque vous dessinez une image, vous dessinez essentiellement les pixels qui composent cette image sur votre canevas. La raison pour laquelle il n’ya AUCUNE méthode qui vous permet de supprimer une image, c’est que Canvas ne sait pas qu’il ya au départ une image, il ne fait que voir les pixels.

Ceci est différent du HTML DOM (Document Object Model) où tout est un élément HTML, ou une "chose" avec laquelle vous pouvez interagir, des événements de script, etc., ce n'est pas le cas des éléments que vous dessinez sur un canevas . Lorsque vous dessinez une "chose" sur un canevas, cette chose ne devient pas quelque chose que vous pouvez cibler ou accrocher, ce ne sont que des pixels. Pour obtenir une "chose", vous devez représenter votre "chose" d'une manière quelconque, par exemple un objet JavaScript, et gérer une collection de ces objets JS quelque part. Voici comment fonctionnent les jeux sur toile. Ce manque de structure de type DOM pour Canvas rend le rendu très rapide, mais peut s'avérer difficile pour la mise en œuvre d'éléments d'interface utilisateur auxquels vous pouvez facilement vous connecter, interagir, supprimer, etc. Pour cela, vous pouvez essayer SVG.

Pour répondre à votre question, peignez simplement un rectangle sur votre toile qui recouvre votre image en utilisant les mêmes coordonnées X/Y et les mêmes dimensions que vous avez utilisées pour votre image d'origine, ou essayez la solution de Pointy. Le terme «couvrir» n'est probablement pas la bonne terminologie, car vous remplacez les pixels (il n'y a pas de calques dans Canvas).

56
Sunday Ironfoot

Si ce que dit "Sunday Ironfoot" est correct, la meilleure façon de supprimer une image consiste à les rediffuser. Pour cela, vous devez disposer d’un tableau d’images et ne dessiner que celles que vous utilisez. Par exemple, 

function EmptyClass{};
var img=new Array();
img[0]=new EmptyClass;
img[0].i=new Image();
img[0].src="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);
}

P.S. Je crée un moteur pour la toile javascript. Le poster dans une semaine

Paix

2
Akshaya Shanbhogue

Vous pouvez utiliser la fonction clearRect () pour effacer la zone de l'image. Au lieu de tout effacer le contexte, vous pouvez effacer uniquement la zone de l'image en utilisant ceci:

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

Contrairement à ce que vous dessinez vous-même, si vous «remplacez» l'image sur une toile, l'ancienne est toujours là.

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

Vous pouvez effacer une image en dessinant à nouveau la même image, en utilisant un autre globalCompositeOperation. 

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

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

0
David Lilljegren

Pouvez-vous superposer des objets en toile (j'imagine que je devrais essayer avant de demander, vous pouvez -1 pour ma paresse). Je suppose que je serais intéressé par un élément de toile comme arrière-plan, puis un autre pour les objets de calque qui apparaissent et disparaissent. Pourrait être un peu plus efficace que d'avoir à redessiner chaque image si on est supprimé ou déplacé. Je vais jouer et voir ce que je peux trouver.

0
infocyde