javascript - mano - fillrect canvas
Cómo verificar si algo se dibuja en un lienzo (5)
Aquí hay algunos consejos 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'' );
¿Cómo puedo verificar si hay datos o algo dibujado en un lienzo?
Tengo este elemento <canvas id="my-canvas"></canvas> y quiero verificar si mi lienzo tiene algo dibujado.
En lugar de verificar cada pixel individual, puede ser mucho más eficiente simplemente grabar cada vez que el lienzo se llena o acaricia.
Una vez que se ha llenado o ha sufrido un derrame cerebral, entonces sabes que se ha dibujado algo.
Por supuesto, ''cómo'' es muy específico de la aplicación, ya que no sabemos cómo se dibuja su lienzo en primer lugar.
No he visto este tipo de pregunta en hasta ahora ... pero una interesante para responder ...
La única forma (creo) es verificar a través de píxel por píxel, es decir, verificar la R, G, B, A de cada píxel,
si esos valores son iguales a cero, entonces podemos decir que el píxel está vacío ...
Esta es la técnica que utilicé para escribir el siguiente fragmento de código. Solo revisalo
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'');
}
}
Pruébelo aquí
Para obtener los píxeles del lienzo, debe usar getImageData (); método -> referencia getImageData ()
Y para verificar si todos los píxeles de su imageData están en 0 o 255.
Su ImageData tendrá 4 celdas por pixeles, rgba y podrá acceder a cada píxel incrementando su recuento en 4 y buscando cada 4 números siguientes para guardar su valor de rgba.
También puede obtener DataURL de una imagen vacía y comparar el DataURL de su lienzo para ver si está vacío;)
Una buena forma que he encontrado es usar la función toDataURL() y compararla con otro lienzo en blanco. Si son diferentes, que el que está comparando tiene algo en él. Algo como esto:
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!'');
});
Aquí hay un fiddle
No me puedo atribuir el mérito de esto, me encontré con él y solucionó mi problema. Tal vez esto ayudará a alguien en algún momento.