**Created**:: [[2024-01-07 Sunday]]
**Link**:: https://youtu.be/uHFd0XoHRxE
**Duration**:: 9:34
# Summary
In this video, Zsolt introduces a new functionality in Excalidraw that allows users to easily crop images directly within the program, eliminating the need to use external tools. He demonstrates not only the basic cropping capabilities but also how to apply masks and add metadata to images used in canvas or markdown notes. This enhanced image manipulation feature provides greater flexibility and creativity for users in their visual knowledge management tasks.
# Key Takeaways
- Users can now crop images directly in Excalidraw without needing external cropping tools.
- The crop feature allows for the application of masks to create transparent or visible sections of images.
- Additional metadata can be added to images, enhancing their usability in drawings, canvas, or markdown notes.
# Content
Hey everyone, Jol here! I have a fantastic new functionality for you today. Did it ever happen to you that you found an image on the internet and you wanted to use it in Excalidraw for a drawing, or maybe on canvas, or maybe in a markdown note, but you didn't want the entire image? Maybe you just needed the head of the cat. So what did you do? Now, you take this image, you go outside of Obsidian, find the tool to crop the image, and then you bring it back. It’s a hassle! So now I have a solution for you. If I have an image here—and later on, I'll show you the same in a markdown note and on canvas as well—so stick around! If I now press Control + P, I can simply type in "crop image" and press Enter. You can see that here on the side, a cropping window opens. There was also a notice here telling me that this is a special Excalidraw window because this is used for image cropping. To get the basics of the cropping, I'm going to show you lots of special features here, so again, stick around because I have a lot in store for you. The basic functionality is I can simply crop the image; I can drag the sides in like this and I can select the head of the cat like this. When I come back to my image, it will refresh, and now I have the cropped head of the cat! [* ](https://youtu.be/uHFd0XoHRxE?t=0)
Now, I told you there's more! The next level where you can go with this cropping is that this is actually not only cropping, but you can add a mask to the image as well. A mask is a set of shapes that you can place on top of the image—black will black out the part. So I'm going to now place this black box here and change the background color to brown so you can see that the black box became a transparent area. I'm just going to show you that this is indeed transparent; you can see here that the Circle disappears and appears around that shape. Now, the trick is that this shape can, of course, be any shape. Let me just show you how it works: If I create a slightly bigger black box like this, and now I'm going to pull my crop a bit further in, like that, of course, if I come back, it would be completely empty. I can show you—but this is not so exciting because now I have an empty box. This is not what I want to show you. If now I draw a circle here and am going to make this circle white, so the black will make the part transparent, the white is going to make the part visible, and the shades in between are going to be semi-transparent. But if I now do this and come back here, you can see the end result is pretty cool! I cut out the two eyes of this cat! [* ](https://youtu.be/uHFd0XoHRxE?t=41)
Now let me show you two other uses of this and also, in that process, show you how you can use this on canvas and how you can use this in a markdown note. So first, let's open a canvas document. I'm now going to open a new canvas right here, and on this canvas, I'm going to add an image. I'm going to add my monkey PNG like that. I'm going to close this, and if I have my monkey here, I can simply again choose "crop image," and the image cropper opens! Of course, the same things will work, so I can simply crop and do the same actions as I did before, and you will see that here on canvas, the image was cropped. You can create circles and shapes! Now, the fun additional bit that is sort of a hidden functionality, or an unintended but very useful feature, is if I now write something around the image. So I'm now going to choose this white color and I'm going to write something here with large letters, so these are my notes about the image. I can even add white arrows! For example, I’m going to add this white arrow that points there, because white isn’t going to change the visibility of the image. I can also add maybe here that these are the eyes, like that, and so I can create this image where I have maybe a family photo and put arrows pointing who's who. But when I use it here, then nothing of this is visible! Now, of course, if I would make the arrow black and I would come back here, then you can see the black arrow. But if the arrow is white, then the arrow and the text around the frame are not visible. Why is this good? Because this way you can add metadata to an image that you're using in a drawing on canvas or maybe in the markdown note. [* ](https://youtu.be/uHFd0XoHRxE?t=77)
And then let me show you the final use case. Let's open now a new markdown document. So I'm just going to create this blank document right here and we're going to pick up a nice colorful image. I'm going to use this image and drop it in here. Let's make this into an embedded image! So now I have this beautiful color splash right here, and let me show you another cool trick that you can do. Let's close this here, come down here, and press Control + P and type in "crop image." So again, the image cropper opens; the same things are true as before. But now what I'm going to do is I'm going to draw this black rectangle here, crop my image like this, and maybe like this. Now what I’m going to do here is I'm going to add some white text, like this, and I'm going to type in "Hello World." Maybe we're going to use this font like this, and I'm going to make this as big as possible, like that. Now I guess you can imagine what we are going to see! Think about what you're expecting to see. You’re going to see the text with the color of the background right here! And of course, if I would go further and maybe I can add a rectangle and just make this rectangle have a white fill color but be transparent in border, then, if we come back, you can see that the fill shade of this rectangle will be reflected in the colors right there! So if I now would change this to, maybe like this, then you can see that now my "Hello World" follows that coloring! [* ](https://youtu.be/uHFd0XoHRxE?t=148)
That's all I wanted to show you today! You can convert images from your notes, from canvas, and from a drawing. You can crop the image, but you can go further because now you can add masks to the image. And what's really an additional bonus is you can actually add metadata to your image like this, or if you want, you can even turn over to markdown view mode, and here you can add even more metadata to the image as you would want. So, this is then an extended opportunity to add metadata. Bottom line is, with this new cropping functionality, you get much more than cropping; you can crop, you can mask, you can add metadata, and you can do this in Excalidraw, in your markdown notes, and on canvas. Enjoy! [* ](https://youtu.be/uHFd0XoHRxE?t=236)
# YouTube Details
## YouTube Description
📽️ ✏️ Sign up for the Visual Thinking Workshop: https://www.visual-thinking-workshop.com/
🚀 Cohort 7 starts on January 20, 2024. 📔 We will be summarizing The Practicing Stoic by Ward Farnsworth into a book-on-a-page
-----
The Excalidraw-Obsidian 2.0.15 update brings you Image Cropping and Masking superpowers to Excalidraw, Canvas, and Markdown Notes.
If you find my videos helpful, please say thanks by buying me a coffee: https://ko-fi.com/zsolt
📩 If you want to connect, you can reach me: (@zsviczian) on the Obsidian Members Group (OMG) on Discord, or on 🐦 Twitter: https://twitter.com/zsviczian
-----
[00:00](https://youtu.be/uHFd0XoHRxE?t=0) Intro
[00:45](https://youtu.be/uHFd0XoHRxE?t=45) Cropping
[01:47](https://youtu.be/uHFd0XoHRxE?t=107) Masking
[03:49](https://youtu.be/uHFd0XoHRxE?t=229) Use it with Canvas
[04:30](https://youtu.be/uHFd0XoHRxE?t=270) Adding image metadata
[06:19](https://youtu.be/uHFd0XoHRxE?t=379) Use it in Markdown notes
[06:33](https://youtu.be/uHFd0XoHRxE?t=393) Extreme masking
[08:33](https://youtu.be/uHFd0XoHRxE?t=513) Summary and closing thoughts
-------
🍿Watch next:
📽️ Visual Zettelkasten - using both sides of the sheet https://youtu.be/uoNHkCLsp3g
📽️ Deconstructing Visual Ideas with Obsidian Excalidraw using Excalidraw Scripts https://youtu.be/HRtaaD34Zzg
📽️ Block Reference Images https://youtu.be/yZQoJg2RCKI
📽️ The Fourth Font https://youtu.be/eKFmrSQhFA4
---------
Visual Thinking Workshop: https://www.visual-thinking-workshop.com/
Full catalog of videos: https://excalidraw-obsidian.online/Hobbies/Excalidraw+Blog/Catalogue+of+Videos
My blog: https://zsolt.blog/
Obsidian: https://obsidian.md
Excalidraw-Obsidian: https://github.com/zsviczian/obsidian-excalidraw-plugin/
2.0.15 Release Notes: https://github.com/zsviczian/obsidian-excalidraw-plugin/releases/tag/2.0.14
#excalidraw #sketchnotes #obsidianmd #pkm
## YouTube Transcript
[hey everyone jol here I have a fantastic](https://youtu.be/uHFd0XoHRxE?t=0) [new functionality for you today did it](https://youtu.be/uHFd0XoHRxE?t=4) [ever happened to you that you found an](https://youtu.be/uHFd0XoHRxE?t=7) [image on the internet and you wanted to](https://youtu.be/uHFd0XoHRxE?t=9) [use it in exol draw for a drawing or](https://youtu.be/uHFd0XoHRxE?t=11) [maybe on canvas or maybe in a markdown](https://youtu.be/uHFd0XoHRxE?t=14) [note but you didn't want the entire](https://youtu.be/uHFd0XoHRxE?t=17) [image maybe you just need the head of](https://youtu.be/uHFd0XoHRxE?t=20) [the cat so what did you do now you take](https://youtu.be/uHFd0XoHRxE?t=22) [this image you go outside of obsidian](https://youtu.be/uHFd0XoHRxE?t=25) [you find the tool to crop the image and](https://youtu.be/uHFd0XoHRxE?t=27) [then you bring it back it's a hassle so](https://youtu.be/uHFd0XoHRxE?t=30) [now I have a solution for you if I have](https://youtu.be/uHFd0XoHRxE?t=33) [an image here and later on I'll show you](https://youtu.be/uHFd0XoHRxE?t=36) [the same in a markdown note and on](https://youtu.be/uHFd0XoHRxE?t=39) [canvas as well so stick around if now I](https://youtu.be/uHFd0XoHRxE?t=42) [press contrl p i can simply type in crop](https://youtu.be/uHFd0XoHRxE?t=46) [image and press enter and you can see](https://youtu.be/uHFd0XoHRxE?t=49) [that here on the side a cropping window](https://youtu.be/uHFd0XoHRxE?t=52) [open there was also a notice here](https://youtu.be/uHFd0XoHRxE?t=55) [telling me that this is a special exol](https://youtu.be/uHFd0XoHRxE?t=57) [draw window because this is used for](https://youtu.be/uHFd0XoHRxE?t=60) [image cropping and to get the basics of](https://youtu.be/uHFd0XoHRxE?t=63) [the cropping I'm going to show you lots](https://youtu.be/uHFd0XoHRxE?t=67) [of special features here so again stick](https://youtu.be/uHFd0XoHRxE?t=69) [around because I have lots in store for](https://youtu.be/uHFd0XoHRxE?t=72) [you but the basic functionality is I can](https://youtu.be/uHFd0XoHRxE?t=75) [just simply crop the image I can drag](https://youtu.be/uHFd0XoHRxE?t=78) [the sides in like this and I can select](https://youtu.be/uHFd0XoHRxE?t=82) [the head head of the cat like this and](https://youtu.be/uHFd0XoHRxE?t=86) [when I come back to my image it will](https://youtu.be/uHFd0XoHRxE?t=89) [refresh and now I have the cropped head](https://youtu.be/uHFd0XoHRxE?t=93) [of the](https://youtu.be/uHFd0XoHRxE?t=97) [scat now I told you there's more so the](https://youtu.be/uHFd0XoHRxE?t=98) [next level where you can go with this](https://youtu.be/uHFd0XoHRxE?t=102) [cropping is this is actually not only](https://youtu.be/uHFd0XoHRxE?t=104) [cropping but you can add a mask to the](https://youtu.be/uHFd0XoHRxE?t=107) [image as well a mask](https://youtu.be/uHFd0XoHRxE?t=110) [is a set of shapes that you can place on](https://youtu.be/uHFd0XoHRxE?t=113) [top of the image black is going to black](https://youtu.be/uHFd0XoHRxE?t=117) [out the part so I'm going to now place](https://youtu.be/uHFd0XoHRxE?t=121) [here this black box and here I'm going](https://youtu.be/uHFd0XoHRxE?t=123) [to change the background color to Brown](https://youtu.be/uHFd0XoHRxE?t=126) [so you can see that that black box](https://youtu.be/uHFd0XoHRxE?t=129) [became a transparent area here so I'm](https://youtu.be/uHFd0XoHRxE?t=132) [just going to show you that this is](https://youtu.be/uHFd0XoHRxE?t=135) [indeed transparent that you can see here](https://youtu.be/uHFd0XoHRxE?t=137) [that that Circle disappears and](https://youtu.be/uHFd0XoHRxE?t=140) [appears around that shape now the trick](https://youtu.be/uHFd0XoHRxE?t=143) [is that this shape can of course be any](https://youtu.be/uHFd0XoHRxE?t=148) [shape so let me just show you how it](https://youtu.be/uHFd0XoHRxE?t=151) [works if I create a slightly bigger](https://youtu.be/uHFd0XoHRxE?t=153) [black box like this and now I'm going to](https://youtu.be/uHFd0XoHRxE?t=156) [pull my crop a bit further in like that](https://youtu.be/uHFd0XoHRxE?t=160) [like this of course now if I come back](https://youtu.be/uHFd0XoHRxE?t=165) [it would be completely empty so I can](https://youtu.be/uHFd0XoHRxE?t=168) [show you but this is not such uh so](https://youtu.be/uHFd0XoHRxE?t=171) [exciting because now I have an empty box](https://youtu.be/uHFd0XoHRxE?t=174) [but this is not what I want to show you](https://youtu.be/uHFd0XoHRxE?t=176) [if now I draw a circle here and I'm](https://youtu.be/uHFd0XoHRxE?t=179) [going to make this circle white so the](https://youtu.be/uHFd0XoHRxE?t=182) [black will make the part transparent the](https://youtu.be/uHFd0XoHRxE?t=186) [white is going to make the part visible](https://youtu.be/uHFd0XoHRxE?t=191) [and the shades in between are going to](https://youtu.be/uHFd0XoHRxE?t=194) [make are going to be](https://youtu.be/uHFd0XoHRxE?t=197) [semi-transparent but if I now do this](https://youtu.be/uHFd0XoHRxE?t=199) [and I come back here you can see the end](https://youtu.be/uHFd0XoHRxE?t=203) [result is pretty cool I cbed out the two](https://youtu.be/uHFd0XoHRxE?t=206) [eyes of this](https://youtu.be/uHFd0XoHRxE?t=210) [cat so let me now show you two other](https://youtu.be/uHFd0XoHRxE?t=211) [uses of this and also in that process](https://youtu.be/uHFd0XoHRxE?t=215) [show you how you can use this on canvas](https://youtu.be/uHFd0XoHRxE?t=218) [and how you can use this in a markdown](https://youtu.be/uHFd0XoHRxE?t=221) [note so first let's open a canvas](https://youtu.be/uHFd0XoHRxE?t=223) [document so I'm now going to open a new](https://youtu.be/uHFd0XoHRxE?t=227) [canvas right here and on this canvas I'm](https://youtu.be/uHFd0XoHRxE?t=231) [going to add an image I'm going to add](https://youtu.be/uHFd0XoHRxE?t=234) [my monkey](https://youtu.be/uHFd0XoHRxE?t=238) [PNG like that I'm going to close this](https://youtu.be/uHFd0XoHRxE?t=241) [and if I have my monkey here I can](https://youtu.be/uHFd0XoHRxE?t=244) [simply again choose crop image and the](https://youtu.be/uHFd0XoHRxE?t=247) [image Cropper opens and of course the](https://youtu.be/uHFd0XoHRxE?t=251) [same things will work so I can simply](https://youtu.be/uHFd0XoHRxE?t=255) [crop do the same actions as I did before](https://youtu.be/uHFd0XoHRxE?t=257) [and you will see that here on canvas the](https://youtu.be/uHFd0XoHRxE?t=261) [image was cobbed and you can do the same](https://youtu.be/uHFd0XoHRxE?t=265) [you can create circles you can create](https://youtu.be/uHFd0XoHRxE?t=267) [shapes now the fun additional bit that](https://youtu.be/uHFd0XoHRxE?t=270) [is sort of a hidden functionality or a](https://youtu.be/uHFd0XoHRxE?t=274) [an unintended but very useful feature is](https://youtu.be/uHFd0XoHRxE?t=278) [if I now write something around the](https://youtu.be/uHFd0XoHRxE?t=283) [image so I'm now going to choose this](https://youtu.be/uHFd0XoHRxE?t=286) [white color and I'm going to just write](https://youtu.be/uHFd0XoHRxE?t=288) [something here with large letter so](https://youtu.be/uHFd0XoHRxE?t=292) [these are my notes about the](https://youtu.be/uHFd0XoHRxE?t=295) [image and I can even add white arrows so](https://youtu.be/uHFd0XoHRxE?t=300) [for example I'm going to add this white](https://youtu.be/uHFd0XoHRxE?t=304) [arrow that points there because white is](https://youtu.be/uHFd0XoHRxE?t=307) [going to make it is not going to change](https://youtu.be/uHFd0XoHRxE?t=310) [the visibility of the image so I can](https://youtu.be/uHFd0XoHRxE?t=314) [also add maybe here that these are the](https://youtu.be/uHFd0XoHRxE?t=316) [eyes like that and so I can create this](https://youtu.be/uHFd0XoHRxE?t=320) [image where I have maybe a family photo](https://youtu.be/uHFd0XoHRxE?t=323) [and I can put arrows there pointing](https://youtu.be/uHFd0XoHRxE?t=327) [who's who but when I use it here then](https://youtu.be/uHFd0XoHRxE?t=329) [nothing of this is visible now of course](https://youtu.be/uHFd0XoHRxE?t=333) [if I would make the arrow](https://youtu.be/uHFd0XoHRxE?t=336) [black and I would come back here then](https://youtu.be/uHFd0XoHRxE?t=338) [you can see The Black Arrow but if the](https://youtu.be/uHFd0XoHRxE?t=340) [arrow is white then the arrow and the](https://youtu.be/uHFd0XoHRxE?t=343) [text around the frame are not visible](https://youtu.be/uHFd0XoHRxE?t=347) [why is this good because this way you](https://youtu.be/uHFd0XoHRxE?t=351) [can add metadata to an image that you're](https://youtu.be/uHFd0XoHRxE?t=353) [using in a drawing on canvas or or maybe](https://youtu.be/uHFd0XoHRxE?t=356) [in the markdown note and then let me](https://youtu.be/uHFd0XoHRxE?t=360) [show you the final use case let's open](https://youtu.be/uHFd0XoHRxE?t=363) [now a new markdown document so I'm just](https://youtu.be/uHFd0XoHRxE?t=366) [going to create this blank document](https://youtu.be/uHFd0XoHRxE?t=368) [right here and we're going to pick up a](https://youtu.be/uHFd0XoHRxE?t=371) [nice colorful image I'm going to use](https://youtu.be/uHFd0XoHRxE?t=374) [this image and drop it in here let's](https://youtu.be/uHFd0XoHRxE?t=378) [make this into an embedded](https://youtu.be/uHFd0XoHRxE?t=380) [image so now I have this beautiful color](https://youtu.be/uHFd0XoHRxE?t=384) [splash right here and let me show you](https://youtu.be/uHFd0XoHRxE?t=388) [another cool trick that you can do let's](https://youtu.be/uHFd0XoHRxE?t=392) [close this here let's come down here and](https://youtu.be/uHFd0XoHRxE?t=394) [press contrl p and type in crop image so](https://youtu.be/uHFd0XoHRxE?t=399) [again the image Cropper opens the same](https://youtu.be/uHFd0XoHRxE?t=403) [things are true as before but now what](https://youtu.be/uHFd0XoHRxE?t=405) [I'm going to do is I'm going to draw](https://youtu.be/uHFd0XoHRxE?t=409) [this black rectangle here I'm going to](https://youtu.be/uHFd0XoHRxE?t=412) [crop my image like this](https://youtu.be/uHFd0XoHRxE?t=416) [and maybe like this and I'm going to](https://youtu.be/uHFd0XoHRxE?t=421) [crop it like this and now what I'm going](https://youtu.be/uHFd0XoHRxE?t=425) [to do here is I'm going to add some](https://youtu.be/uHFd0XoHRxE?t=428) [white text like this and I'm going to](https://youtu.be/uHFd0XoHRxE?t=431) [type in hello](https://youtu.be/uHFd0XoHRxE?t=434) [world maybe we're going to use this](https://youtu.be/uHFd0XoHRxE?t=437) [font like](https://youtu.be/uHFd0XoHRxE?t=442) [this and I'm going to make this as big](https://youtu.be/uHFd0XoHRxE?t=445) [as](https://youtu.be/uHFd0XoHRxE?t=449) [possible like that and now I guess you](https://youtu.be/uHFd0XoHRxE?t=449) [can imagine what we are going to see](https://youtu.be/uHFd0XoHRxE?t=454) [think about what you're expecting to see](https://youtu.be/uHFd0XoHRxE?t=457) [you're going to see the text with the](https://youtu.be/uHFd0XoHRxE?t=460) [color of the background right here and](https://youtu.be/uHFd0XoHRxE?t=463) [of course if I would go further and](https://youtu.be/uHFd0XoHRxE?t=466) [maybe I can add here this rectangle and](https://youtu.be/uHFd0XoHRxE?t=469) [I'm going to just make this rectangle](https://youtu.be/uHFd0XoHRxE?t=472) [have a white fill color but I'm going to](https://youtu.be/uHFd0XoHRxE?t=476) [actually use](https://youtu.be/uHFd0XoHRxE?t=479) [this this fill like this and I'm going](https://youtu.be/uHFd0XoHRxE?t=483) [to make the Border color transparent and](https://youtu.be/uHFd0XoHRxE?t=487) [now if we come back then you can see](https://youtu.be/uHFd0XoHRxE?t=491) [that the feel shade of](https://youtu.be/uHFd0XoHRxE?t=494) [this rectangle will be reflected in the](https://youtu.be/uHFd0XoHRxE?t=497) [colors right there so if now I would](https://youtu.be/uHFd0XoHRxE?t=501) [change this maybe to like this then you](https://youtu.be/uHFd0XoHRxE?t=504) [can see that now my my Hello World](https://youtu.be/uHFd0XoHRxE?t=506) [follows that](https://youtu.be/uHFd0XoHRxE?t=510) [coloring so that's all I wanted to show](https://youtu.be/uHFd0XoHRxE?t=512) [you today you can convert images from](https://youtu.be/uHFd0XoHRxE?t=514) [your notes from canvas and from a](https://youtu.be/uHFd0XoHRxE?t=519) [drawing you can crop the image but you](https://youtu.be/uHFd0XoHRxE?t=522) [can go further because now you can add](https://youtu.be/uHFd0XoHRxE?t=525) [the masks to the image and what's really](https://youtu.be/uHFd0XoHRxE?t=527) [an additional bonus is you can](https://youtu.be/uHFd0XoHRxE?t=531) [actually add metadata to your image like](https://youtu.be/uHFd0XoHRxE?t=535) [this or if you would want you can even](https://youtu.be/uHFd0XoHRxE?t=539) [turn over to markdown View mode and here](https://youtu.be/uHFd0XoHRxE?t=543) [you can add even more metadata to the](https://youtu.be/uHFd0XoHRxE?t=547) [image as you would want so this is then](https://youtu.be/uHFd0XoHRxE?t=549) [an extended opportunity to add metadata](https://youtu.be/uHFd0XoHRxE?t=553) [bottom line is with this new cropping](https://youtu.be/uHFd0XoHRxE?t=556) [functionality you get much more than](https://youtu.be/uHFd0XoHRxE?t=559) [cropping you can crop you can mask you](https://youtu.be/uHFd0XoHRxE?t=561) [can add metadata and you can do this in](https://youtu.be/uHFd0XoHRxE?t=564) [excital in your markdown notes and on](https://youtu.be/uHFd0XoHRxE?t=567) [canvas enjoy](https://youtu.be/uHFd0XoHRxE?t=571)