從HTML5 Canvas獲取二進制（base64）數據（readAsBinaryString）

是否有任何方式將HTML Canvas的內容作爲二進制數據讀取？從HTML5 Canvas獲取二進制（base64）數據（readAsBinaryString）

目前我有以下的HTML顯示輸入文件和畫布下方：

<p><button id="myButton" type="button">Get Image Content</button></p> 
<p>Input:<input id="fileInput" type="file"/></p> 
<p>Canvas<canvas id="myCanvas" width="578" height="200"/></p>

我然後設置我的輸入文件，以正確設置它在畫布上正常工作：

$('#fileInput').on('change', function() { 
    $.each(this.files, function() { 
     var image = new Image(); 
      image.src = window.URL.createObjectURL(this); 

     image.onload = function() { 
      $("canvas").drawImage({ 
       source: image, 
       x: 50, y: 50, 
       width: 100, 
       fromCenter: false 
      }); 
     }; 
    }); 
});

我現在需要時點擊按鈕，它會推動數據到服務器，從畫布獲得二進制數據（Base64編碼）...

最終的結果是，我需要至爲用戶提供選擇文件，剪裁/調整大小的功能，然後單擊一個按鈕，編輯後的圖像將被上傳到服務器（我不能在服務器端進行服務器端裁剪/調整大小限制...）

任何幫助將是偉大的！ Cheers

來源

2013-03-28 Jamz_2010

100

canvas元素提供了一個toDataURL方法，該方法返回一個data: URL，該URL包含給定格式的base64編碼圖像數據。例如：

var jpegUrl = canvas.toDataURL("image/jpeg"); 
var pngUrl = canvas.toDataURL(); // PNG is the default

雖然返回值不是只是編碼的二進制數據以base64，這是一個簡單的事情剪掉方案和文件類型來獲得你想要的數據。

如果瀏覽器認爲您已將任何從不同來源加載的數據繪製到畫布上，那麼toDataURL方法將失敗，因此，只有在您的圖像文件從與HTML頁面相同的服務器加載時，此方法纔有效其腳本正在執行此操作。

欲瞭解更多信息，請參閱the MDN docs on the canvas API，其中包括toDataURL和the Wikipedia article on the data: URI scheme的詳細信息，其中包括有關您將從此調用收到的URI格式的詳細信息。

來源

2013-03-28 15:30:11

看你如何與

$("canvas").drawImage();

看來你使用jQuery帆布（jCanvas）由迦勒埃文斯畫出你的畫布。我實際使用該插件，它有一個簡單的方法來檢索與$('canvas').getCanvasImage();

這裏帆布的base64圖像串的工作搗鼓你：http://jsfiddle.net/e6nqzxpn/

來源

2015-12-03 20:38:31

從HTML5 Canvas獲取二進制（base64）數據（readAsBinaryString）

回答

相關問題