canvas画布保存到指定位置

Question

怎么把canvas画布作为图片保存到项目指定位置，目前实现了保存到本地

Answer 1

你可以使用 HTMLCanvasElement.toDataURL() 方法将 canvas 画布转换为图片。这个方法返回一个包含图片数据的 Data URL。然后使用 fetch 或 XMLHttpRequest 将 Data URL 上传到服务器，并在服务器上保存图片。

JavaScript 代码示例如下：

// Get the canvas element
var canvas = document.getElementById("myCanvas");

// Convert the canvas to a data URL
var dataURL = canvas.toDataURL();

// Setup a form data object
var formData = new FormData();
formData.append('image', dataURL);

// Use fetch to post the data to the server
fetch('/save-image', {
    method: 'POST',
    body: formData
});

服务器端示范：

var http = require('http');
var fs = require('fs');
var server = http.createServer(function (req, res) {
  if (req.method === 'POST') {
    var body = '';
    req.on('data', function (data) {
        body += data;
    });
    req.on('end', function () {
        var img = body.replace(/^data:image\/\w+;base64,/, "");
        var buf = new Buffer(img, 'base64');
        fs.writeFile('image.png', buf);
    });
    res.end("Image saved");
  }
});

当然,还有许多其他方法可以达到这个目的
比如使用 canvas.toBlob(callback, "image/jpeg", 1.0)
或者使用其他库对画布进行处理，比如 canvas-saver
服务器端可以使用框架如 Express,Hapi来处理上传的图片