Renaming an image created from an HTML5 canvas

Question

I have made a simple canvas and save it as an image. I have done this with the help of this code:

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

and pop up the created image with this:

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

But its name is always a weird one. I want to rename the image name like faizan.jpg etc. How can I do this?

Answer 1

To put it simply, you can't. When you call the toDataURL method on an HTMLCanvasElement it generates a string representation of the image as a Data URL. Thus if you try to save the image, the browser gives it a default filename (e.g. Opera saves it as default.png if the Data URL was a png file).

Many workarounds exist. The simplest one is to make an AJAX call to a server, save the image on the server-side and return the URL of the saved image which can then be accessed and saved on the client-side:

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());
}

To save the image on the server side, use the following PHP script:

$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";

Answer 2

Got this working 100%! Just had to do a little debugging to the above answer. Here's the working code:

The 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";
?>