Using replace() to update image to be cropped in a reactJS component

[geekyme]

I have a ReactJS component and I handle the initialization, updating and destroying of the cropper tool in ReactJS's lifecycle methods: componentDidUpdate, componentDidUnmount

The problem I am facing is when i use cropper('replace', imageDataURL), the editor does not replace the image. It only works when I destroy the cropper and reinitializes it with the new image. However, that leads to terrible lag.

  var PicEditor = React.createClass({
    componentDidMount: function(){
      this.$el = $(this.refs.picture.getDOMNode());
      this.startCropper()
    },
    componentDidUpdate: function(prevProps, prevState){
      // this.$el.cropper('destroy');
      // this.startCropper()
      this.$el
        .cropper('reset', true)
        .cropper('replace', this.props.image);
    },
    componentWillUnmount: function(){
      this.$el.cropper('destroy');
    },
    startCropper: function(){
      this.$el.cropper({
        resizable: false,
        dragCrop: false,
        minCropBoxHeight: this.props.height,
        minCropBoxWidth: this.props.width
      });
    },
    handleSave: function(){
      var src = this.$el.cropper('getDataURL', {
        width: this.props.width,
        height: this.props.height
      }, 'image/png', 1)

      this.props.saveImage(src);
    },
    render: function(){
      return (
        <div className="sell-editpic">
          <img id="picture" ref="picture" src={this.props.image} />
        </div>
      )
    }
  })

[fengyuanchen]

You must offer a different image URL (or just add a timestamp). If not, the replace method will ignore it.

[geekyme]

hmmm this is strange. because I did offer a different image URL, however, both images are all base64 dataURL.

[fengyuanchen]

I didn't know how the reactJS work, so you may have to fix it by yourself.

[geekyme]

Ok well does your cropper work when I call replace() with base64 encoded data urls ?

On 7 Mar 2015, at 7:52 pm, Fengyuan Chen notifications@github.com wrote:

I didn't know how the reactJS work, so you may have to fix it by yourself.

—
Reply to this email directly or view it on GitHub #220 (comment).

[fengyuanchen]

Yes, URLs, Data URLs and Blob URLs all work.

[geekyme]

Ok I need a little more help in this area.

So right now I have the new picture in window.pic. It is a data URL.

My cropper is $('#picture').

Now if I do $('#picture').cropper('replace', pic), I do not see the new picture being inserted.

However, if I replace the image with a random image from the internet $('#picture').cropper('replace', 'http://4.bp.blogspot.com/-9EiFLKjWfzE/ULDI7nhQ0hI/AAAAAAAAAr4/cMuh16IHmeY/s1600/XSS_categorization_new.png') , I see that the picture has changed to that internet image.

And finally if I replace the internet image with $('#picture').cropper('replace', pic), I see my new picture being inserted.

However it appears I cannot simply add these 2 lines of code in my image updating function:

$('#picture').cropper('replace', 'http://4.bp.blogspot.com/-9EiFLKjWfzE/ULDI7nhQ0hI/AAAAAAAAAr4/cMuh16IHmeY/s1600/XSS_categorization_new.png')
$('#picture').cropper('replace', pic)

It does not appear to guarantee that pic is the final picture loaded. Please help.

[fengyuanchen]

In the current version, if you call replace method will a url the same as the image.

[geekyme]

will a url the same as the image.

Sorry this is confusing what do you mean? The dataURLs I supplied are both different. But .cropper() thinks they are the same and so they do not replace each other.