poor quality after cropping?

[jamesdixon]

Hi, I realize this isn't something to do with this addon specifically, but I'm curious if you've had any issues with images being of low quality after crop? I've seen a number of threads on this on the cropper.js repo, but oddly enough, the repo owner closes them without addressing the issue.

My code is fairly simple:

• Use ember-file-upload to upload the file as base 64.
• Use that as the source for cropper.
• In the cropper preview, the image looks flawless (top).
• On crop, the image is also exported as base 64 and that is used as the source for the "preview" to the user. In that preview, you can see that the image is of much less quality. The resulting file that's uploaded to the server is the same (bottom).

Note: the image uploaded in this screenshot was 2000x2000, so it's not an issue with the image being scaled up and losing quality.*

Here's my code:

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { debounce } from '@ember/runloop';
import { task } from 'ember-concurrency';
import File from 'ember-file-upload/file';
import config from 'scout-app/config/environment';

const FILE_UPLOAD_URL = `${config.APP.API_GATEWAY}/uploadFile`;

export default Component.extend({
  store: service(),

  editMode: false,
  sourceImg: null,
  croppedImg: null,
  mimeType: null,

  init() {
    this._super(...arguments);
    this.set('cropperOptions', {
      autoCropArea: 1,
      minCropBoxHeight: 125,
      minContainerHeight: 250,
      viewMode: 2,
      zoomable: false
    })
  },

  /**
   * Handles the actual cropping of the image.
   * @param {*} cropper
   */
  cropImage(cropper) {
    const croppedImg = cropper.getCroppedCanvas({
      imageSmoothingQuality: 'high',
      maxHeight: 300,
      fillColor: '#fff'
    }).toDataURL(this.get('mimeType'), 1);

    if (croppedImg) {
      this.set('croppedImg', croppedImg);
    }
  },

  /**
   * Uploads an image locally as base64 for preview.
   */
  uploadForPreview: task(function * (file) {
    try {
      file.readAsDataURL().then((url) => {
        if (url) {
          this.set('sourceImg', url)
          this.set('mimeType', file.get('type'))
        }
      });
    } catch (e) {
    }
  }).maxConcurrency(3).enqueue(),

  /**
   * Uploads an image to the server after it's been cropped (optional).
   */
  uploadToServer: task(function * () {
    // convert data to url to file
    const file = File.fromDataURL(this.get('croppedImg'));

    // set name of file since this is being read from a data url
    const fileName = `logo.${file.get('extension')}`;
    file.set('name', fileName);

    const options = {
      headers: {
        'Authorization': this.get('session.data.authenticated.token')
      },
      fileKey: 'fileData',
      data: {
        tags: JSON.stringify([{ name: 'scout:logo' }]),
        isAdmin: true
      }
    };

    try {
      // upload the file
      const response = yield file.upload(FILE_UPLOAD_URL, options);

      // push into local store
      const { body } = response;
      this.get('store').pushPayload(body);

      // retrieve an Ember data object of what we just got back from the server
      const { data } = body
      const logo = this.get('store').peekRecord('document', data[0].id);

      // get a reference to the current business
      const business = this.get('session.currentBusiness');

      // update the logo url
      business.set('preferences.brand.logoUrl', logo.get('url'));
      yield business.save();

      // if edit mode was on, set it to off
      this.set('editMode', false);
    } catch (err) {
      console.log(err)
    }
  }).maxConcurrency(3).enqueue(),

  actions: {
    crop(cropper) {
      debounce(this, this.cropImage, cropper, 100);
    },

    uploadForPreview(file) {
      this.get('uploadForPreview').perform(file);
    },

    uploadToServer() {
      this.get('uploadToServer').perform();
    }
  }
});

Thanks in advance for any input!

[ynotdraw]

Hey @jamesdixon,

We were doing the exact same as you - using ember-file-upload and base64ing. I don't see any issues with your code off the bat; however, I could be missing something. I think I remember an issue like this before, but can't remember exactly what options we passed to fix it. I think it was something like imageSmoothingQuality: 'high', and a combination of some of the width/height options as well. @jeannettetang @kturney @inscroggnito @qpowell may be able to chime in here!

[jamesdixon]

@ynotdraw thanks for the reply! Yeah, it's a bit strange. I was chatting with some people in this thread and created a non-ember fiddle to reproduce: https://jsfiddle.net/s8xfjwpv/1/. You can see that as soon as the image is read into the cropping window, it loses a bit of fidelity. It seems no matter what I do, the image is always of slightly worse quality than the original.