将Canvas元素转换为Image并存储在数据库中

Question

我想将图像存储到我的服务器端数据库中。一旦用户使用画布进行绘制并点击Submit按钮，Canvas元素应该转换为图像格式，然后我想将该图像存储到我的数据库中以供进一步使用。我可以使用此图像来验证用户下次访问我的网站时。

谁能帮我解决一下吗？我的服务器代码是用 Java Servlets

编写的

Answer 1

使用

Canvas.toDataURL()

将返回一个带有 Base64 编码的 PNG 的字符串。然后，您可以将其存储为普通文本或解码并另存为文件。要将其放回画布上，您只需将此字符串作为

Canvas.draw(source, 0, 0) method

的源传递即可

为您小提琴：http://jsfiddle.net/9a7Xd/

Answer 2

在撰写本文时，解决方案不再有效。 以下是有效的解决方案：

function canvasDraw(canvasCtx, base64Img) {
    let image = new Image();
    image.onload = function() {
        canvasCtx.drawImage(image, 0, 0);
    };
    image.src = base64Img;  
}