web-dev-qa-db-fra.com

Comment vérifier si quelque chose est dessiné sur une toile

Comment vérifier s'il y a des données ou quelque chose qui est dessiné sur une toile?

J'ai cet élément <canvas id="my-canvas"></canvas> et je veux vérifier si quelque chose est dessiné sur ma toile.

javascripthtml5canvas
24
Marvzz

Au lieu de vérifier chaque pixel, il peut être beaucoup plus efficace de simplement enregistrer chaque fois que la toile est remplie ou effacée.

Une fois qu'un remplissage ou un trait ou s'est produit, alors vous savez que quelque chose a été dessiné.

Bien sûr, 'comment' est très spécifique à une application, car nous ne savons pas comment votre toile se dessine en premier lieu.

15
Simon Sarris

Un bon moyen que j’ai trouvé est d’utiliser la fonction toDataURL() et de la comparer à une autre toile vierge. S'ils sont différents, celui auquel vous le comparez comporte quelque chose. Quelque chose comme ça:

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

canvas.addEventListener('mousemove',function(e){
    ctx.lineTo(e.pageX,e.pageY);
    ctx.stroke();
});

document.getElementById('save').addEventListener('click',function(){
    if(canvas.toDataURL() == document.getElementById('blank').toDataURL())
        alert('It is blank');
    else
        alert('Save it!');
});

Voici un violon

Je ne peux pas en prendre le crédit, je suis tombé dessus et cela a résolu le même problème. Peut-être que cela aidera quelqu'un à un moment donné.

26
gotohales

Je n'ai pas vu ce genre de question dans Stackoverflow jusqu'à présent .. mais une question intéressante à répondre ..

Le seul moyen (je suppose) est de vérifier pixel par pixel, c’est-à-dire de vérifier le R, G, B, A de chaque pixel,
Si ces valeurs sont égales à zéro, nous pouvons dire que le pixel est vide.
C’est la technique que j’ai utilisée pour écrire l’extrait de code ci-dessous.

window.onload = function() {
  var canvas  = document.getElementById('canvas');
  if(!canvas.getContext) return;
  var ctx     = canvas.getContext('2d');
  var w       = canvas.width = canvas.height = 100;
  var drawn   = null;
  var d       = ctx.getImageData(0, 0, w, w); //image data 
  var len     = d.data.length;
  for(var i =0; i< len; i++) {
    if(!d.data[i]) {
      drawn = false;
    }else if(d.data[i]) {
      drawn = true;
      alert('Something drawn on Canvas');
      break;
    }
  }
  if(!drawn) {
    alert('Nothing drawn on canvas.. AKA, Canvas is Empty');
  }
}

Testez-le ici

10
user372551

Voici quelques conseils de Phrogz: https://stackoverflow.com/a/4649358

function eventOnDraw( ctx, eventName ){
  var fireEvent = function(){
    var evt = document.createEvent("Events");
    evt.initEvent(eventName, true, true);
    ctx.canvas.dispatchEvent( evt );
  }
  var stroke = ctx.stroke;
  ctx.stroke = function(){
    stroke.call(this);
    fireEvent();
  };
  var fillRect = ctx.fillRect;
  ctx.fillRect = function(x,y,w,h){
    fillRect.call(this,x,y,w,h);
    fireEvent();
  };
  var fill = ctx.fill;
  ctx.fill = function(){
    fill.call(this);
    fireEvent();
  };
}
...
var myContext = someCanvasElement.getContext('2d');
someCanvasElement.addEventListener( 'blargle', myHandler, false );
eventOnDraw( myContext, 'blargle' );
1
Steeve C.

Pour obtenir les pixels du canevas, vous devez utiliser la méthode getImageData (); méthode -> getImageData () reference

Et pour vérifier si tous les pixels de votre imageData sont à 0 ou 255.

Votre ImageData aura 4 cellules par pixels, et vous pourrez accéder à tous les pixels en incrémentant votre nombre de 4 et en regardant chacun des 4 nombres suivants pour avoir votre valeur rgba.

Vous pouvez également obtenir le DataURL d'une image vide et comparer le DataURL de votre toile à celui-ci pour voir s'il est vide;)

1
Pierrick Martellière

Je sais que cela pourrait être une réponse tardive, mais essayez cette solution:

Simon Sarris dit que:

Au lieu de vérifier chaque pixel, il peut être beaucoup plus efficace de simplement enregistrer chaque fois que la toile est remplie ou effacée.

Bien que cela soit plus efficace, j'ai néanmoins réussi à trouver un moyen de détecter la toile pour voir si elle est dessinée/peinte en vérifiant chaque pixel. Je me suis amusé à voir les résultats renvoyés par les données de pixels lorsque la zone de dessin est vide et peinte. J'ai découvert que lorsque le canevas est vide, toutes les données de pixels retournent 0 dans toutes les positions d'index du tableau. Donc, je l’ai utilisé pour détecter s’il y avait un 0 ou non et, comme résultat, je l’ai fait pour qu’il retourne un booléen. Si le canevas a été dessiné, il retourne true et sinon, il retourne false.

Vous pouvez le tester ici sur JSfiddle

code:

function isDrawnOn() {
            var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
            var data = imageData.data;
            var result = null;
            var counter = 0;
            var last = data.length - 1;
            for (var i = 0; i < data.length; i++) {
                if (i === last && counter !== 0 && counter === last) {
                    result = false;
                    break;
                } else if (data[i] !== 0 && data[i] > 0) {
                    result = true;
                    break;
                } else {
                    counter++;
                    continue;
                }
            }
            return result;
        }

J'espère que ça aide :)

0
Harry Smart

C’est peut-être une réponse tardive à cette question, mais j’étais un peu horrifié d’avoir besoin d’une toile supplémentaire pour comparer. Alors voici ma solution:

if (canvas.toJSON().objects.length === 0) {
    console.log('canvas is empty');
}

J'espère que cela aide, vous pouvez faire une fonction avec, mais la solution est bien plus propre que ce que j'ai vu autour.

0
albiesoft.com