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

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

4 голосов
/ 18 сентября 2011

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

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

и откройте созданное изображение с этим: 

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

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

Ответы [ 2 ]

3 голосов
/ 18 сентября 2011

Проще говоря, вы не можете.Когда вы вызываете метод 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";
2 голосов
/ 14 сентября 2012

Получил это работает 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";
?>
...