1

I'm using the code from here:

to resize an image input which is working great. The problem is uploading the resultant image to my server. This is what I want to upload:

<img id="preview" name="img" src="blob:http://127.0.0.1:8081/5878134f-c042-4990-bc00-8e6f198f07f5">

Along with an id, passed in to the template. I'm using bottle.py server side and probably want a file upload via formdata but can't get it to work at all.

VLAZ
  • 26,331
  • 9
  • 49
  • 67
S1M0N_H
  • 109
  • 3
  • 9

1 Answers1

0

I can suggest you to convert your image into a base64 string and sent it to the server in this format.

There are a lot of methods to use to do this conversion, one of this is:

function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    var dataURL = canvas.toDataURL("image/png");
    return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}

var base64 = getBase64Image(document.getElementById("imageid"));

There are other method that can be better than this. It depends on your frontend framework.

Invictus
  • 426
  • 3
  • 13