Question

我正在尝试验证HTML canvas是否为空。 iv尝试了这篇文章提到的How to check if a canvas is blank?，但是没有运气。

我正在WordPress上运行，并使用了一个插件，该插件可以让用户设计自己的产品。当前，仅如果产品上只有一个设计阶段，则用户不能进行下一阶段（结帐）。在我的情况下，有2个阶段的T恤正面图和T恤背面。因此用户可以填写一个部分，而仍然可以继续进行结帐而无需填写下一阶段。我随附了一个视频，以提供更好的解释，并提供了产品编辑器的链接。以下是如果我尝试了此代码（紧随该帖子之后）以阻止用户继续，但是我的猜测是画布内部已经有data了，我不确定如何正确验证它。

var canvas = document.getElementById('lumise-stage-front-canvas')
var btn = document.getElementById('lumise-cart-action')

// add event listener
btn.addEventListener('click',function(){
    if(canvas.toDataURL() == document.getElementById('empty').toDataURL()){
    alert('It is blank');
  }else{
    alert('Save it!');
  } 
});

我也通过定位data-set元素上的lumise-top-tools属性来尝试了此选项。它起作用了，但是我无法定位到第二阶段，也许是因为在第一阶段处于活动状态时它被隐藏了

var x = document.getElementById('lumise-top-tools')
var btn = document.getElementById('lumise-cart-action');

// add event listener
btn.addEventListener('click', function(){
    if(x.dataset.view == 'standart'){alert('Empty Design')}
});

为所有人欢呼

Product editor

Explanation Video

如何验证HTML画布是否为空

0 个答案: