fix: update canvas size to avoid white space on result #9
Conversation
WalkthroughThe pull request modifies the Changes
Assessment against linked issues
The changes directly address the reported issue of extra white space in the cropped image by modifying the canvas dimension calculation. The implementation now appears to create a more precise crop that should eliminate unnecessary white space around the selected image area. Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/main/resources/META-INF/resources/frontend/src/image-crop.tsx(1 hunks)
🔇 Additional comments (1)
src/main/resources/META-INF/resources/frontend/src/image-crop.tsx (1)
92-93: LGTM! Canvas dimension calculation looks correct.
The new implementation properly handles high-DPI displays by scaling the canvas dimensions with the device pixel ratio, which should fix the white space issue.
| canvas.width = ccrop.width * pixelRatio; | ||
| canvas.height = ccrop.height * pixelRatio; |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Consider unifying the canvas dimension handling for both crop types.
The circular crop case immediately overrides the canvas dimensions without considering the pixel ratio, which could lead to inconsistent quality between regular and circular crops on high-DPI displays.
Consider applying this change:
- canvas.width = ccrop.width * pixelRatio;
- canvas.height = ccrop.height * pixelRatio;
+ const finalWidth = circularCrop ? ccrop.width : ccrop.width * pixelRatio;
+ const finalHeight = circularCrop ? ccrop.height : ccrop.height * pixelRatio;
+ canvas.width = finalWidth;
+ canvas.height = finalHeight;
if (ctx) {
ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
ctx.imageSmoothingQuality = "high";
ctx.save();
if (circularCrop) {
- canvas.width = ccrop.width;
- canvas.height = ccrop.height;
-
ctx.beginPath();Also applies to: 103-105
Close #7
Summary by CodeRabbit