javascript - HTML5 Canvas DataURL を比較すると同じではありませんか? (javascript/jquery)

Question

次のようなjavascript/Jquery関数があります。

function loadRawData()

canvasData = canvas.toDataURL("image/png");

rawData = $('#imgInput').val();


//check the raw data box is not empty or identical to the canvas
if(rawData == ""){
    console.log("Raw data box is empty!");
}else if(rawData != canvasData){

//WHY ARE THEY DIFFERENT???
    alert(canvasData);
    alert(rawData);
///////////////////////////

    // load image from data url
    raw = new Image();
    raw.src = rawData;
    raw.onload = function() {
        //Clear canvas for the new image
        clearCanvas();

        context.drawImage(raw, 0, 0);
    }

    console.log("Canvas restored to rawData");

}else{
 console.log("Canvas failed to restore (same as canvas?)");
}
}

私の関数が呼び出されると、「imgInput」のIDを持つテキストエリアからデータがすべて正常にロードされ、ロードしようとした画像が表示されます。しかし、直後に呼び出すと、2 つの変数が同一であることが想定されている場合でも、else を介して true が渡されます。

各変数のデータを確認するために 2 つのアラート ボックスを作成しましたが、確かに、キャンバスの URL と生データの URL は完全に異なりますが、読み込まれる画像は同じです。

どうしたの？どこを間違えたのかわからない？あなたが提供できるアドバイスを事前にありがとう=）