提交之前的畫布檢查

我有一個頁面，用戶可以在畫布上繪製並將圖像保存到服務器上的文件中。畫布有默認的黑色背景。有沒有辦法檢查用戶是否在使用toDataURL（）函數提交畫布圖像的數據URL表示之前在畫布上繪製任何東西？因此，如果用戶不在畫布上繪製任何東西（它將是黑色背景的空白畫布），則不會在服務器上創建圖像。我是否應該遍歷畫布的每個像素來確定這一點？下面是我在做什麼目前：提交之前的畫布檢查

var currentPixels = context.getImageData(0, 0, 600, 400); 
    for (var y = 0; y < currentPixels.height; y += 1) { 

     for (var x = 0; x < currentPixels.width; x += 1) { 
       for (var c = 0; c < 3; c += 1) { 

       var i = (y*currentPixels.width + x)*4 + c; 

       if(currentPixels.data[i]!=0) 
       break; 

       } 

     } 

    }

來源

2010-05-26 smokinguns

什麼是用來讓用戶畫？它可能有某種可以閱讀的事件或財產。如果沒有，只需從畫布上讀出數據並檢查每個像素以查找其顏色。 – 2010-05-26 20:23:00

有沒有其他的方法，而不是循環和檢查每個像素？ – smokinguns 2010-05-26 20:30:00

這取決於。你用什麼庫讓用戶畫圖？畢竟，這不是一個內置功能。 – 2010-05-26 21:13:12

假設的東西是在畫布上繪製，當你點擊它，你可以點擊綁定甚至表明畫布一直是設置一個標誌畫布繪製。

例如使用jQuery：

var canvasDrawnOn = false; 

$("#canvas").click(function(){ 
    canvasDrawnOn = true; 
});

來源

2010-07-15 12:48:39 Castrohenge

我前一陣子想出了這一點，但它不適合我的目的。

首先，我把圖像數據以base64：

var imgdata = canvas.toDataURL();

然後我得到一個MD5哈希（我在PHP中做到這一點，但它並不重要;要做到這一點在JavaScript中，你必須使用的圖像數據的庫，如this）：

if(h == EMPTYCANVAS) ...

：

var h = $.md5(imgdata);

在此之後，可以用一個空的畫布的預先計算的散列比較MD

它不適用於我，因爲用戶設置圖像尺寸，而不同尺寸的畫布將具有不同的散列。克服這個問題的建議（同時避免逐像素遍歷）會很棒。

來源

2011-03-14 22:40:36 RecencyEffect

提交之前的畫布檢查

回答

相關問題