Как сохранить холст HTML5 как изображение на сервере?

Ответ 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 может быть найдена здесь):

Ответ 2

Я играл с этой двумя неделями назад, это очень просто. Единственная проблема заключается в том, что все учебники просто говорят о сохранении изображения локально. Вот как я это сделал:

1) Я установил форму, чтобы использовать метод POST.

2) Когда пользователь выполнит рисование, он может нажать кнопку "Сохранить".

3) Когда кнопка нажата, я беру данные изображения и помещаю их в скрытое поле. После этого я отправлю форму.

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

4) Когда форма отправлена, у меня есть этот небольшой php script:

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

Ответ 3

Я думаю, что вы должны перенести изображение в base64 на изображение с BLOB-объектами, потому что, когда вы используете base64-изображение, это займет много строк журнала или много строк отправит на сервер. С blob, это только файл. Вы можете использовать этот код ниже:

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

Этот код использует синтаксис CoffeeScript.

если вы хотите использовать JavaScript, вставьте код по адресу http://js2.coffee

Ответ 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;
?>

Ответ 5

Если вы хотите сохранить данные, полученные из функции Javascript canvas.toDataURL(), вам нужно преобразовать пробелы в плюсы. Если вы этого не сделаете, декодированные данные будут повреждены:

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

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

Ответ 6

В дополнение к Сальвадору Дали ответьте:

на стороне сервера не забывайте, что данные поступают в формате base64 string. Это важно, потому что на некоторых языках программирования вам нужно явно сказать, что эту строку следует рассматривать как байты не простую строку Юникода.

В противном случае декодирование не будет работать: изображение будет сохранено, но это будет нечитаемый файл.

Ответ 7

Я работал над чем-то похожим. Пришлось конвертировать холст 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);