canvas判断是否白屏

方案一：

canvas的自动化测试不太好做，因为说白了就是一张图片，在canvas上画了什么，对不对根本不知道。

现在想到的唯一的方法就是截图比较吧。

具体做法，说起来也很简单。

先把case写好，然后跑起来，先人工确认下对不对，如果对了，ok，把canvas的图截下来，作为一张期望图。之后把case改成直接跟这个期望图比较。

图和图的比较就需要一些库的支持了。

我用过的是resemble，代码在github上。

这个东西也很简单。

上代码

function compare(){
                var str = canvasElement.toDataURL('image/png');
                resemble(str)
                        .compareTo('xxx.jpg')
                        .onComplete(function (data) {
                            console.log(data.isSameDimensions + " " + data.misMatchPercentage);
                        });
            }
就是先用toDataURL把canvas的内容转成图片,然后跟期望图来比较。
出来的结果中

isSameDimensions标志两张图是否一样大，
misMatchPercentage代表了两张图的差异百分比。

有了这个，就可以愉快的断言了。

再说说怎么生成这个期望图。

也很简单

            function savepic()
            {
                var str = canvasElement.toDataURL('image/png');
                var link = document.createElement("a");
                link.download = "abc";
                link.href = str;
                link.click();
 
            }
还是用toDataURL，然后创建一个link，调用click下载就可以了。
 

方案二：

当我们通过canvas创建画布,即使未做任何操作，未画一笔，我们也能成功导出base64。很多场景下我们需要判断画布是否为空，这个时候可以初始化一个模版来比较，网上的方法也有多：

//验证canvas画布是否为空
function isCanvasBlank(canvas) {
    var blank = document.createElement('canvas');//系统获取一个空canvas对象
    blank.width = canvas.width;
    blank.height = canvas.height;
    return canvas.toDataURL() == blank.toDataURL();//比较值相等则为空
}
//调用
//非空验证
function checkEmpty() {
    var c=document.getElementById("canvas"); // 获取html的canvas对象
    if(isCanvasBlank(c)){
        alert("请绘制");
        return;
    }
});

但往往我们创建画布，并不只是简单的画几条线，可能有很多配置，比如线宽、线速、填充色，功能越复杂配置就越复杂，那么就需要在isCanvasBlank方法中全部初始化出来，那就显得繁琐了。

因此我们可以在页面挂载的时候保存一份初始化数据（vue开发）。

• 在mounted周期里获取初始的Base64，一定是要在mounted里面，created周期canvas还未挂载，无法获取到实例；

mounted () {
    this.toDataURL = this.$refs.SignCanvas.canvas.toDataURL()
  },

• 在你需要做判断的时候再次获取当前canvas导出的Base64与mounted中保存的作比较：

if (this.toDataURL === this.$refs.SignCanvas.canvas.toDataURL()) {
        this.$toast('请先签名')
        return
      }

关于toDataURL属性，你可以参考MDN

HTMLCanvasElement.toDataURL() 方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为 PNG 格式。图片的分辨率为96dpi。