如何检测html5画布是否为空白？ [英] How to detect if html5 canvas is blank?

问题描述

我有一个涂鸦应用程序，将sHTML中的html5画布保存到图像中。我想避免保存空白（完全透明）pngs如果用户不小心点击保存没有绘制任何东西。我发现，即使对于一个空白的画布，toDataURL（）永远不是一个空字符串，但巨大的数据转储。如果没有数据添加到画布，此字符串显示为始终保持相同的值。因此，检测空画布的一种方法是将提交的画布数据与此空画布数据字符串进行比较，以查看它们是否匹配。

I have a doodle application that saves an html5 canvas to an image in s3. I want to avoid saving blank (totally transparent) pngs if the user accidentally clicks "save" without having drawn anything. I found that even for a blank canvas the toDataURL() is never an empty string, but huge dump of data. This string appears to always remain the same value if no data is added to the canvas. So one way of detecting an empty canvas is to compare the submitted canvas data to this empty canvas data string to see if they match.

我的问题是，有效的方式这样做？对成千上万个字符长的两个字符串进行字符串比较意味着，如果确实有一个空的画布提交，我们必须比较所有的方式到最后一个字符。首先计算新提交的画布的md5散列，然后将其与已知空画布数据字符串的md5散列进行比较更有效率吗？哪个更快？

My question is, is there a more efficient way of doing this? Doing a string compare of two strings that are thousands of characters long means that we have to compare all the way to the last character if there is indeed an empty canvas submitted. Is it more efficient to first compute the md5 hash of the newly submitted canvas and then compare it to the md5 hash of the known empty canvas data string? Which is faster?

它们是否是任何其他确定空画布的方法？

Are they any other ways of determining empty canvas?

例如：比较字符串的长度一个可靠的测试匹配空画布？

For example: Is comparing the length of the strings a reliable test for matching empty canvas?

推荐答案

您能轻松侦测到点击/绘图吗？如果是这样，你可以有一个初始的画布空布尔，翻转第一次用户绘制任何东西。

Can you easily detect clicks/draws? If so, you could have an initial 'canvas empty' boolean that gets flipped the first time the user draws anything.

不幸的是，如果用户绘制一些东西，然后删除它，然后保存就不会有帮助。

Unfortunately, this wouldn't help if the user draws something, then erases it, then saves.

这篇关于如何检测html5画布是否为空白？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！