alessiomaffeis / vue-picture-input

Mobile-friendly picture file input component for Vue.js 2-3 with image preview, drag and drop, EXIF orientation, and more

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

:crop="false" bug

rafuck opened this issue · comments

If crop=false sometimes image scales incorrectly. My fix at drawImage in the !crop branch:

        if (this.imageRatio > 1) {
          scaledHeight = scaledWidth / this.imageRatio
          if (scaledHeight > this.previewHeight){
            scaledHeight = this.previewHeight;
            scaledWidth  = scaledHeight * this.imageRatio;

            offsetX = (this.previewWidth - scaledWidth) / 2
          }
          else{
            offsetY = (this.previewHeight - scaledHeight) / 2
          }
        } else {
          scaledWidth = scaledHeight * this.imageRatio
          if (scaledHeight > this.previewHeight){
            scaledWidth  = this.previewWidth;
            scaledHeight = scaledWidth / this.imageRatio;

            offsetY = (this.previewHeight - scaledHeight) / 2
          }
          else{
            offsetX = (this.previewWidth - scaledWidth) / 2
          }
        }

Hi! First of all, thanks for contributing. Can you please provide an example of the issue? It would be awesome if you could attach some screenshots too! :)

Ok. Let's use this settings:

<picture-input width="800" height="240" :crop="false"  ...  ></picture-input>

And for example this image (446x335)
baraban
imageRatio = 446/335 = 1.33 > 1 and on resize in drawImage function we obtain:

// Initial values
scaledWidth = previewWidth = 800;
scaledHeight = previewHeight = 240;
// Calculated
scaledHeight = scaledWidth / this.imageRatio = 800/1.33 = 601.5;

So, our "scaled" height is greater than preview containers height, and in canvas we'll see croped image ,)

Also I have a few comments not related to this issue, but I dont know if it's convenient to bring them here

Thanks for the example, I will try to replicate the issue. :)
Are your comments related to the project? If that's the case, you can easily create a separate issue, otherwise, you can send me an email.

It should be fixed in v1.18.1, try it out! Let me know if it doesn't work, and I'll reopen the issue.