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?
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.