如何检查画布上是否有数据或某些内容?
我有这个<canvas id="my-canvas"></canvas>
元素,我想检查我的画布上是否画了一些东西。
答案 0 :(得分:26)
我找到的一个好方法是使用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!');
});
这是fiddle
我不能因此而受到赞扬,我只是偶然发现它并解决了同样的问题。也许这会在某些时候帮助某人。
答案 1 :(得分:15)
不是检查每个像素,而是每次画布被填充或描边时记录它可能更有效。
一旦填充或中风或已经发生,那么你就知道已经绘制了一些东西。
当然'how'是非常特定于应用程序的,因为我们不知道你的画布是如何被绘制的。
答案 2 :(得分:10)
到目前为止,我还没有在Stackoverflow中看到过这样的问题..但是一个有趣的人要回答..
唯一的方法(我猜)是逐像素检查,即检查每个像素的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');
}
}
答案 3 :(得分:1)
要获取画布的像素,必须使用getImageData();方法 - &gt; getImageData() reference
并检查imageData的每个像素是否为0或255.
你的ImageData每个像素有4个单元,r g b a你可以通过将你的计数增加4来查看每个像素,并查看每4个下一个数字以获得你的rgba值。
您还可以获取空图像的DataURL,并将画布的DataURL与其进行比较,看它是否为空;)
答案 4 :(得分:1)
来自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' );
答案 5 :(得分:0)
嘿,这可能是一个较晚的答案,但是我对于需要额外的画布进行比较感到非常恐惧。所以这是我的解决方案:
if (canvas.toJSON().objects.length === 0) {
console.log('canvas is empty');
}
我希望这会有所帮助,您可以使用它来执行功能,但是解决方案比我之前所看到的更干净。
答案 6 :(得分:0)
我知道这可能是一个较晚的答案,但是请尝试以下解决方案:
Simon Sarris说:
与其检查每个像素,不如只记录每次填充或抚摸画布的效率。
虽然这样做会更有效率,但是我确实设法找到一种方法来检测画布,以通过检查每个像素来查看它是否被绘制/绘制。我到处游玩,以查看在画布为空以及在其上绘制时像素数据返回什么结果。我发现,当画布为空时,所有像素数据在数组的所有索引位置都返回0
。因此,我用它来检测是否有任何0
,结果我成功了,所以它返回一个布尔值。如果已绘制画布,则返回true
,如果尚未绘制,则返回false
。
您可以在JSfiddle上Here对其进行测试
代码:
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;
}
我希望这会有所帮助:)
答案 7 :(得分:0)
HTML代码:
<canvas id='mainCanvas' style='border:solid'></canvas>
<canvas id='blankCanvas' style='display:none'></canvas>
JS代码:
var mainCanvas= new SignaturePad(document.getElementById("mainCanvas"));
if (mainCanvas.toDataURL() == document.getElementById('blankCanvas').toDataURL()) {
// Canvas is blank
}
注意:如果您为主画布提供了高度和宽度,则同样的高度和宽度也将应用于空白画布。