Html 如何检查画布是否为空白？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17386707/
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 a canvas is blank?
提问by user2535056
How can I check, if a HTML5 canvas is blank or has colored pixels. Is there a fast method?
如何检查 HTML5 画布是否为空白或具有彩色像素。有没有快速的方法？
<canvas width="200" height="200"></canvas>
回答by Austin Brunkhorst
Faster: Using context.getImageData()to find "colored" pixels (non-zero values)
更快：context.getImageData()用于查找“彩色”像素（非零值）
// returns true if all color channels in each pixel are 0 (or "blank")
function isCanvasBlank(canvas) {
return !canvas.getContext('2d')
.getImageData(0, 0, canvas.width, canvas.height).data
.some(channel => channel !== 0);
}
As @Kaiidopoints out, you can get even better performance by enumerating over a Uint32Arrayof pixels instead of each color channel in every pixel.
正如@Kaiido指出的那样，您可以通过枚举一个Uint32Array像素而不是每个像素中的每个颜色通道来获得更好的性能。
// returns true if every pixel's uint32 representation is 0 (or "blank")
function isCanvasBlank(canvas) {
const context = canvas.getContext('2d');
const pixelBuffer = new Uint32Array(
context.getImageData(0, 0, canvas.width, canvas.height).data.buffer
);
return !pixelBuffer.some(color => color !== 0);
}
Slower: Comparing data URLs with a blank canvas
较慢：将数据 URL 与空白画布进行比较
function isCanvasBlank(canvas) {
const blank = document.createElement('canvas');
blank.width = canvas.width;
blank.height = canvas.height;
return canvas.toDataURL() === blank.toDataURL();
}
Demo
演示
document.getElementById('check').addEventListener('click', function() {
const blank = isCanvasBlank(document.getElementById('canvas'));
alert(blank ? 'blank' : 'not blank');
});
document.getElementById('draw').addEventListener('click', function() {
drawOnCanvas(document.getElementById('canvas'));
});
document.getElementById('clear').addEventListener('click', function() {
const canvas = document.getElementById('canvas');
canvas.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
});
function isCanvasBlank(canvas) {
const context = canvas.getContext('2d');
const pixelBuffer = new Uint32Array(
context.getImageData(0, 0, canvas.width, canvas.height).data.buffer
);
return !pixelBuffer.some(color => color !== 0);
}
function drawOnCanvas(canvas) {
const context = canvas.getContext('2d');
context.fillStyle = '#' + Math.floor(Math.random() * 0xFFFFFF).toString(16);
context.fillRect(Math.floor(Math.random() * canvas.width),
Math.floor(Math.random() * canvas.height),
Math.floor(Math.random() * canvas.width),
Math.floor(Math.random() * canvas.height));
}canvas {
display: block;
margin-top: 10px;
border: 1px solid black;
}<button id="check"> Check </button>
<button id="draw"> Draw </button>
<button id="clear"> Clear </button>
<canvas id="canvas" width="200" height="200"></canvas>