Suppression d'une image à partir d'une toile 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);
    };

J'ai besoin de supprimer(remplacer) img2 de la toile. Qu'est-ce que le meilleur façon de le faire?

Que voulez-vous être sur la toile quand il est parti?
img1 + une autre à la place de img2
À l'aide de fabric.js, la suppression de la deuxième image pourrait être aussi simple que de canvas.remove(img2) 🙂

InformationsquelleAutor Alex Ivasyuv | 2010-08-11

14

Il n'est pas clair ce que vous voulez de la toile lorsque l'image a disparu. Si vous voulez qu'il soit transparent, vous pouvez obtenir les données d'image et de le remplir avec les 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" serait la largeur et la hauteur de votre image d'origine.

modifier — si vous voulez juste une autre image là, pourquoi ne pas simplement mettre un là-bas? Il remplace ce que les pixels sont là sur la toile.
- si j'ai eu droit, il n'y a aucun moyen de dire "supprimer img objet à partir d'une toile". Vous devez réécrire, à droite?
- Oui, vous ne pouvez pas prendre "pixels", pour autant que je sais.
InformationsquelleAutor Pointy
56

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

Une toile est essentiellement un 2 dimensions de la grille de pixels le long d'un 'X' axe et d'un " Y " de l'axe. Vous utilisez l'API pour dessiner des pixels sur la toile, alors, quand vous dessinez une image que vous êtes fondamentalement dessiner les pixels qui composent l'image sur votre toile. La raison, il n'existe PAS de méthode qui vous permet de tout simplement supprimer une image, c'est parce que la Toile ne sais pas il y a une image il y a, en premier lieu, qu'il vient de voir les pixels.

C'est à la différence du HTML DOM (Document Object Model), où tout est un élément HTML, ou à une "chose" que vous pouvez interagir avec, le crochet-up événements de script pour etc. ce n'est pas le cas avec des trucs que vous dessinez sur une Toile. Lors de dessiner une "chose" sur une Toile de, cette chose ne devient pas quelque chose que vous pouvez cibler ou d'un crochet, il est juste pixels. Pour obtenir une "chose" vous avez besoin de représenter votre "chose", d'une certaine façon comme un objet JavaScript, et de maintenir une collection de ces objets JS quelque part. Cette comment comment Toile jeux de travail. Cette absence de DOM-comme la structure de la Toile rend rendu très rapide, mais peut être une douleur pour la mise en œuvre des éléments d'INTERFACE utilisateur que vous pouvez facilement connecter et interagir avec, supprimer etc. Pour cela, vous voudrez peut-être essayer SVG.

Pour répondre à votre question, il vous suffit de peindre un rectangle sur votre Toile qui couvre votre image en utilisant le même X/Y coords et les dimensions que vous avez utilisé pour votre image d'origine, ou essayer Pointu de la solution. "Cover-up" est probablement la mauvaise terminologie, puisque vous êtes en fait en remplaçant les pixels (il n'y a pas de couches en Toile).
- +1 bonne explication de la Toile
- Une bonne analogie pour cela: le DOM HTML, c'est comme un document Photoshop tout en HTML5 Canvas est comme un PNG. Documents Photoshop les couches de vêtements que vous pouvez interagir avec, modifier et supprimer. Images PNG, d'autre part, contenir un seul fichiers "à plat" de pixels. Vous ne pouvez pas "supprimer" ou "modifier" des éléments à partir d'un fichier PNG. Vous ne pouvez modifier que les valeurs de couleur de chaque pixel individuel.
- HTML5 Clair Toile de HTML5 Canvas Tutoriels
InformationsquelleAutor Sunday Ironfoot

Si ce "dimanche Ironfoot" a dit est vrai, alors la meilleure façon de supprimer une image est par dessiner les images une fois de plus, à partir de zéro. Pour cela, vous devez disposer d'un tableau d'images et de dessiner uniquement ceux 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 suis entrain de créer un moteur de javascript de la toile. Post-it dans une semaine

La paix

InformationsquelleAutor Akshaya Shanbhogue

2

Vous pouvez utiliser clearRect() fonction pour effacer la zone de l'image.Plutôt que de compensation de tout contexte, vous pouvez effacer uniquement la zone de l'image à l'aide de ceci:
```
ctx.clearRect(xcoordinate_of_img1,ycoordinate_of_img1,xcoordinate_of_img1 + img1.width ,ycoord_of_img1 +img1.height );
```
- Je pense qu'il serait plus optimisé pour exécuter pour la boucle autant de fois que le nombre de pixels dans l'image.
InformationsquelleAutor user1484782
1

Contrairement à dessiner les choses vous-même, si vous "remplace" 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);
        }
```
- Je vous remercie pour votre réponse. Il fonctionne comme un charme.
InformationsquelleAutor SingleStepper
0

Pouvez-vous de superposition des objets en toile (je suppose que je devrais essayer avant de demander, vous pouvez -1 un moi d'être paresseux). Je suppose que je serais intéressé à avoir une toile de l'élément de fond, puis une autre pour les objets de la couche de qui pop dans et hors de la vue. Peut-être un peu plus efficace que d'avoir à redessiner chaque image, si l'on obtient supprimé ou déplacé. Je vais jouer autour et voir ce que je peux trouver.

InformationsquelleAutor infocyde
0

Vous pouvez effacer une image par le dessin de 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

InformationsquelleAutor David Lilljegren

Vous devez vous connecter pour publier un commentaire.