HTML canvas 按下按钮时将 JPG 图像输出到服务器

Question

所以我有一个创建 canvas 的脚本，我想知道 html 页面上是否有一个按钮，单击它会保存 canvas在该页面上以 jpg 图像的形式发送到 Web 服务器。

<!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>

Answer 1

从我在评论中给出的主题来看，它给出了奇怪的结果。而且我不知道你是否坚持按钮是 <button> 而不是 <a>，我创建了一个解决方法让它看起来有效。

已编辑：

如果要保存图片到服务器。

改变

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

到

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

并且您可能需要在服务器端进行一些进一步的处理以将发布的数据保存到本地文件系统，就像我在 node.js 服务器中所做的那样：

// 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>

Answer 2

如果img的src不是crossOrigin可以利用canvas.toDataURL(),$.post()发送canvas的data URI到服务器，否则，将 img src 设置为 data URI 以防止错误

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/

HTML canvas 按下按钮时将 JPG 图像输出到服务器

HTML canvas output JPG Image to server when button is pressed

html

javascript

canvas

save