检查画布是否不为空答案

【问题标题】：Check if canvas is not empty检查画布是否不为空
【发布时间】：2021-09-12 09:39:54
【问题描述】：

我在一个页面上有 3 个签名框，我正在尝试检查它们是否为空/空白。

我尝试了$('#input_5_9').val() == ''，但它没有检测到任何东西。当我与画布交互时，HTML 没有任何变化。

画布的HTML 是：

<canvas id="input_5_9" width="300" height="180" style="border-width: 2px; border-style: dashed; border-color: rgb(221, 221, 221); background-color: rgb(255, 255, 255); cursor: url(&quot;https://website.com/super_signature/pen.cur&quot;), pointer; width: 300px; height: 180px;"></canvas>

【问题讨论】：

stackoverflow.com/questions/2925130/…
当签名放入canvas 时，HTML 是什么样的？ path 或其他一些元素是否附加到 canvas？我假设您只需要使用 :empty 选择器

标签： jquery

【解决方案1】：

如果要检查number of nested object in canvas，可以使用$('#input_5_9').children().length检查是否为空。

if($('#input_5_9').children().length == 0)
  console.log("canvas is empty");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<canvas id="input_5_9" width="300" height="180" style="border-width: 2px; border-style: dashed; border-color: rgb(221, 221, 221);
background-color: rgb(255, 255, 255); 
cursor: url(&quot;https://website.com/super_signature/pen.cur&quot;), pointer; width: 300px; height: 180px;">
    </canvas>

【讨论】：