Excalidraw-Obsidian 2.0.19: PDF Cropping

Summary

In diesem Video zeigt Jol, wie man in Obsidian Bilder aus PDF-Dokumenten abruft und in seine Notizen integriert. Er erweitert die Funktionen von Excalidraw, um PDFs zu unterstützen, was es ermöglicht, Bilder direkt aus dem Dokument herauszuschneiden und sie mit einer Verknüpfung zum Original zu pflegen. Zusätzlich wird gezeigt, wie man mit Markdown-Notizen und Excalidraw arbeitet, um die Seite direkt zu öffnen und Bilder zu schneiden. Es werden auch Tipps für die Anpassung des Hintergrunds und die Erstellung eigener CSS-Klassen gegeben, um die Lesbarkeit zu verbessern. Schließlich wird eine neue Funktion vorgestellt, die es ermöglicht, die Ecken von Bildern abzurunden.

Takeaways

• 📄 In Obsidian, capturing an image from a PDF and retaining its source link can be challenging.
• 🖼️ Durch die Erweiterung der Excalidraw-Funktion können Bilder aus PDF-Dokumenten gecroppt werden, ohne den Ursprungslink zu verlieren.
• ✂️ Die Bildbeschneidefunktion in Excalidraw ermöglicht es, genau die gewünschte Bildgröße zu erreichen.
• 🔍 Zusätzliche Funktionen wie das Maskieren von Bildteilen werden in Excalidraw unterstützt.
• 🔗 Doppelklick auf ein gecropptes Bild öffnet das PDF an der Seite, von der das Bild stammt.
• 📝 In Markdown-Notizen kann man die Seite eines PDF-Dokuments mithilfe von Seitennummern referenzieren.
• 🖌️ Die Bildbeschneidefunktion kann auch auf PDF-Seiten in Markdown-Notizen angewendet werden, wobei der Link zur Originalquelle erhalten bleibt.
• 📘 Kopieren und Einfügen eines Abschnittslinks aus einem PDF-Reader in ein Markdown-Dokument ermöglicht die präzise Auswahl und Bearbeitung von PDF-Inhalten.
• 🎨 In Excalidraw kann man PDF-Dokumente einbetten und aus diesen auswahlweise bestimmte Bereiche beschneiden.
• 🛠️ Neue Einstellungen in Excalidraw ermöglichen es, den Speicherort der gecroppten Bilder und das Präfix für Dateinamen zu definieren.
• 🖼️ Excalidraw bietet jetzt auch die Möglichkeit, Ecken von Bildern abgerundet darzustellen.

Q & A

Wie kann man ein Bild aus einem PDF-Dokument in Obsidian erfassen?

Man kann das Bild durch Bildschirmkopie erfassen, es einfügen und dann mit einem Namen versehen, um es mit der Quelle zu verbinden.

Was ist das Hauptproblem mit der Bildschirmkopie-Methode?

Das Hauptproblem ist, dass das Bild seine Verbindung zur ursprünglichen Quelle verliert.

Wie wurde das Problem der Bildquelle in der Excalidraw-Erweiterung gelöst?

Die Excalidraw-Erweiterung wurde so erweitert, dass sie PDF-Dokumente unterstützt und eine Beziehung zum Originalquellort beibehalten kann.

Wie öffnet man den Bildbeschneider in Excalidraw?

Man drückt Strg oder Command + P und tippt 'crop' ein, um den Bildbeschneider zu öffnen.

Was sind zusätzliche Funktionen des Bildbeschneidens in Excalidraw?

Es ist möglich, Teile des Bildes auszublenden, indem man die Maskierungsfunktion verwendet.

Wie kann man in einer Markdown-Notiz auf eine bestimmte Seite eines PDF-Dokuments verweisen?

Man kann eine Verknüpfung zur Seite erstellen, indem man '#page=X' hinzufügt, wobei X die Seitennummer ist.

Was passiert, wenn man auf das gecroppte Bild in Obsidian doppelklickt?

Man kann entweder den Bildbeschneider öffnen, um das Bild zu ändern, oder die ursprüngliche Datei an der Quelle öffnen.

Wie kann man einen Link zu einem Abschnitt eines PDF-Dokuments in Obsidian hinzufügen?

Man kann einen Teil des Textes aus dem PDF-Reader kopieren und als Link zur Sektion einfügen.

Wie kann man die Hintergrundfarbe eines gecroppten PDF-Bildes in Obsidian ändern?

Man kann die CSS-Klassen im Eigenschaften-Panel ändern, um die Hintergrundfarbe des Bildes anzupassen.

