Different crop results

[tpai]

First picture it works great.

But upload again, the result seems like been zoom in to upper left corner.

Any ideas?

[thedustinsmith]

I'm not seeing this problem. It might be something specific with the images that you're using. Would you mind providing them?

[tpai]

http://i.imgur.com/XWVS6rs.jpg

http://i.imgur.com/dPOMh3C.jpg

[thedustinsmith]

Thanks, I definitely see the problem now. Not sure what's causing it though. I'll dig into it when I have more time.

In the meantime, you maybe able to destroy the croppie instance and reinitialize it.

[Dhara-ZYMR]

Even I am facing the same issue with the latest version of Croppie, older version was working just fine.

[brunogaspar]

Same issue and seems related to the images it self.

If i save the exact same image with a bit less quality the issue arises.

[birdkiwi]

Issue also occurs when getting base64 result of viewport. Enabling enableOrientation options seems to have helped in my situation.

[sgehly]

Same issue here.

[nicolasvahidzein]

I have this issue too, even more so when i reload a second time the same image. Any ideas?

[enzeberg]

I find that the more times I use the croppie, the more likely it is to give wrong results. So, it is really helpful to destroy the croppie and reinitialize it after getting the cropping result every time.

[nicolasvahidzein]

Can you provide an example of this please? i'm suffering a lot with this. I'm using the vue.js version but same problems. I am setting it up as a tag in my code so not sure after that how to destroy it and recreate it. Your help is much appreciated.

[enzeberg]

@nicolasvahidzein
croppie_example.zip

[nicolasvahidzein]

Dear enzeberg, thank you, sadly i can't emplement this, i'm using the vue version of croppie and these dont work. I'm stuck for now, not sure what to do.

[enzeberg]

@nicolasvahidzein
Did you set the correct links to the files needed for the html file?

(You need to change the paths to the linked files in your own machine.)

First choosing file

Choose file

Click "设为头像” button to get the result

(After clicking the "设为头像" button, the croppie will be destroyed and reinitialized, and the "设为头像“ button will disappear.)

Second choosing file

Choose file

Click "设为头像” button to get the result

(The code works well in my computer.)

[nicolasvahidzein]

Yes my friend, i did. The css is and loading is fine. The problem is that i am using the vue-croppie version and it's a container for croppie but i'm not lucky, also i am passing the data from my webcam and then sometimes i get a bad result.

[enzeberg]

I'm sorry, friend. I have no idea about vue-croppie. In fact, I know very little about web development. (#...#)

[nicolasvahidzein]

Not a problem, thank you very much for all your help.

[arma2521]

I'm not good in English. but this would be help vue.js users.

1. don't use vue-croppie, use croppie instead.

install:
npm install croppie

import:

import Croppie from 'croppie'
import 'croppie/croppie.css'

2. in component file:

data () {
      return {
          croppieElm: null,
          cropped: null
}

3. in template:

<span id="croppieContainer"></span>
<img v-bind:src="cropped">
<button @click="rotate(-90)">Rotate Left</button>
<button  @click="rotate(90)">Rotate Right</button>
<button @click="crop()">Crop</button>
<input id="fileItem" type="file" @change="bindCroppie($event)">

4. in mounted():

mounted () {
      var div = document.createElement("div")
      document.getElementById('croppieContainer').append(div)
      this.croppieElm = new Croppie(div, {
          boundary: { width: 300, height: 300 },
          viewport: { width: 250, height: 200 },
          enableOrientation: true,
      });
      this.croppieElm.bind({
          url: 'http://i.imgur.com/Fq2DMeH.jpg',
      })
  }

5. in method:

    bindCroppie (event) {
        // destroy croppie
        document.getElementById('croppieContainer').innerHTML = ''
        this.croppieElm.destroy()
   
        // create new element for croppie
        var div = document.createElement("div")
        document.getElementById('croppieContainer').append(div)
        this.croppieElm = new Croppie(div, {
            boundary: { width: 300, height: 300 },
            viewport: { width: 250, height: 200 },
            enableOrientation: true,
        })
   
        this.croppieElm.bind({
            url: window.URL.createObjectURL(event.target.files[0]),
            zoom: 0.1
        })
    },
   
    crop() {
        let options = {
            type: 'base64',
            size: 'viewport',
            format: 'jpeg',
            circle: false
        }
        let vm = this
   
        this.croppieElm.result(options).then(function (output) {
            vm.cropped = output
        });
    },
    rotate(rotationAngle) {
        this.croppieElm.rotate(rotationAngle);
    }
   

[nicolasvahidzein]

You are mighty kind Arma, that was amazing!!!!!!!!!!!! Thank you so much. How do i give you a star or a million thumbs up? This worked perfectly. Thanks.

[brunogaspar]

Wouldn't it be wiser to improve the Vue component rather than saying to not use the Vue component?

/cc @jofftiquez

[jofftiquez]

@brunogaspar thanks for informing me.

[nicolasvahidzein]

@brunogaspar @jofftiquez

Hey Joff and Bruno,

Yes indeed it would be better but Joff here is very busy and we don't have the luxury to wait while we are designing an app as you must already know. I submitted many issues we are still waiting to hear back from.

If Joff has the time i'm still here to work with him on those but until then @arma2521 provide the perfect solution and the module now works like a charm.

The ball is in my friend's Joff court. On that note, Joff, any progress on what we discussed on gitter?

[brunogaspar]

@nicolasvahidzein Yup, i totally understand :)

I'm using a similar solution, but i'm still using the Vue component.

Basically, when the file get's selected i destroy and i re-initialize the croppie instance again (the same way it's being done without the Vue component)

onFileChange(event, instance) {
    var files = event.target.files || event.dataTransfer.files

    if (! files.length) {
        return
    }

    var croppieInstance = this.$refs[instance]

    croppieInstance.destroy()

    croppieInstance.initCroppie()

    croppieInstance.bind({
        url: window.URL.createObjectURL(files[0])
    })
},

The file input i'm using

<input id="file" type="file" @change="onFileChange($event, 'this-is-the-croppie-ref-name')" accept="image/*" />

So far, it's working as expected

[jofftiquez]

@nicolasvahidzein and @brunogaspar may we discuss in this in our gitter so we don't disturb this thread hehe. Thanks! I'm looking into it now.

[ry8806]

I'm getting this issue too, using version 2.5.0

having to destroy and re-init, instead of just passing a new image to "bind"

[Matotomax]

Yes, I would guess it is the same issue on both threads. And it turns out I am getting the issue too, version 2.5.0.

[MatthewAry]

Left is Croppie's output, Right is the original image. Taken from the demo site. Note how the resulting image is warmer than the original?

Also, when exporting a png with a circle crop, the alpha channel part of the image is a light, transparent grey, and not purely transparent pixels. See Below.

Lastly, on the circular crop, the aliasing of the circle can cause white pixels to show up on the edges of the circle.

This behavior was seen on: Chrome Mac Version 61.0.3163.100 (Official Build) (64-bit)
This is now an issue. See #434

[nakorndev]

I got like this problem in SweetAlert2 modal, If I put <img> DOM in swal() somehow and sometimes the result like this issues. But if I put <img> DOM into another element they're working as expect.

This is the problem of element or CSS cause this issues? I tried max-width: none !important; its doesn't works.

Sorry for my English by the way.

[thedustinsmith]

@MatthewAry Your issue is different from this issue. I'd recommend adding it to a new issue.

@nakorndev Same goes for you.

[MatthewAry]

@thedustinsmith Okay, I've made it a separate issue.

[genyklemberg]

I have the same issues with this picture if I try to zoom out: