如何將 HTML5 Canvas 保存為服務器上的圖像？

Question

我正在從事一個生成藝術項目，我希望允許用戶從算法中保存生成的圖像。 總體思路是：

• 使用生成算法在 HTML5 Canvas 上創建圖像
• 當圖像完成后，允許用戶將畫布作為圖像文件保存到服務器
• 允許用戶下載圖像或將其添加到使用該算法生成的圖片庫中。

但是，我被困在第二步。 在谷歌的一些幫助下，我找到了這篇博文，這似乎正是我想要的：

這導致了 JavaScript 代碼：

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var ajax = new XMLHttpRequest();

  ajax.open("POST", "testSave.php", false);
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.setRequestHeader("Content-Type", "application/upload");
  ajax.send("imgData=" + canvasData);
}

和相應的 PHP (testSave.php)：

<?php
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) {
  $imageData = $GLOBALS['HTTP_RAW_POST_DATA'];
  $filteredData = substr($imageData, strpos($imageData, ",") + 1);
  $unencodedData = base64_decode($filteredData);
  $fp = fopen('/path/to/file.png', 'wb');

  fwrite($fp, $unencodedData);
  fclose($fp);
}
?>

但這似乎根本沒有任何作用。

更多的谷歌搜索出現了這篇基於上一教程的博客文章。 沒什么不同，但也許值得一試：

$data = $_POST['imgData'];
$file = "/path/to/file.png";
$uri = substr($data,strpos($data, ",") + 1);

file_put_contents($file, base64_decode($uri));
echo $file;

這個創建了一個文件（是的）但它已損壞並且似乎不包含任何內容。 它也似乎是空的（文件大小為 0）。

有什么明顯的我做錯了嗎？ 我存儲文件的路徑是可寫的，所以這不是問題，但似乎沒有發生任何事情，我不確定如何調試它。

編輯

按照 Salvidor Dali 的鏈接，我將 AJAX 請求更改為：

function saveImage() {
  var canvasData = canvas.toDataURL("image/png");
  var xmlHttpReq = false;

  if (window.XMLHttpRequest) {
    ajax = new XMLHttpRequest();
  }
  else if (window.ActiveXObject) {
    ajax = new ActiveXObject("Microsoft.XMLHTTP");
  }

  ajax.open("POST", "testSave.php", false);
  ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
  ajax.onreadystatechange = function() {
    console.log(ajax.responseText);
  }
  ajax.send("imgData=" + canvasData);
}

現在圖像文件已創建並且不為空！ 似乎內容類型很重要，將其更改為x-www-form-urlencoded允許發送圖像數據。

控制台返回 base64 代碼的（相當大的）字符串，數據文件約為 140 kB。 但是，我仍然無法打開它，並且它似乎沒有格式化為圖像。

Answer 1

以下是如何實現所需的示例：

1. 畫一些東西（取自畫布教程）

 <canvas id="myCanvas" width="578" height="200"></canvas> <script> var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); // begin custom shape context.beginPath(); context.moveTo(170, 80); context.bezierCurveTo(130, 100, 130, 150, 230, 150); context.bezierCurveTo(250, 180, 320, 180, 340, 150); context.bezierCurveTo(420, 150, 420, 120, 390, 100); context.bezierCurveTo(430, 40, 370, 30, 340, 50); context.bezierCurveTo(320, 5, 250, 20, 250, 50); context.bezierCurveTo(200, 5, 150, 20, 170, 80); // complete custom shape context.closePath(); context.lineWidth = 5; context.fillStyle = '#8ED6FF'; context.fill(); context.strokeStyle = 'blue'; context.stroke(); </script>

2. 將畫布圖像轉換為 URL 格式 (base64)

   var dataURL = canvas.toDataURL();

3. 通過 Ajax 將其發送到您的服務器

 $.ajax({ type: "POST", url: "script.php", data: { imgBase64: dataURL } }).done(function(o) { console.log('saved'); // If you want the file to be visible in the browser // - please modify the callback in javascript. All you // need is to return the url to the file, you just saved // and than put the image in your browser. });

3. 在您的服務器上將 base64 保存為圖像（這里是如何在 PHP 中執行此操作，相同的想法適用於每種語言。可以在此處找到PHP 中的服務器端）：

Answer 2

我兩周前玩過這個，很簡單。 唯一的問題是所有的教程都只講在本地保存圖像。 我是這樣做的：

1) 我設置了一個表單，所以我可以使用 POST 方法。

2) 當用戶完成繪圖后，他可以單擊“保存”按鈕。

3）單擊按鈕時，我將圖像數據放入隱藏字段中。 之后我提交了表格。

document.getElementById('my_hidden').value = canvas.toDataURL('image/png');
document.forms["form1"].submit();

4）提交表單時，我有這個小的php腳本：

