当我们通过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。
