Переименование изображения, созданного на холсте HTML5

Я сделал простой холст и сохранил его как изображение. Я сделал это с помощью этого кода:

 var canvas = document.getElementById("mycanvas");
 var img    = canvas.toDataURL("image/png");

и откройте созданное изображение следующим образом:

document.write('<img src="'+img+'"/>');

Но имя у него всегда странное. Я хочу переименовать изображение, например faizan.jpg и т. д. Как мне это сделать?


javascript html filenames html5-canvas data-url
person Faizan Tanveer    schedule 18.09.2011    source источник
comment
Возможно, связано: новый API для чтения файлов и URL-адреса кажутся неэффективными"> stackoverflow.com/questions/6723931/.   -  person pimvdb    schedule 18.09.2011
comment
короткий ответ - это невозможно в текущих браузерах. long - это загрузить это изображение на сервер, сохранить его там и дать ему URL-адрес пользователя.   -  person c69    schedule 18.09.2011

Ответы (2)


arrow_upward
3
arrow_downward

Проще говоря, вы не можете. Когда вы вызываете метод toDataURL для элемента HTMLCanvasElement, он создает строковое представление изображения в виде URL-адреса данных. Таким образом, если вы попытаетесь сохранить изображение, браузер присвоит ему имя файла по умолчанию (например, Opera сохранит его как default.png, если URL-адрес данных был файлом png).

Существует множество обходных путей. Самый простой — сделать вызов AJAX на сервер, сохранить изображение на стороне сервера и вернуть URL-адрес сохраненного изображения, к которому затем можно получить доступ и сохранить на стороне клиента:

function saveDataURL(canvas) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function () {
        if (request.readyState === 4 && request.status === 200) {
            window.location.href = request.responseText;
        }
    };
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.open("POST", "saveDataURL.php", true);
    request.send("dataURL=" + canvas.toDataURL());
}

Чтобы сохранить изображение на стороне сервера, используйте следующий PHP-скрипт:

$dataURL = $_POST["dataURL"];
$encodedData = explode(',', $dataURL)[1];
$decodedData = base64_decode($encodedData);
file_put_contents("images/faizan.png", $decodedData);
echo "http://example.com/images/faizan.png";
person Aadit M Shah    schedule 18.09.2011
comment
не могли бы вы объяснить, где код меняет имя изображения и где изображение сохраняется на стороне сервера? - person Faizan Tanveer; 18.09.2011
comment
Я предполагаю, что вы немного знакомы с серверными скриптами. Функция saveDataURL отправляет изображение на сервер в виде URL-адреса данных. Затем сервер просто читает его, декодирует и сохраняет в файле (с произвольным именем) и возвращает URL-адрес этого файла клиенту. Затем в функции onreadystatechange загружается изображение с измененным именем. - person Aadit M Shah; 18.09.2011
comment
Я раньше не делал никаких сценариев на стороне сервера с помощью ajax. вот я и спрашиваю, какая из этих строк переименовывает имя файла изображения? request.setRequestHeader (тип контента, приложение/x-www-form-urlencoded); request.open(POST, saveDataURL.php, правда); request.send(dataURL= + canvas.toDataURL()); - person Faizan Tanveer; 18.09.2011
comment
Никто из них. Переименование выполняется на стороне сервера, и я добавил PHP-скрипт, который это делает. - person Aadit M Shah; 18.09.2011
comment
это не работает :(. Я поместил php-код в saveDataURL.php - person Faizan Tanveer; 18.09.2011
comment
Вам понадобится веб-сервер. PHP — это серверный скрипт. Установите Apache, PHP и MySQL на свой компьютер. Инструкции см. по следующей ссылке. - person Aadit M Shah; 18.09.2011
comment
У меня есть xampp в моей системе, и я использую localhost для доступа к странице и сохранения изображения! - person Faizan Tanveer; 18.09.2011
comment
Какую ошибку выдает? Предоставленный мной PHP-код не тестировался. Попробуйте предупредить responseText в html. Это, вероятно, даст вам сообщение об ошибке с трассировкой стека. - person Aadit M Shah; 18.09.2011

arrow_upward
2
arrow_downward

Получил это работает на 100%! Просто пришлось немного отладить приведенный выше ответ. Вот рабочий код:

JavaScript:

var saveDataURL = function(canvas) {
  var dataURL = document.getElementById(canvas).toDataURL();
  var params = "dataURL=" + encodeURIComponent(dataURL);

  var request = new XMLHttpRequest();
  request.open("POST", "/save-data-url.php", true);
  request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  window.console.log(dataURL);    

  request.onreadystatechange = function () {
    if (request.readyState === 4 && request.status === 200) {
      window.console.log(request.responseText);
    }
  };

  request.send(params);
}

/scripts/save-data-url.php:

<?php
  $dataURL = $_POST["dataURL"];
  $encodedData = explode(',', $dataURL);
  $encodedData = $encodedData[1];
  $decodedData = base64_decode($encodedData);
  file_put_contents("images/log.txt", $encodedData);
  file_put_contents("images/test.png", $decodedData);
  echo "http://www.mywebsite.com/images/test.png";
?>
person raspberryh    schedule 13.09.2012