HTML canvas output JPG Image to server when button is pressed

Question

So I have a script that creates a canvas and I was wondering if there was anyway to have a button on the html page that when clicked it will save the canvas on that page to the web server as a jpg image.

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="400" height="200" style=" border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
window.onload = function(){
     var canvas = document.getElementById("myCanvas");
     var context = canvas.getContext("2d");
     var imageObj = new Image();
     imageObj.onload = function(){
         context.drawImage(imageObj, 0, 0);
         context.font = "40pt Calibri";
         context.fillText("My TEXT!", 50, 100);
         context.font = "20pt Calibri";
         context.fillStyle = 'red';
         context.fillText("Tesr", 50, 200);
     };
     imageObj.src = "Assets/Background2.png"; 
};
</script>

<button onclick="Saveimage"></button>

</body>
</html>

Take a look of [How To Save Canvas As An Image With canvas.toDataURL()?](http://stackoverflow.com/questions/10673122/how-to-save-canvas-as-an-image-with-canvas-todataurl) — fuyushimoya, Jul 11 '15 at 16:00
This saves it when the canvas is created. I need it to save the image when clicking a button — Anomous Person, Jul 11 '15 at 16:08

fuyushimoya · Accepted Answer · 2015-07-11T18:16:58.003

From the topics I gives in comment, it gives strange result. And as I don't know if you insist the button be <button> and not a <a>, I created a workaround to make it seems work.

Edited:

If you want to save Image to server.

Change

  // Create a hidden link to do the download trick.
  var a =document.createElement("a");
  a.setAttribute("href", image);
  a.setAttribute("download", "canvas.png");
  a.click();

to

  var post = new XMLHttpRequest();
  // I assume your web server have a handler to handle any POST request send to 
  // '/receive' in the same domain.
  // Create a POST request to /receive
  post.open("POST", "/receive");
  // Send the image data
  post.send(image);

And you may need some further process at your server side to save the posted data to local file system, like what I did in my node.js server:

// Handle POST from xxx/receive
app.post('/receive', function(request, respond) {
  // The image data will be store here
  var body = '';
  // Target file path
  var filePath = __dirname + '/testWrite/canvas.png';

  // 
  request.on('data', function(data) {
    body += data;
  });

  // When whole image uploaded complete.
  request.on('end', function (){
    // Get rid of the image header as we only need the data parts after it.
    var data = body.replace(/^data:image\/\w+;base64,/, "");
    // Create a buffer and set its encoding to base64
    var buf = new Buffer(data, 'base64');
    // Write
    fs.writeFile(filePath, buf, function(err){
      if (err) throw err
      // Respond to client that the canvas image is saved.
      respond.end();
    });
  });
});

var saveImgae = function() {
    var canvas = document.getElementById("myCanvas");
    var image  = canvas.toDataURL("image/png");
   
  // Create a hidden link to do the download trick.
  var a =document.createElement("a");
  a.setAttribute("href", image);
  a.setAttribute("download", "canvas.png");
  a.click();    
  
  // Not work for me. It download a file , but without file type and filename is simply download, maybe it works for someone.
   //  var image = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
  // window.location.href=image; // it will save locally
};

// This is just something like your onclick="saveImage()"
var button = document.querySelector("button");
button.onclick = saveImgae;


// Fakes , I just want to demo the click...
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

context.font = "40pt Calibri";
context.fillText("My TEXT!", 50, 100);
context.font = "20pt Calibri";
context.fillStyle = 'red';
context.fillText("Tesr", 50, 200);

<canvas id="myCanvas" width="400" height="200" style=" border:1px solid #d3d3d3;"></canvas>
<button id="save">Save image</button>

Is there anyway to save this to the server instead of downloading this? — Anomous Person, Jul 11 '15 at 17:23
How will server handle it, did you created a specfic url(like `/images`) that when I send a post request to it, it'll save what it get to your filesystem? — fuyushimoya, Jul 11 '15 at 17:28

guest271314 · Answer 2 · 2015-07-11T17:45:53.050

If src of img is not crossOrigin could utilize canvas.toDataURL() , $.post() to send data URI of canvas to server , else , set img src as data URI to prevent error

Uncaught SecurityError: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.

    window.onload = function () {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var button = document.getElementsByTagName("button")[0];
    var imageObj = new Image();
    imageObj.onload = function () {
        context.drawImage(imageObj, 0, 0);
        context.font = "40pt Calibri";
        context.fillText("My TEXT!", 50, 100);
        context.font = "20pt Calibri";
        context.fillStyle = "red";
        context.fillText("Tesr", 50, 200);
    };
    imageObj.src = "/path/to/image";

    button.onclick = function (e) {
        var data = canvas.toDataURL();
        var post = new XMLHttpRequest();
        post.open("POST", "/echo/html/");
        post.onload = function (e) {
            console.log(this.responseText)
        };
        post.send("html=" + encodeURIComponent(data));
    };
};

jsfiddle http://jsfiddle.net/4fdnd4ve/

_"What does the button code look like?"_ ? See post within `onclick` handler — guest271314, Jul 11 '15 at 17:09
Your code doesn't seem to be working. Is there anyway you can send me the entire html file because what I have doesn't work for me. As seen here [link](http://www.ufile.cf/Pay.html) — Anomous Person, Jul 11 '15 at 17:11

HTML canvas output JPG Image to server when button is pressed

2 Answers2