無法通過HTML畫布保存圖像

Question

我在保存畫布時遇到困難。 我是javascript新手，所以我認為這可能是語法問題。

我在函數中保存了一些變量：

var imageView = document.getElementById("imageView");
var canvasData = imageView.toDataURL("image/png");
var postData = "canvasData="+canvasData;

如果我添加以下行，它將正確顯示圖像：

imgData = $('#i').append($('<img/>', { src : canvasData }));

但是，我還有另一個函數希望傳遞base64代碼，因此我添加了：

var  the_data = "test= "+imageView.toDataURL("image/png");

它確實打印出base64代碼，但只打印空白畫布（不打印用戶添加的圖形）。

如果添加以下內容，將無法正常工作：

  var  the_data = "test= "+canvasData;

我究竟做錯了什么？

這是我想要做的基本jsfiddle： http : //jsfiddle.net/sMSeX/

Answer 1

在我這邊，有關上傳HTML5畫布圖像數據的一些提示：

我正在為一家印刷廠進行項目，由於將圖像從HTML5 canvas元素上傳到服務器，因此出現了一些問題。 我至少要掙扎一個小時，但沒有將其正確保存在服務器上。

我通過畫布元素通過Base64解碼獲得了圖像數據

        var can = document.getElementsByTagName('canvas');
        var dataURL = can[0].toDataURL("image/jpg");
        //dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
        console.log('data url: '+dataURL);

一旦我將jQuery ajax call的contentType選項設置為'application/x-www-form-url-encoded' ：

    $.ajax({
              url: 'index.php?page=upload-image',
              type: 'post',
              contentType: 'application/x-www-form-urlencoded',
              //data: '{ "imageData" : "' + dataURL + '" }',
              data: dataURL,
              beforeSend: function() {
                $('.text-danger').remove();
              },
              complete: function() {

              },
              success: function(json) {
                console.log('upload complete'); 
              }
    });

一切順利，Base64編碼的數據被正確解釋並成功保存為圖像。

---

也許有人幫忙！