javascript - 如何将 Canvas 图像转换为用于 Servlet 处理的缓冲图像？

Question

我需要将 HTML-Canvas 图像从网页发送到 Servlet 以进行图像处理。在我的网页上，这将通过上传 jpg 或 png 图像然后单击处理按钮来完成。

我的前端工作正常(我可以上传和显示图片)，但我不知道如何将图片从网页发送到服务器，反之亦然。

你能帮帮我吗？

HTML:(存储在 Canvas 中的 img)

 <canvas id="canvas"></canvas>

JavaScript:

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {

        // Ajax Code here???

    }
  };
  xhttp.open("GET", ?, true);
  xhttp.send();

Answer 1

不幸的是，并非所有浏览器都支持 Canvas.toBlob() 函数。例如 MS Edge 和其他浏览器不支持它(参见 browser compatibility )。因此我们必须使用 Canvas.toDataURL()功能。

我为您编写的解决方案与正常从 HTML 发送表单一样:

var canvas = document.getElementById('canvas'),
    dataURL = canvas.toDataURL('image/jpeg', 0.7), //or canvas.toDataURL('image/png');
    blob = dataURItoBlob(dataURL),
    formData = new FormData(),
    xhr = new XMLHttpRequest();

//We append the data to a form such that it will be uploaded as a file:
formData.append('canvasImage', blob);
//'canvasImage' is a form field name like in (see comment below).
xhr.open('POST', 'jsp-file-on-your-server.jsp');
xhr.send(formData);
//This is the same like sending with normal form:
//<form method="post" action="jsp-file-on-your-server.jsp" enctype="multipart/form-data">
//    <input type="file" name="canvasImage"/>
//</form>

function dataURItoBlob(dataURI)
{
    var aDataURIparts = dataURI.split(','),
        binary = atob(aDataURIparts[1]),
        mime = aDataURIparts[0].match(/:(.*?);/)[1],
        array = [],
        n = binary.length,
        u8arr = new Uint8Array(n);

    while(n--)
        u8arr[n] = binary.charCodeAt(n);

    return new Blob([u8arr], {type: mime})
}

如果您不知道如何使用 JSP 在服务器端保存文件，请阅读:

• > How to upload files on server folder using JSP