Was sind die neuen Einstellungen für das Bildbeschneiden in Excalidraw?

Man kann einen Ordner für die gespeicherten Cropping-Dateien festlegen und einen Präfix für die Dateinamen der Cropping-Dateien hinzufügen.

Was ist die neue Funktion in dieser Version von Excalidraw für Bilder?

Man kann jetzt die Ecken von Bildern abrunden, indem man im Eigenschaften-Panel 'abgerundete Ecken' aktiviert.

Outlines

00:00

📚 Verbesserte PDF-Bildauswahl in Obsidian

Der erste Absatz beschreibt ein Problem, das beim Kopieren von Bildern aus PDF-Dokumenten in Obsidian auftritt: Die Bilder verlieren ihre Verbindung zum Originalquell. Um dies zu lösen, wurde die Funktion 'Bild zuschneiden' von Excalidraw auf PDF-Dokumente erweitert. Der Benutzer kann nun ein Bild auswählen, es zuschneiden und direkt in Obsidian einfügen, wobei es immer eine Verbindung zum Ursprungsdokument beibehält. Der Absatz zeigt, wie man die Bildausschnittfunktion in Canvas und Markdown-Notizen verwendet und wie man die Originalposition des Bildes durch Doppelklicken auf das Bild öffnet.

05:00

🖼️ Anpassung von Hintergrundfarben und CSS-Klassen für PDF-Seiten

Der zweite Absatz konzentriert sich auf die Anpassung von Hintergrundfarben und CSS-Klassen für PDF-Seitenbilder in Obsidian. Es wird gezeigt, wie man die Lesbarkeit von Texten verbessert, indem man die Hintergrundfarbe ändert, und wie man benutzerdefinierte CSS-Klassen erstellt, um die Darstellung von PDF-Seitenbildern anzupassen. Des Weiteren werden neue Einstellungen für das Zuschneiden von Bildern und die Möglichkeit, runde Ecken für Bilder zu erstellen, vorgestellt.

10:03

🔧 Neue Funktionen und Einstellungen in Excalidraw für Obsidian

Der dritte Absatz präsentiert weitere Funktionen und Einstellungen in Excalidraw für Obsidian. Es wird erklärt, wie man die Zuschnitte von Bildern in einem bestimmten Ordner speichern kann und wie man Präfixe für die Dateinamen der Zuschnitte hinzufügt. Darüber hinaus wird eine neue Funktion vorgestellt, die es ermöglicht, die Ecken von Bildern abzurunden, was die visuelle Anpassung von Bildern in Obsidian erweitert.

Keywords

💡PDF-Dokument

Ein PDF-Dokument ist eine Datei, die zum Speichern von Dokumenten verwendet wird und von Adobe Systems entwickelt wurde. Im Video wird gezeigt, wie man ein Bild aus einem PDF-Dokument in Obsidian abruft. Dies ist relevant, da PDF-Dokumente häufig in der digitalen Dokumentverwaltung verwendet werden und das Skript die Verwendung von Obsidian zum Arbeiten mit solchen Dokumenten erläutert.

💡Bildausschnitt

Der Begriff 'Bildausschnitt' bezieht sich auf das Verfahren, ein Bild zu beschneiden oder zuzuschneiden, um nur den gewünschten Teil des Bildes zu zeigen. Im Video wird beschrieben, wie man mithilfe von Exol Draw Bilder aus PDF-Dokumenten ausschneiden kann, um sie für Notizen zu verwenden, ohne die Verbindung zum Originalverzeichnis zu verlieren.

💡Exol Draw

Exol Draw ist ein Tool, das in Obsidian integriert ist und es Benutzern ermöglicht, Bilder und PDF-Seiten zu bearbeiten und zu organisieren. Im Video wird gezeigt, wie man Exol Draw nutzt, um Bilder aus PDF-Dokumenten zu schneiden und sie mit ihren Quellen zu verknüpfen, was für die Organisation und Verwaltung von Informationen in Obsidian sehr nützlich ist.

💡Markdown-Notiz

Eine Markdown-Notiz ist eine Art von Textdatei, die spezielle Syntax verwendet, um Text zu formatieren, ohne dass HTML oder andere komplexe Markup-Sprachen erforderlich sind. Im Video wird erklärt, wie man eine Markdown-Notiz erstellt und wie man mit Exol Draw Bilder und PDF-Seiten in diese Notizen einbindet.

💡Bildverknüpfung

