Change image source

[lAndresul]

Hi, i change the image source dynamically, there is a method for that? because i always get this error:

vendor.js:1704 ERROR TypeError: Cannot read property 'replaceChild' of null at Croppr.createDOM (build/0.js:958) at Croppr.initialize (build/0.js:913) at HTMLImageElement.CropprCore.element.onload [as __zone_symbol__ON_PROPERTYload] (build/0.js:903) at HTMLImageElement.H (polyfills.js:3) at t.invokeTask (polyfills.js:3) at Object.onInvokeTask (vendor.js:4974) at t.invokeTask (polyfills.js:3) at r.runTask (polyfills.js:3) at e.invokeTask [as invoke] (polyfills.js:3) at p (polyfills.js:2)

[jamesssooi]

Hi @lAndresul, when are you changing the image source? Before, or after Croppr is initialized? Is it possible to delay instantiating the Croppr instance until after you have changed the image source?

[lAndresul]

Hi, after Croppr is initialized, let me explain what im trying to do, the user selects an image an do the crop, but if he/she change his mind, he/she can select another image an do the crop againg, so when the user select the new image im getting that error from top, i tried reset the Cropper instance also destroy but i always get that error, Also i wan to ask you how i can set an aspectRatio, i need specific dimensions, something like 600, 280, its that possible?

Thanks.

[jamesssooi]

There's no official API to change the image source (yet) after Croppr has initialised. Will definitely put that in a future release.

But right now here are some other possibilities:

1. You can hackily replace the image src and it seems like it would work just fine. You will need to change the src of two elements. Look at the img elements with the class name .croppr-image and .croppr-imageClipped.
2. Or alternatively, you can call the destroy() method to destroy the Croppr instance, which will revert back to the original HTML, then change the image source, and then initialize Croppr again.

---

As for your second question, what you need is to get the ratio of your desired width and height. So in your case it's 280 / 600 = 0.46667. This is your aspect ratio which you can pass to the aspectRatio option.

[muttineni2020]

James: thank you for providing this..

I am implementing in ionic, where I added image and cropped instance dynamically through .ts file. Also added cropmove function when ever I move crop area this all written after taking the camera. Now my question is how can I access cropped/changed crop region on my .ts file. Using crop move function I can able get event data but how can I access that event out side of the function.

Hope you understand the question. If not please let me know.

Again appreciate all your contributions.

[asqaria]

try this one: (instance).imageClippedEl.src = 'new_src'

[arturaugusto]

My promise based image grabler with Croppr solution ended as follow:

      var croppr
      const loop = () => {
        imageCapture.takePhoto()
        .then(blob => {
          img.src = URL.createObjectURL(blob);
          img.onload = () => { URL.revokeObjectURL(this.src); }

          if (!croppr) {
            croppr = new Croppr(img, {
            })
          } else {
            croppr.imageClippedEl.src = img.src
            croppr.imageEl.src = img.src
          }
        })
        .catch(error => console.error('takePhoto() error:', error))
        .finally(()=> {
          window.setTimeout(loop, 1000)
        })
      }
      loop()
    }