☰

Paste Image Into tl;draw

12/19/2021, 11:52:14 AM

  1. // ==UserScript==
  2. // @name        Paste Image Into tl;draw
  3. // @namespace   Violentmonkey Scripts
  4. // @match       https://www.tldraw.com/
  5. // @grant       none
  6. // @version     1.1
  7. // @author      dutzi
  8. // @license     MIT
  9. // @description 12/19/2021, 11:52:14 AM
  10. // ==/UserScript==
  11.  
  12. window.addEventListener("paste", (e) => {
  13.   const file = e.clipboardData.items[0].getAsFile();
  14.   const reader = new FileReader();
  15.  
  16.   reader.onloadend = function () {
  17.     const src = reader.result;
  18.     const img = document.createElement("img");
  19.     img.src = src;
  20.     document.querySelector("#home").appendChild(img);
  21.  
  22.     let size = 1;
  23.  
  24.     img.style.height = "90vh";
  25.     img.style.width = "90vw";
  26.     img.style.position = "absolute";
  27.     img.style.zIndex = "-1";
  28.     const bounds = img.getBoundingClientRect();
  29.     img.style.left = window.innerWidth / 2 - bounds.width / 2 + "px";
  30.     img.style.top = window.innerHeight / 2 - bounds.height / 2 + "px";
  31.     img.style.objectFit = "contain";
  32.     img.style.transformOrigin = "50% 50%";
  33.  
  34.     function handleKeyDown(e) {
  35.       if (e.key === "-") {
  36.         size *= 0.975;
  37.         img.style.transform = `scale(${size})`;
  38.       }
  39.  
  40.       if (e.key === "=") {
  41.         size *= 1.025;
  42.         img.style.transform = `scale(${size})`;
  43.       }
  44.  
  45.       if (e.key === "Delete" || e.key === "Backspace") {
  46.         img.remove();
  47.         window.removeEventListener("keydown", handleKeyDown);
  48.       }
  49.     }
  50.     window.addEventListener("keydown", handleKeyDown);
  51.   };
  52.   reader.readAsDataURL(file);
  53. });