Make picture from base64 on client-side

Issue

How to make a picture from a base64-string to send it to server by using HttpRequest.request?

For example, I have the following base64-string:

‘data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==’

Instead of sending it I would like to post a jpeg to server? Is it possible?

Solution

Convert Base64 to bytes
How to native convert string -> base64 and base64 -> string

Upload binary as image
Dart how to upload image
EDIT
(this is the server part, I have to look for the client part)

Client code:

  var request = new HttpRequest()
    ..open("POST", 'http://yourdomain.com/yourservice')
    ..overrideMimeType("image/your-imagetype") // might be that this doesn't work than use the next line
    ..setRequestHeader("Content-Type", "image/your-imagetype")
    ..onProgress.listen((e) => ...);

  request
    ..onReadyStateChange.listen((e) => ...)
    ..onLoad.listen((e) => ...)
    ..send(yourBinaryDataAsUint8List);

Convert to image:
I think you need to create a dataURL like show here How to upload a file in Dart?
and then use the created dataUrl as src in code like shown here How to load an image in Dart
see also Base64 png data to html5 canvas as @DanFromGermany mentioned in his comment on the question.

It may be necessary to convert List to Uint8List in between.
Please add a comment if you need more information.

Answered By – Günter Zöchbauer

Answer Checked By – Terry (FlutterFixes Volunteer)