Eine Bildverknüpfung ist ein Verweis auf die Quelle eines Bildes. Im Kontext des Videos bedeutet dies, dass wenn ein Bild aus einem PDF-Dokument in Obsidian eingefügt wird, es weiterhin eine Verbindung zu der Seite im PDF hat, von der es stammt. Dies ermöglicht es Benutzern, leicht auf die Originalquelle zurückzuverfolgen.

💡Canvas-Knoten

Ein Canvas-Knoten ist ein Begriff, der in Obsidian verwendet wird und sich auf eine Art von Arbeitsbereich oder eine Seite bezieht, auf der man verschiedene Inhalte organisieren kann. Im Video wird gezeigt, wie man Bilder aus PDF-Dokumenten in einen Canvas-Knoten aufnimmt und wie man diese Bilder bearbeiten kann.

💡Bildbearbeitung

Bildbearbeitung ist der Prozess des Änderns oder Anpassens von Bildern. Im Video wird Exol Draw als Werkzeug zur Bildbearbeitung vorgestellt, das es Benutzern ermöglicht, Bilder aus PDF-Dokumenten zu schneiden und sie an ihre Bedürfnisse anzupassen.

💡CSS-Klasse

CSS-Klassen sind in der Webentwicklung verwendet, um Stilregeln für HTML-Elemente zu definieren. Im Video wird erklärt, wie man CSS-Klassen verwendet, um das Erscheinungsbild von Bildern in Obsidian anzupassen, beispielsweise indem man die Hintergrundfarbe von PDF-Seiten ändert.

💡Eigenschaftenpanel

Das Eigenschaftenpanel ist ein Werkzeug in Obsidian, das es Benutzern ermöglicht, verschiedene Einstellungen für Elemente wie Bilder zu ändern. Im Video wird gezeigt, wie man das Eigenschaftenpanel verwendet, um die Hintergrundfarbe von PDF-Seitenbildern zu ändern oder CSS-Klassen anzupassen.

💡Abgerundete Ecken

Abgerundete Ecken sind eine visuelle Eigenschaft von Bildern oder Rahmen, bei der die Ecken nicht scharf, sondern geschwungen sind. Im Video wird eine neue Funktion von Exol Draw vorgestellt, die es ermöglicht, Bilder mit abgerundeten Ecken zu erstellen, was das Design der Bilder in Obsidian anpassen kann.

Highlights

使用屏幕截图工具捕获PDF中的图像并粘贴到Obsidian中，但这种方法会失去与原始来源的连接。

通过命名约定可以间接引用图像的原始来源，但这不是最佳解决方案。

扩展了Excalidraw的图像裁剪功能以支持PDF文档。

在Canvas中，通过按Control或Command P并输入'crop'来打开图像裁剪工具。

裁剪工具允许调整图像大小并保留与原始PDF页面的链接。

双击图像可以打开裁剪工具或返回到PDF的原始位置。

在Markdown笔记中，通过添加'#'后跟页面号，可以直接打开PDF的特定页面。

在PDF阅读器中选择文本并复制链接到部分，然后在Markdown文档中添加该链接，可以实现对特定PDF部分的裁剪。

PDF文档中的透明背景可能会影响可读性，可以通过更改背景颜色来解决。

可以通过定义CSS类来自定义PDF页面的颜色背景。

在Excalidraw中嵌入PDF文档，可以滚动到特定部分并进行裁剪。

裁剪后的图像在Excalidraw中会自动更新。

新增设置允许指定裁剪文件的存储文件夹。

可以为裁剪文件添加前缀，以便更好地组织和管理。

新功能允许对图像的角落进行圆角处理。

裁剪功能非常强大，可以裁剪和遮罩图像，PDF页面保留对原始来源的链接。

自从实现这个功能以来，作者发现它在许多情况下都非常有用。

Transcripts

hey everyone jol here so when you're

reading a PDF document in obsidian what

do you do when there's an image that you

want to capture for your noes well what

I do is I start the screen capture tool

I select the image and then I press

paste and I have my image

here this solution is only sort of good

the main problem with this solution is

that this image has now lost its

connection to it original source of

course I can use a naming convention I

can give this image a name and with that

I can reference back to the source but

it is not really such a good

solution so I've extended the exol draw

image cropping feature to support PDF

documents this is how it works so for

example now I'm on canvas but I'm going

to show you the same VI an obsidian an

markdown note and with exol draw as well

so here I'm now in a canvas node and I'm

reading this PDF document I'm on this

active page and I want to capture this

image so all I need to do is press

control or command p and type in crop

and with this the image Cropper opens

