Javascript 如何检查画布上是否绘制了某些东西
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4644524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to check if something is drawn on canvas
提问by Marvzz
How do I check if there is data or something drawn on a canvas?
如何检查画布上是否有数据或绘制的东西？
I have this <canvas id="my-canvas"></canvas>element, and I want to check if my canvas has something drawn on it.
我有这个<canvas id="my-canvas"></canvas>元素，我想检查我的画布上是否画了一些东西。
采纳答案by Simon Sarris
Instead of checking every single pixel, it may be much more efficient to merely record every time the canvas gets filled or stroked.
与其检查每个像素，不如只记录每次画布被填满或描边时的效率。
Once a fill or stroke or has happened, then you know that something has been drawn.
一旦填充或描边或已经发生，那么您就知道已经绘制了一些东西。
Of course 'how' is very application specific, since we don't know how your canvas is getting drawn on in the first place.
当然，“如何”是非常特定于应用程序的，因为我们首先不知道您的画布是如何绘制的。
回答by gotohales
A good way I have found is to use the toDataURL()function and compare it with another, blank canvas. If they are different, than the one you are comparing it to has something on it. Something like this:
我发现的一个好方法是使用该toDataURL()函数并将其与另一个空白画布进行比较。如果它们不同，那么与您比较的那个不同，上面有一些东西。像这样的东西：
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!');
});
Here is a fiddle
这是一个小提琴
I can't take credit for this, I just stumbled upon it and it fixed my same issue. Maybe this will help somebody at some point.
我不能相信这一点，我只是偶然发现了它，它解决了我同样的问题。也许这会在某个时候帮助某人。
回答by Simon Sarris
I haven't seen this kind of question in Stackoverflow till now.. but an interesting One to answer..
到目前为止，我还没有在 Stackoverflow 中看到过这种问题......但是一个有趣的回答......
The only way(I guess) is to check through pixel by pixel, i.e., check the R, G, B, Aof each pixel,
if those values are equal to zero then we can say that the pixel is empty..
This is the technique I used to write the below code snippet.. just go through it
只有这样，（我猜）是由像素通过像素检查，即检查R, G, B, A每一个像素的，
如果这些值都等于零，则我们可以说，像素是空的..
这是我以前写的技术下面的代码片段..只需通过它
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');
}
}
Test it Here
在这里测试
回答by Pierrick Martellière
To get the pixels of the canvas you have to use the getImageData(); method -> getImageData() reference
要获取画布的像素，您必须使用 getImageData(); 方法 -> getImageData() 参考
And to check if every pixels of your imageData are at 0 or 255.
并检查 imageData 的每个像素是否为 0 或 255。
Your ImageData will have 4 cells per pixels, r g b a and you cn access every pixels by incrementing your count by 4 and looking each 4 next numbers to hve your rgba value.
您的 ImageData 每像素将有 4 个单元格，rgba 并且您可以通过将计数增加 4 并查看每 4 个下一个数字来访问每个像素以获取您的 rgba 值。
You can also get an empty image's DataURL and compare your canvas's DataURL to it to see if it's empty ;)
您还可以获取空图像的 DataURL 并将画布的 DataURL 与它进行比较以查看它是否为空；)
回答by Steeve C.
Here a tips from Phrogz : https://stackoverflow.com/a/4649358
这是 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' );
回答by albiesoft.com
Hey might be a late answer for this but I was kind of horrified to have the need of an extra canvas for comparing. So here is my solution:
嘿，这可能是一个迟到的答案，但我有点害怕需要额外的画布来进行比较。所以这是我的解决方案：
if (canvas.toJSON().objects.length === 0) {
console.log('canvas is empty');
}
I hope this helps, you can do a function with it but the solution is way cleaner than what I have seen around.
我希望这有帮助，你可以用它做一个功能，但解决方案比我看到的要干净得多。
回答by Harry Smart
I know it might be a late answer but try this solution:
我知道这可能是一个迟到的答案，但试试这个解决方案：
Simon Sarris says that:
西蒙·萨里斯说：
Instead of checking every single pixel, it may be much more efficient to merely record every time the canvas gets filled or stroked.
与其检查每个像素，不如只记录每次画布被填满或描边时的效率。
While that would be more efficient, however I did manage to find a way to detect the canvas to see if it is drawn/painted on by checking every pixel. I had a play around to see what results does the pixel data returns when the canvas is empty and when it is been painted on. I found out that when the canvas is empty all of the pixel data returns 0in all index positions of the array. So I used that to detect if there is any 0's or not and as the result I made it so it returns a boolean. If the canvas has been drawn on then it returns trueand if it hasn't then it returns false.
虽然这会更有效，但我确实设法找到一种方法来检测画布，通过检查每个像素来查看它是否被绘制/绘制。我玩了一下，看看当画布为空时以及在画布上绘制时像素数据返回什么结果。我发现当画布为空时，所有像素数据都会0在数组的所有索引位置返回。所以我用它来检测是否有任何0's ，结果我做了它，所以它返回一个布尔值。如果画布已被绘制，则返回true，如果没有，则返回false。
You can test it Hereon JSfiddle
您可以测试它在这里上的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;
}
I hope this helps :)
我希望这有帮助 ：）
回答by prisan
HTML Code:
HTML代码：
<canvas id='mainCanvas' style='border:solid'></canvas>
<canvas id='blankCanvas' style='display:none'></canvas>
JS Code:
JS代码：
var mainCanvas= new SignaturePad(document.getElementById("mainCanvas"));
if (mainCanvas.toDataURL() == document.getElementById('blankCanvas').toDataURL()) {
// Canvas is blank
}
Note: If your provide height and width to main canvas then same height and width to apply on blank canvas also.
注意：如果您为主画布提供高度和宽度，那么同样的高度和宽度也适用于空白画布。
