image cropping - Githubissues

dwelle commented 2 years ago

Support cropping images, either before or after importing them onto canvas.

Suggested via chat (and I believe someone on twitter did as well).

Could be part of image post-processing support (https://github.com/excalidraw/excalidraw/issues/4235)

dimateos commented 1 year ago

This would be really useful.

I usually paste a lot of screenshot clips or varied photos in quick succesion for reference.
Then procede to edit/note them and I wish I could just crop a bit better some borders.
Right know I have to screenshot and clip it again and it may lose some of the original quality.

jwdinkel commented 1 year ago

CleanShot 2023-01-29 at 07 37 24

I'd like to understand if there's a way to make the images pasted into Excalidra crisp like on miro.com.

I find the images rather fuzzy and the text is not crisp.

For the example above, I pasted the same image from my clipboard into miro on the left and Excalidraw on the right. This is inside Obsidian on a mac M1. New installation.

The difference is very vislble at this zoom level, but even at 1:1 it looks too fuzzy for my liking on Excalidraw.

Hope it's just a setting, if it's deeper, I hope it can be fixed.

I saw the same issue on reddit without an answer: https://www.reddit.com/r/ObsidianMD/comments/xsedlz/excalidraw_imported_images_are_blurry/

I have not read all the details here yet: https://github.com/excalidraw/excalidraw/pull/4011

Apologies, this is day 2 of my journey with Excalidraw and Obsidian. Never used either before... So please bear with me while I learn and complain and repeat.. Thank you.

Added note: https://www.reddit.com/r/ObsidianMD/comments/orxipy/is_obsidian_good_for_imageheavy_usage/

Seems Obsidian may not be a good image solution. I wonder why they can't just store images in full resolution like DEVONthink or Miro. This will be a dead end endeavor for me if I can't paste a 4k image and make text annotations or draw on it.

PixelSnap 2023-01-29 at 08 19 20

A couple of experiments. In DEVONthink we can see the two tests. 1) Tested with a clipboard copy. Paste to DEVONthink creates a TIFF, but to Obsidian/Excalidraw it's a resized and compressed PNG. 2) Tested with a save to file. File shows correctly in Obsidian if I drag it there, but if I drag it into Excalidraw, it creates a PNG that is resized and compressed. DEVONthink even marks the files from Excalidraw as duplicates, and they do appear to be the same when I open the file in Finder.

I put all the files into DEVONthink to compare and the sizes and dimensions of each image are clearly reduced when using Excalidraw. So I'll leave my question here. Is there a setting I can change so that I can get the full resolution images, please?

Thank you.

Image from save to file system

Here's the original image attached so that you can see if you can find a way to make it save and display in Excalidraw properly. Thanks

ctwhome commented 1 year ago

Cropping images would be the perfect addition, manipulating screenshots outside makes it cumbersome. Google slides or Figma convert the resizing points into lines when cropping is activated:

karlhorky commented 1 year ago

I'd like to understand if there's a way to make the images pasted into Excalidra crisp like on miro.com.

I find the images rather fuzzy and the text is not crisp.

@jwdinkel Would you copy your comment above and report this in a separate issue? (this issue is about cropping, not about general image quality problems). Feel free to use my image / words below as well.

I have also noticed this phenomenon of quality loss of images (and also color shift) when images are uploaded to Excalidraw. Eg. check out this PNG screenshot of GitHub:

and the same image when it is inserted into Excalidraw:

Screenshot 2023-04-19 at 15 09 11

dwelle commented 1 year ago

The images are being compressed. We can try improve the compression, as well as increasing the size limits. But let's open a new issue for this and keep this one just to image cropping 🙏

wbm1113 commented 1 year ago

I have this crudely working:

What would be the best way to access the feature? My best thought was to hijack resizing; if you're holding ALT and you click the resize handles, it'll crop instead. Something about that approach smells bad, but I don't know what.

renderElement.drawElementOnCanvas also needs the original dimensions of the canvas before the crop started, as well as the cropped ratios (i.e. what percentage of the image you have cropped). I'd assume we would have to keep that in the ExcalidrawImageElement and mutate it in the crop event handler (similar to the resize functionality). Unless there's a better solution?

dwelle commented 1 year ago

My best thought was to hijack resizing; if you're holding ALT and you click the resize handles, it'll crop instead.

No, we shouldn't change the behavior of Alt. Besides it's not intuitive nor discoverable. We'll just put a button in the properties sidebar when the image is selected. It should enter a crop editor, similar to Figma's image crop editor.

renderElement.drawElementOnCanvas also needs the original dimensions of the canvas before the crop started, as well as the cropped ratios (i.e. what percentage of the image you have cropped). I'd assume we would have to keep that in the ExcalidrawImageElement and mutate it in the crop event handler (similar to the resize functionality). Unless there's a better solution?

Yes, we should keep the original image data intact, and probably use a clip mask for rendering. We can't modify or duplicate the imageData because a single image can be shared by multiple elements on scene using different crops.

For the excalidrawImageElement (in the elements array) itself, we'll store a crop: [xOffset, yOffset, width, height] or something like that.

karlhorky commented 1 year ago

@karlhorky in comment 1514711934: I have also noticed this phenomenon of quality loss of images (and also color shift)

Ah it appears the color shift issue (with dark mode) also has some explanation over here (although the author @anatoliibakhtin is actually reporting a different issue):

https://github.com/excalidraw/excalidraw/issues/5312

It is apparently caused by the color inversion:

@dwelle in comment 1157697888: we invert the colors using CSS, and then individually apply a counter filter on image elements

Also mentioned in #4616:

@dwelle in comment 1250112100: Not something we do by choice, but due to how our dark mode works right now.

I assume you're using Safari? On other browsers that support canvas filters we selectively invert the images back (the double invert isn't 100% accurate, but for now it seems serviceable).

So I opened 2 issues:

wbm1113 commented 1 year ago

I opened PR https://github.com/excalidraw/excalidraw/pull/6517 for this.

wbm1113 commented 1 year ago

Pardon my inexperience, but I think the PR is ready for review. I expected to see a button I could click to indicate that, or at least finish the testing steps, but I have no such option: