Canva_MarkEscape

A bookmarklet that lets you preview, copy, and download images from any website just by dragging them — no extensions or installations required.

Useful for pages that block right-click, normal dragging, or load images with CSS protections.

---

🚀 Installation

1. Open the file drag-inspector-bookmarklet.html in your browser

   You can also use the online version: https://Mounstroya.github.io/Canva_MarkEscape/drag-inspector-bookmarklet.html

2. Make sure your bookmarks bar is visible (Ctrl+Shift+B)
3. Drag the green 📷 Image Grabber button to your bookmarks bar

Done! You can now use it on any page.

---

🎯 How to use

1. Go to any page that contains images
2. Click the 📷 Image Grabber bookmark — a floating panel appears in the bottom-right corner
3. Drag any image from the page (you don’t need to drop it anywhere — the panel captures the event automatically as soon as you start dragging)
4. The panel shows:
   • ✅ An image preview with its real dimensions
   • 🔗 The direct image URL
   • Three action buttons (see below)
5. Click the bookmark again to close the panel

---

⚡ Available actions

Button	What it does
🔗 Copy URL	Copies the direct link to the clipboard
🖼 Copy image	Downloads the image and copies it as PNG (for pasting into Figma, Word, etc.)
⬇ Download	Downloads the original file with its real filename

---

🔧 How it works

Most websites block dragend and drop events to protect their images. This bookmarklet listens to the dragstart event in the capture phase at the document level, meaning it intercepts the event before the page can block it.

Also, when the dragged element is not directly an <img> (for example, a <div> with draggable="true" that contains an image inside), the script walks up the DOM tree to find the closest image and extract its src.

---

🌐 Compatibility

Browser	Works
Chrome	✅
Edge	✅
Firefox	✅
Safari	⚠️ Partial (Clipboard API restrictions)

Note about "Copy image": requires the server to allow CORS (Access-Control-Allow-Origin: *). If it’s blocked, the panel will indicate it and you can use "Copy URL" as an alternative.

---

☕ Was it useful?

If this bookmarklet saved you some time, you can buy me a coffee:

---

📄 License

MIT — use it, modify it, and share it freely.