當我們通過canvas創(chuàng)建畫布,即使未做任何操作，未畫一筆，我們也能成功導(dǎo)出base64。很多場景下我們需要判斷畫布是否為空，這個時候可以初始化一個模版來比較，網(wǎng)上的方法也有多：

//驗證canvas畫布是否為空
function isCanvasBlank(canvas) {
    var blank = document.createElement('canvas');//系統(tǒng)獲取一個空canvas對象
    blank.width = canvas.width;
    blank.height = canvas.height;
    return canvas.toDataURL() == blank.toDataURL();//比較值相等則為空
}
//調(diào)用
//非空驗證
function checkEmpty() {
    var c=document.getElementById("canvas"); // 獲取html的canvas對象
    if(isCanvasBlank(c)){
        alert("請繪制");
        return;
    }
});

但往往我們創(chuàng)建畫布，并不只是簡單的畫幾條線，可能有很多配置，比如線寬、線速、填充色，功能越復(fù)雜配置就越復(fù)雜，那么就需要在isCanvasBlank方法中全部初始化出來，那就顯得繁瑣了。

因此我們可以在頁面掛載的時候保存一份初始化數(shù)據(jù)（vue開發(fā)）。

• 在mounted周期里獲取初始的Base64，一定是要在mounted里面，created周期canvas還未掛載，無法獲取到實例；

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

• 在你需要做判斷的時候再次獲取當前canvas導(dǎo)出的Base64與mounted中保存的作比較：

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

關(guān)于toDataURL屬性，你可以參考MDN

HTMLCanvasElement.toDataURL() 方法返回一個包含圖片展示的 data URI ?？梢允褂?type 參數(shù)其類型，默認為 PNG 格式。圖片的分辨率為96dpi。