and I can just simply drag from the top

and drag from the bottom I can also ra

from the side to make this image exactly

the size I want and with that I have the

cropped image here now if you're

interested the Cropper has additional

features so I recommend you watch my

other video on cropping for example I

can mask out parts of the image but

we'll talk about that in the other video

what I want to show you now is the big

difference here is when I double click

on this image then this menu opens and

here I can choose to either open the

Cropper so I can change the cropping of

this image or I can open the original

location of the file so when I click

here then my PDF opens on the page from

which I cropped the image now let me

show you how this feature Works in a

markdown note so let's create a new

markdown note and I'm just going to add

how to read a paragraph here so what

doesn't work is if I read a document

here I don't know which page you're on

so that unfortunately doesn't work what

does work is when you're on a page you

can add hash page equals for example 9

and with this the PDF document opens on

page nine so you can see the page number

right there that's the page number now

if I stand with the cursor on this line

so this line is the active line I can

again open the command pallet and choose

crop and mask image and it will take

this page and open it in the Cropper now

in the Cropper I can again just simply

do my cropping like this and when I'm

done then getting back to my document

you can see that it's now the image and

the image even has a link reference at

the bottom but of course if I double

click on the image then I can still open

the original file as well just as in

case of

canvas now to show you maybe a better

way of achieving this the way I would do

this is I would read a PDF document in

the PDF reader like here and when I get

to a page where I have an image that I

want to capture I would simply select a

part of the text from this page so I'm

now in the PDF reader I select a part of

the page and I copy a link to the

section like this and then I head back

to my markdown document and I simply add

this link to the section and after

adding the link to the section I can

open the Cropper and it will open that

section and again I can simply do my

cropping so you will see that I can crop

the image like this and like this now

what you will also

notice is this is hard to read or

sometimes hard to read so some of the

PDF documents have a transparent

background and there are two things that

it's good to know that you should know

about this first of all if you find this

hard to read you can always click here

and change the background

maybe to White and then the text will be

visible very nicely the other thing I

want to show you is here if I open the

properties panel you will see that I

have a special property here CSS classes

excal draw crob PDF page so if I remove

this then what you will see is when this

image refreshes so I will need

to change this and change it back then

this image will not have a background

color so you might or might not want

this what I want to highlight is here

you

can create or Define your own CSS

classes so if instead of white you want

a yellow background or whatever other

color for the page color of the PDF you

can change the CSS classes here here the

only thing is you need to refresh the

link so the CSS class is applied when

the image is

embedded and then finally let me show

you how this works in exol draw it works

pretty similar to the previous ones so

I'm going to add how to read a paragraph

as an embeddable so now I have the how

to read a paragraph document in embedded

into exol draw I

can oops I can click on this and I can

scroll to the part that I want to crop

so I'm here now if I press crop image

then this page opens and everything

works similar so I can just simply crop

this page like this and when I'm done

with cropping then I can turn back to

xolor draw my image is going to get

updated and here you go so I can now

close this and I can navigate with this

image there are two more small things

that I want to show you regarding

cropping and then there's one more thing

I want to show you as a new feature in

this version of excal obsidian so first

about cropping there are two new

settings that you can use setting number

one is under basic here there's a crop

file folder so the way exol draw crops

an image is it creates an image Cropper

so the image remains your PDF file

remains your PDF file so the cropping

will always read the PDF and create the

crop out of that or the cropped image

out of that but you might want to save

the ex call it draw cropping file to a

specified folder so if you set a folder

here then the cropping file will go to

that folder if not then the cropping

file will follow your files and links

settings so it's in my case it's going

to go in a sub folder under the current

folder called attachments so that's your

option that you can define a dedicated

folder for your crop files the other

setting I added is under saving and file

name and here you can add a prefix for

the crop file I now have cropped but

maybe you just want to add C or whatever

if this is empty then cropped will be

added or used so you can add an

underscore if you want to leave this

sort of empty that's another setting and

then finally the new feature I wanted to

show you is just a small new feature so

I'm going to insert an

image and I'm going to choose my lovely

monkey here so the new feature is now

you can round the corner of images so

here in the properties I can click

rounded corner and then the image will

have a rounded corner so if you like

rounded images now with an image you can

easily achieve that so that's all I

wanted to show you today I think this

cropping feature is really powerful you

can crop and mask images you can crop

and mask PDF Pages PDF Pages retain

their links to the original source and

overall since I've implemented this

feature I'm amazed at in how many cases

I've used it this is such a cool feature

I recommend you try it out and you play

with it enjoy thank you