Clever Geek Handbook

Base64 encodes PNG to Blob

I was messing around with creating a Blob from a base64 encoded PNG ...

  final FormData formData = new FormData();
  final String base64Image = "data:image/png;base64,iVBORw0K<reduced the data.....>gg==";

  final Blob blob = new Blob([base64Image],"image/png");

  formData.append('file', blob, "android.png");

  req.send(formData);

I don't know what I am doing wrong, but the content of the blob is something but not a png. I wish it were.

thanks in advance...

[ Refresh ]

  final FormData formData = new FormData();
  final String base64Image = "iVBORw0KGgo<...reduce data...>kJggg==";

  // BTW: I used the Base64 from dart-sdk/io/base64.dart
  final List<int> intList = Base64.decode(base64Image);
  final Int8Array int8array = new Int8Array.fromList(intList);
  final String atobString = window.atob(base64Image);

  // Does not work
  // final Blob blob = new Blob([atobString]);

  // The same...
  // final Blob blob = new Blob([int8array]);

  formData.append('file', blob, "android.png");
  //formData.append('new-filename', "icon-share.png");

  req.send(formData);

I think the number of bytes generated by Base64.decode is ok. The file size was 1003 bytes and decoding also produces 1003 bytes.

[ Update 2 ] Here is the source I'm talking about: https://github.com/MikeMitterer/AndroidIconGenerator.DART/blob/master/test/src/restserver.dart

+3


source to share


2 answers


OK, here's the answer to my question:

import 'dart:convert'
...

test(' -> Upload File to REST-Server', () {

  final HttpRequest req = new HttpRequest();

  loadEnd(HttpRequest request) {
    if (request.readyState == HttpRequest.DONE) {

      switch(request.status) {

        case HttpStatus.HTTP_200_OK:
          expect(response['path'].endsWith("android.png"),true);

          break;

        case HttpStatus.HTTP_0_COMMUNICATION_FAILED:
          expect(request.status,HttpStatus.HTTP_200_OK);
          break;

        default:
          expect(request.status,HttpStatus.HTTP_200_OK);
          break;
      }
    }
  }

  req.open("POST", uriprovider.forUpload().toString());

  // REST returns JSON Data
  req.setRequestHeader('Accept', 'application/json');

  req.onLoadEnd.listen(expectAsync1((ProgressEvent e) => loadEnd(req)));

  final FormData formData = new FormData();

  final String base64Image = "data:image/png;base64,iVBORw0KG<code reduce for sample>RU5ErkJggg==";
  final String raw = "iVBORw0KG<code reduce for sample>RU5ErkJggg==";
  final String contenttype = "image/png";

  // Base64 is a modified version of dart-sdk/lib/io/base64.dart
  final List<int> intList = BASE64.decode(raw);
  final Int8Array int8array = new Int8Array.fromList(intList);

  // Converting to Uint8Array brought the solution!
  final Uint8Array uint8array = new Uint8Array(intList.length);

  // does not work!
  //var binary = window.atob(raw);

  final Blob blob = new Blob([uint8array]);

  formData.append('file', blob, "android.png");

  req.send(formData);

});


Thanks to everyone who is pushing me in the right direction!

0


source


The base64 (i.e. atob) url needs to be decoded before the Blob is encoded. It's easy! Try it!



0


source






More articles:


All Articles