Question

I want to save my canvas into MySQL database (BLOB cell). I have function in javaScript

    function saveCanvas(){
    var canvas = document.getElementById("canvas");

    var dataURL = canvas.toDataURL("image/png");
    dataURL = dataURL.replace(/^data:image\/(png|jpeg);base64,/, "");    
    var req = $.ajax({
        url: "Canvases",
        type: "Post",
        data: "operation=0&sessionId=" + readCookie('sessionId') + "&title=" + document.getElementById('imageNameTextbox').value + "&pic=" + dataURL,
        success: function(){
        }
    });
}

Then I use Java to store my Image

BASE64Decoder decoder = new BASE64Decoder();

 byte[] pic = decoder.decodeBuffer(request.getParameter("pic"));
 CanvasController.AddCanvas(sessionId, new CanvasModel(0, 0, request.getParameter("title"), pic));

And inserting into database:

  String insertStatement = "INSERT INTO Canvas(userId, title, pic) VALUES (?, ?, ?);";
  prepStmt = connection.prepareStatement(insertStatement);
  prepStmt.setInt(1, id);
  prepStmt.setString(2, canvas.getTitle());
  prepStmt.setBytes(3, canvas.getPic());
  prepStmt.executeUpdate();

After running that I always get empty image in db. When I change image/png to image/jpeg and draw for example:

http://imageshack.us/photo/my-images/714/pobranec.jpg

I get:

http://imageshack.us/photo/my-images/15/pobrane2q.jpg

Can you tell what I’m doing wrong?

Answer 1

Your data string is not encoded properly, leading to corruption when the data’s received on the server and extracted from the post body. Change your data to this:

    data: {
       operation: 0,
       sessionId:  readCookie('sessionId'),
       title : document.getElementById('imageNameTextbox').value,
       pic: dataURL
    }

and let jquery handle the encoding for you.