<?php 
$upload_dir = somehow_get_upload_dir();  //implement this function yourself
$img = $_POST['my_hidden'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$data = base64_decode($img);
$file = $upload_dir."image_name.png";
$success = file_put_contents($file, $data);
header('Location: '.$_POST['return_url']);
?>

Answer 3

我認為您應該將圖像轉換為 base64，然后轉換為 Blob 並將其發送到服務器。 當你使用 base64 圖像時，很多行會被發送到服務器。 使用 blob，它只是文件。

您可以在下面使用此代碼：

function dataURLtoBlob(dataURL) {
  let array, binary, i, len;
  binary = atob(dataURL.split(',')[1]);
  array = [];
  i = 0;
  len = binary.length;
  while (i < len) {
    array.push(binary.charCodeAt(i));
    i++;
  }
  return new Blob([new Uint8Array(array)], {
    type: 'image/png'
  });
};

和畫布代碼在這里：

const canvas = document.getElementById('canvas');
const file = dataURLtoBlob( canvas.toDataURL() );

之后，您可以將 ajax 與 Form 一起使用：

const fd = new FormData;

fd.append('image', file);

$.ajax({
  type: 'POST',
  url: '/url-to-save',
  data: fd,
  processData: false,
  contentType: false
});

---

CoffeeScript語法中的代碼：

dataURLtoBlob = (dataURL) ->
  # Decode the dataURL
  binary = atob(dataURL.split(',')[1])
  # Create 8-bit unsigned array
  array = []
  i = 0
  while i < binary.length
    array.push binary.charCodeAt(i)
    i++
  # Return our Blob object
  new Blob([ new Uint8Array(array) ], type: 'image/png')

和畫布代碼在這里：

canvas = document.getElementById('canvas')
file = dataURLtoBlob(canvas.toDataURL())

之后，您可以將 ajax 與 Form 一起使用：

fd = new FormData
# Append our Canvas image file to the form data
fd.append 'image', file
$.ajax
  type: 'POST'
  url: '/url-to-save'
  data: fd
  processData: false
  contentType: false

Answer 4

將畫布圖像發送到 PHP：

var photo = canvas.toDataURL('image/jpeg');                
$.ajax({
  method: 'POST',
  url: 'photo_upload.php',
  data: {
    photo: photo
  }
});

這是PHP腳本：
photo_upload.php

<?php

    $data = $_POST['photo'];
    list($type, $data) = explode(';', $data);
    list(, $data)      = explode(',', $data);
    $data = base64_decode($data);

    mkdir($_SERVER['DOCUMENT_ROOT'] . "/photos");

    file_put_contents($_SERVER['DOCUMENT_ROOT'] . "/photos/".time().'.png', $data);
    die;
?>

Answer 5

我做過類似的事情。 必須將 canvas Base64 編碼的圖像轉換為Uint8Array Blob 。

function b64ToUint8Array(b64Image) {
   var img = atob(b64Image.split(',')[1]);
   var img_buffer = [];
   var i = 0;
   while (i < img.length) {
      img_buffer.push(img.charCodeAt(i));
      i++;
   }
   return new Uint8Array(img_buffer);
}

var b64Image = canvas.toDataURL('image/jpeg');
var u8Image  = b64ToUint8Array(b64Image);

var formData = new FormData();
formData.append("image", new Blob([ u8Image ], {type: "image/jpg"}));

var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/upload", true);
xhr.send(formData);

Answer 6

如果要保存從 Javascript canvas.toDataURL()函數派生的數據，則必須將空格轉換為加號。 如果你不這樣做，解碼的數據就會損壞：

<?php
  $encodedData = str_replace(' ','+',$encodedData);
  $decocedData = base64_decode($encodedData);
?>

http://php.net/manual/ro/function.base64-decode.php

Answer 7

除了薩爾瓦多·達利的回答：

在服務器端不要忘記數據采用 base64字符串格式。 這很重要，因為在某些編程語言中，您需要明確地說這個字符串應該被視為字節而不是簡單的 Unicode 字符串。

否則解碼將不起作用：圖像將被保存，但它將是一個無法讀取的文件。

Answer 8

我剛剛制作了一個圖像裁剪和上傳功能

https://www.npmjs.com/package/react-image-crop

獲取 ImagePreview（畫布中的裁剪圖像渲染）

https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

canvas.toBlob(function(blob){...}, 'image/jpeg', 0.95);

我更喜歡在 blob 中發送內容類型為image/jpeg數據，而不是toDataURL （一個巨大的 base64 字符串）

我使用 SAS URL 上傳到 Azure Blob 的實現

axios.post(azure_sas_url, image_in_blob, {
   headers: {
      'x-ms-blob-type': 'BlockBlob',
      'Content-Type': 'image/jpeg'
   }
})