munchschair
munchschair

Reputation: 1683

Am I encoding images in base64 correctly?

So I am sending a server I am working with a set of data in a json array. I am using stringify to do it. When I send the array without an image, it is sent successfully. However, the server requires that I send the image in base64 encoding.

So I did a bit of reading around and found out that I can use canvas to encode my image. However, I am getting a 500 Internal Server Error code. I know that the string is sending the base64 encoding because I have it the string printed to the console before it is sent. One thing I did try is taking the first few sets of characters out of the string, those that say something like "data:image png base64" or "data:image jpg base64". I know that I am correctly taking that out of the string when it prints to the console. Regardless of whether I include it or not, the server still sends me the error.

I am sending the string with ajax by the way. So here's the code I have that changes the code to base64. Here is a snippet of that code:

$(function()
{

    var file = document.getElementById("image_load").src;
    var draw = document.getElementById("image_load");
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.drawImage(draw, 0, 0);
    var picture= canvas.toDataURL();
    //picture = picture.replace(/^data:image\/(png|jpg);/, "");
    //picture = picture.replace(/^data:image\/(png|jpg);base64,/, "");
    //the first removes everything but base64 from the beggining of the string  



});



//500 (Internal Server Error)

//data:image/png;base64,

I can post some of the base64 encoding if that is helpful.

Upvotes: 1

Views: 875

Answers (1)

Uzbekjon
Uzbekjon

Reputation: 11823

"500 Internal Server Error code" - is a server side error. So, you should be looking for the problem on your server side. The receiving script is probably expecting your data in different json format.

Upvotes: 1

Related Questions