使用javascript尝试确定画布是否为空

我正在使用来自的解决方案：但它不起作用。我的空白画布URL与新创建的画布URL不匹配，我无法找出原因。它们是相同的维度和所有内容，但它们的.toDataURL返回不同的内容，因此我无法判断它是否已被引入。下面是我在空白画布上执行.toDataURL和在新创建的画布上执行.toDataURL时发生的情况的示例，您可以看到它们在继续操作时有所不同

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0sAAACUCAYAAABCxLIRAAAKfUlEQVR4Xu3ZIRKAQAwEQfj/ow9NgRi/jY5J58wU9znnXD4CBAgQIECAAAECBAgQeAncYsmLIECAAAECBAgQIECAwFdALHkVBAgQIECAAAECBAgQ+BEQS54FAQIECBAgQIAAAQIExJI3QIAAAQIECBAgQIAAgSbgz1JzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJiCWxg5uXQIECBAgQIAAAQIEmoBYak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTEBsTR2cOsSIECAAAECBAgQINAExFJzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJiCWxg5uXQIECBAgQIAAAQIEmoBYak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTEBsTR2cOsSIECAAAECBAgQINAExFJzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJiCWxg5uXQIECBAgQIAAAQIEmoBYak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTGBB7R+TmNlhJuwAAAAAElFTkSuQmCC

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA0sAAACUCAYAAABCxLIRAAAKeUlEQVR4Xu3ZoRHAMAwEwbj/plOADY7/BotoZXKT8/kIECBAgAABAgQIECBA4BI4TAgQIECAAAECBAgQIEDgFhBLXgUBAgQIECBAgAABAgQeAmLJsyBAgAABAgQIECBAgIBY8gYIECBAgAABAgQIECDQBPxZak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTEBsTR2cOsSIECAAAECBAgQINAExFJzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJiCWxg5uXQIECBAgQIAAAQIEmoBYak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTEBsTR2cOsSIECAAAECBAgQINAExFJzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJiCWxg5uXQIECBAgQIAAAQIEmoBYak6mCBAgQIAAAQIECBAYExBLYwe3LgECBAgQIECAAAECTUAsNSdTBAgQIECAAAECBAiMCYilsYNblwABAgQIECBAgACBJiCWmpMpAgQIECBAgAABAgTGBMTS2MGtS4AAAQIECBAgQIBAExBLzckUAQIECBAgQIAAAQJjAmJp7ODWJUCAAAECBAgQIECgCYil5mSKAAECBAgQIECAAIExAbE0dnDrEiBAgAABAgQIECDQBMRSczJFgAABAgQIECBAgMCYgFgaO7h1CRAgQIAAAQIECBBoAmKpOZkiQIAAAQIECBAgQGBMQCyNHdy6BAgQIECAAAECBAg0AbHUnEwRIECAAAECBAgQIDAmIJbGDm5dAgQIECBAgAABAgSagFhqTqYIECBAgAABAgQIEBgTEEtjB7cuAQIECBAgQIAAAQJNQCw1J1MECBAgQIAAAQIECIwJiKWxg1uXAAECBAgQIECAAIEmIJaakykCBAgQIECAAAECBMYExNLYwa1LgAABAgQIECBAgEATEEvNyRQBAgQIECBAgAABAmMCYmns4NYlQIAAAQIECBAgQKAJiKXmZIoAAQIECBAgQIAAgTEBsTR2cOsSIECAAAECBAgQINAExFJzMkWAAAECBAgQIECAwJiAWBo7uHUJECBAgAABAgQIEGgCYqk5mSJAgAABAgQIECBAYExALI0d3LoECBAgQIAAAQIECDQBsdScTBEgQIAAAQIECBAgMCYglsYObl0CBAgQIECAAAECBJqAWGpOpggQIECAAAECBAgQGBMQS2MHty4BAgQIECBAgAABAk1ALDUnUwQIECBAgAABAgQIjAmIpbGDW5cAAQIECBAgQIAAgSYglpqTKQIECBAgQIAAAQIExgTE0tjBrUuAAAECBAgQIECAQBMQS83JFAECBAgQIECAAAECYwJiaezg1iVAgAABAgQIECBAoAmIpeZkigABAgQIECBAgACBMQGxNHZw6xIgQIAAAQIECBAg0ATEUnMyRYAAAQIECBAgQIDAmIBYGju4dQkQIECAAAECBAgQaAJiqTmZIkCAAAECBAgQIEBgTEAsjR3cugQIECBAgAABAgQINAGx1JxMESBAgAABAgQIECAwJvADO98Ald0HVn8AAAAASUVORK5CYII=

以下功能仅供参考：

function isCanvasBlank(canvas) {
    var blank = document.createElement('canvas');
    blank.width = canvas.width;
    blank.height = canvas.height;

    return canvas.toDataURL() == blank.toDataURL();
}

---

您得到的图像是不同的。第一个是白色背景，另一个是透明的

这就是造成差异的原因

这是一种快速填充新画布的方法

function isCanvasBlank(canvas) {
    var blank = document.createElement('canvas');
    blank.width = canvas.width;
    blank.height = canvas.height;

    var ctx = blank.getContext("2d");
    ctx.fillStyle = "#FFFFFF";
    ctx.fillRect(0, 0, blank .width, blank .height);
    return canvas.toDataURL() == blank.toDataURL();
}

或者使用与小提琴相同的功能<代码>blank.getContext（'2d'）.clearRect（0,0，canvas.width，canvas.height）

---

该函数的目标是测试我的canvas元素是否为空，因此它会创建一个新元素进行测试，因为它将始终为空，我看到新元素是透明的，有没有办法修改此函数以给我一个白色背景的空白canvas？

function isCanvasBlank(canvas) {
    var blank = document.createElement('canvas');
    blank.width = canvas.width;
    blank.height = canvas.height;

    blank.getContext('2d').clearRect(0, 0, canvas.width, canvas.height);
    return canvas.toDataURL() == blank.toDataURL();
}