: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)
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.