Cannot use base64 encoded data URL as img:src "as is"

[herom]

I found this library today and I got to find out that one cannot use a base64 encoded data URL as <img src={{image}}/> src attribute directly but one has to call this.$(this.get('cropperContainer')).cropper('replace', this.get('image')) from an observer or something the like to get things up and running...

Did I do something wrong or is this just missing in the documentation/readme?

[mhretab]

@herom you can actually use base64 encoded image as img:src. look at the dummy app for an example.

[herom]

Thanks for your answer @mhretab! In the dummy app, I can only see the {{image}} passed in as link ({{avatar-cropper image="assets/images/picture.jpg"}}). If I try the same thing with a base64 encoded dataURL which is updated within the code (no page-reload) I had to call the .cropper() on the container itself as otherwise the image would not show up...

image-cropper.js

{
  // ....
image: null,

onImageChanged: Ember.observer('image', function () {
    if (this.$() && get(this, 'hasImage')) {
      this.$(get(this, 'cropperContainer')).cropper('replace', get(this, 'image'));
    }
  })

// ....
}

cropper-container.js

{
  // ...
  _setupFileHandler: Ember.on('didInsertElement', function () {
    this.$('#image-file-input').on('change', Ember.run.bind(this, '_fileHandler');
  }),

  _fileHandler (event) {
    const context = this;
    const reader = new FileReader();
   
    reader.onload = function loadFile (event) {
       const dataURL = event.target.result;
       const image = new Image();

      image.onload = function loadImageData () {
        // ... some image preparation magic
        set(context, 'imageFile', image.src);
      };

      image.src = dataURL;
    };
  }
 // ...
}

cropper-container.hbs

<div class="header">Crop Image</div>
<div class="crop-body">
  <input id="image-file-input" type="file" accept="image/*"/>
  {{image-cropper image=imageFile}}
</div>

[RobbieTheWagner]

This is definitely an issue

[RobbieTheWagner]

Could we please fix this? @herom do you have a working fork?

[herom]

@rwwagner90 sorry, I don't have a working fork, just a workaround:

onImageChanged: observer('image', function () {
    const image = get(this, 'image');

    if (this.$() && image && image !== 'none') {
      let $cropperContainer = this.$(get(this, 'cropperContainer'));

      if (!$cropperContainer.data('cropper')) {
        this.initImageCropper();
      }

      $cropperContainer.cropper('replace', get(this, 'image'));
    }
  })

[RobbieTheWagner]

Thanks @herom works for me!

[OakBehringer]

live image preview doesn't work for me, even with this workaround. More problems with BASE64 encoded images. Sad.

[RobbieTheWagner]

@OakBehringer everything works for me with the workarounds mentioned. Could you elaborate on the issue or perhaps make a new issue and tag me?

[OakBehringer]

Hey! Sorry, but I can't. I uninstalled the addon and wrapped cropperjs on my own. Just don't have the time to get back into it. I can tell you that with a base64 encoded image, I the preview container wasn't working, i.e., while cropping the image, the preview didn't update. If I were to use a path to a file instead of base64, no other changes, it worked.

Best, Adam

[RobbieTheWagner]

Hmm, it all works for me!