How to convert a Canvas image to a Buffered Image for Servlet Processing?

Question

I need to send a HTML-Canvas image from a Webpage to a Servlet for Image Processing. On my webpage, this will be done by uploading a jpg or png image and then clicking a process button.

My frontend is working (I can upload and display images), but I do not know how to send an image from a webpage to a server and vice-versa.

Can you please help me?

HTML: (img stored in canvas)

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

Would you like to see my answer and write me a feedback please. — Bharata, Aug 15 '18 at 05:42

score 2 · Answer 1 · answered Aug 13 '18 at 10:09

Unfortunately, not all browsers does support Canvas.toBlob() function. For example MS Edge and other browsers does not support it (see browser compatibility). Because of this we have to use Canvas.toDataURL() function.

I wrote for you the solution which does the same like normal sending a form from 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})
}

If you do not know how to save files on server side using JSP, please read:

How to upload files on server folder using JSP

score 0 · Answer 2 · answered Aug 10 '18 at 22:04

var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        var canvas = document.getElementById('canvas');
        canvas.toBlob(function(blob) { 
            var oReq = new XMLHttpRequest();
            oReq.open("POST", /*URL*/, true);
            oReq.onload = function (oEvent) {
              // Uploaded.
            };
            oReq.send(blob);
        },'image/jpeg', 0.95);

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

More information:CanvasElement toBlob and Sending Blob

I've went over your links, but am still confused as to what to put for the URL in the POST and GET statements. If my servlet is running in package 'com' in my eclipse project and takes/returns a BufferedImage, what do I put for the URL in the javascript file? — VKkaps, Aug 10 '18 at 23:24

How to convert a Canvas image to a Buffered Image for Servlet Processing?

2 Answers2