วิธีบันทึก HTML5 Canvas เป็นรูปภาพบนเซิร์ฟเวอร์

ฉันกำลังทำงานในโครงการศิลปะแบบกำเนิดที่ฉันต้องการอนุญาตให้ผู้ใช้บันทึกรูปภาพผลลัพธ์จากอัลกอริทึม แนวคิดทั่วไปคือ:

• สร้างภาพบนผ้าใบ HTML5 โดยใช้อัลกอริทึมกำเนิด
• เมื่อรูปภาพเสร็จสมบูรณ์อนุญาตให้ผู้ใช้บันทึกผืนผ้าใบเป็นไฟล์รูปภาพไปยังเซิร์ฟเวอร์
• อนุญาตให้ผู้ใช้ดาวน์โหลดรูปภาพหรือเพิ่มลงในแกลเลอรีชิ้นส่วนที่ผลิตโดยใช้อัลกอริทึม

อย่างไรก็ตามฉันติดอยู่ในขั้นตอนที่สอง หลังจากความช่วยเหลือจาก Google ฉันพบบล็อกโพสต์นี้ซึ่งดูเหมือนจะเป็นสิ่งที่ฉันต้องการ:

ซึ่งนำไปสู่รหัส 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);
}
?>

แต่นี่ดูเหมือนจะไม่ทำอะไรเลย

Googling เพิ่มเติมเปิดโพสต์บล็อกนี้ซึ่งอิงจากบทช่วยสอนก่อนหน้านี้ ไม่แตกต่างกันมาก แต่อาจลองดู:

$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 อย่างไรก็ตามฉันยังไม่สามารถเปิดได้และดูเหมือนว่าจะไม่ได้รับการจัดรูปแบบเป็นรูปภาพ

นี่คือตัวอย่างวิธีการบรรลุสิ่งที่คุณต้องการ:

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 สามารถพบได้ที่นี่ ):

ฉันเล่นกับสองสัปดาห์ที่ผ่านมามันง่ายมาก ปัญหาเดียวคือบทเรียนทั้งหมดเพียงแค่พูดคุยเกี่ยวกับการบันทึกภาพในเครื่อง นี่คือวิธีที่ฉันทำ:

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']);
?>

ฉันคิดว่าคุณควรโอนอิมเมจใน base64 ไปยังอิมเมจด้วย blob เพราะเมื่อคุณใช้อิมเมจ base64 มันต้องใช้สายบันทึกจำนวนมากหรือหลายบรรทัดจะส่งไปยังเซิร์ฟเวอร์ ด้วยหยดมันเป็นเพียงไฟล์ คุณสามารถใช้ตะโกนรหัสนี้:

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 กับแบบฟอร์ม:

  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

รหัสนี้ใช้ไวยากรณ์ CoffeeScript

หากคุณต้องการใช้จาวาสคริปต์กรุณาวางรหัสไปที่http://js2.coffee

ส่งภาพแคนวาสไปยัง 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;
?>

หากคุณต้องการบันทึกข้อมูลที่ได้มาจากcanvas.toDataURL()ฟังก์ชันJavascript คุณต้องแปลงช่องว่างเป็น plusses หากคุณไม่ทำเช่นนั้นข้อมูลที่ถอดรหัสจะเสียหาย:

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

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

ฉันทำงานในสิ่งที่คล้ายกัน มีการแปลงผ้าใบเข้ารหัส Base64Uint8Array 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);

นอกจากคำตอบของ Salvador Dali:

ที่ฝั่งเซิร์ฟเวอร์อย่าลืมว่าข้อมูลมาในรูปแบบสตริง base64 เป็นสิ่งสำคัญเนื่องจากในภาษาการเขียนโปรแกรมบางภาษาคุณต้องอธิบายอย่างชัดเจนว่าสตริงนี้ควรถือเป็นไบต์ไม่ใช่สตริง Unicode แบบง่าย

มิฉะนั้นการถอดรหัสจะไม่ทำงาน: ภาพจะถูกบันทึก แต่จะเป็นไฟล์ที่อ่านไม่ได้