Strange overlay issue

In my app I’m getting an issue when selecting large images, where the crop doesn’t match the highlight:

I have set:

.ReactCrop--image {
  max-width: 100%;
}

…and have tried all sorts of combinations for crop params. Also, how do I go about selecting the default selected crop to be either 100% of width (if portrait) or 100% of height (if landscape) and keeping the aspect ratio 1/1 (square)?

[DPr00f]

The library doesn’t have any code for upload. Although you could pick up the base64 and send it for S3. Take this as an example

  onCropComplete(crop) {
    this.previewImage(crop).then((canvasUrl) => {
        ApiActions.uploadBase64(canvasUrl, this.getDraftUploadFileName(true));
    });
  }

previewImage(crop) {
    return new Promise((resolve, reject) => {
      var img = new Image();
      img.setAttribute('crossOrigin', 'anonymous');
      img.onload = () => {
        var imageWidth = crop.originalWidth;
        var imageHeight = crop.originalHeight;

        var cropX = (crop.x / 100) * imageWidth;
        var cropY = (crop.y / 100) * imageHeight;

        var cropWidth = (crop.width / 100) * imageWidth;
        var cropHeight = (crop.height / 100) * imageHeight;

        var destWidth = cropWidth;
        var destHeight = cropHeight;
        var canvasWidth = cropWidth;
        var canvasHeight = cropHeight;

        if(crop.maxWidth || crop.maxHeight) {
          var scaledCrop = this.scale({
              width: cropWidth,
              height: cropHeight,
              maxWidth: crop.maxWidth * 2,
              maxHeight: crop.maxHeight * 2
          });

          // Scale the image based on the crop scale.
          var scaledImage = this.scale({
              scale: scaledCrop.scale,
              width: imageWidth,
              height: imageHeight
          });
          destWidth = scaledCrop.width;
          destHeight = scaledCrop.height;
          canvasWidth = scaledCrop.width;
          canvasHeight = scaledCrop.height;
        }

        var canvas = document.createElement('canvas');
        canvas.width = canvasWidth;
        canvas.height = canvasHeight;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, cropX, cropY, cropWidth, cropHeight, 0, 0, destWidth, destHeight);
        var canvasUrl = canvas.toDataURL('image/png');
        resolve(canvasUrl);
      }
      img.src = this.state.originalImageUrl;
    });
  }

scale(options) {
    var scale = options.scale || Math.min(options.maxWidth/options.width, options.maxHeight/options.height);

    scale = Math.min(scale, 100);

    return {
      scale: scale,
      width: options.width * scale,
      height: options.height * scale
    };
  }

Please note than my crop object contains the originalImageWidth and originalImageHeight so you need to workout those yourself, also it might contain a maxWidth and a maxHeight

and here’s my code for the upload of the base64

as an action I have

uploadBase64: function uploadBase64(base64, name = "test.png", type = "image/png") {
    ApplicationDispatcher.dispatch({
      actionType: ApplicationEvents.UPLOAD_BASE64,
      base64: base64,
      name: name,
      type: type
    });
  }

and in the store I have

uploadBase64(base64, name, type) {
    request.post('/api/sign/s3')
           .send({
             name: name,
             type: type,
             encoding: "base64",
             imageBinary: base64
           })
           .set('Accept', 'application/json')
           .end((err, res) => {
             if(this.hasError(err, res)) {
               this.emit(ApplicationEvents.FAILED_BASE64_UPLOAD, { name: name });
               return;
             }
             this.emit(ApplicationEvents.UPLOADED_BASE64, { name: name, url: res.body.url });
           });
  }

Let me know if you want the backend code as well, I’m happy to share it

[DPr00f]

If you’re doing cropping on the frontend you should really keep the image info.