loading...

pastebox: Paste in an image, drag it out as a file

dtinth profile image Thai Pangsakulyanont ・3 min read

Abstract: Some applications lets you use drag in an image, but won’t let you paste it in. Others let you copy out an image but won’t let you drag it out. I made a tool to bridge that gap. As a result, it helps streamline my video editing process and makes it easier for me to communicate visually.


Many applications, both web and native, lets you drag in an image file, but won’t let you paste in an image. For example:

  • In Keynote, if you want to set an image as a slide background, you can drag an image file into the preview box… but you cannot paste in an image from the clipboard.

Screenshot

  • In iMovie (and Final Cut Pro X), you can drag in an image file, but you can’t paste in an image from the clipboard.

Screenshot

  • In DEV Community’s Markdown editor, you can drop an image into the “Choose Files” button to upload it, but you cannot paste it in.

Screenshot


At the same time, many applications lets you copy image data out, but wouldn’t let you do the same with drag-and-drop.

  • In Keynote, if you select multiple objects, you can copy it out as an image. You can then paste it into other applications as a transparent PNG. This is not possible with drag-and-drop (it moves objects within the slide only).

Screenshot

You can also copy out a whole slide as an image (you can drag it out as well, but you cannot drop it into web applications… they simply won’t recognize it):

Screenshot

  • In QuickTime Player, you can copy out a still image of the current video frame, and paste it into other applications. This is not possible with drag-and-drop.

Screenshot


So, there’s this disconnect between drag-and-drop and copy-and-paste. Bridging them together could potentially unlock a lot of use cases.

For example, I wanted to use Keynote to annotate my screencasts, which I edit in iMovie.

(I do own Final Cut Pro X, but I find it much more cumbersome to use. It is also much slower. It seems that my MacBook is not expensive enough to deserve Final Cut Pro 😢. But I digress.)

Screenshot

In theory this should work, but there’s a problem:

  • I can copy stuff out of my Keynote, but I couldn’t paste it into iMovie.
  • I can drag image files into iMovie, but I couldn’t drag things out of Keynote.

Screenshot


Now let me introduce pastebox

It is an Electron application that lets you to paste in an image, and then drag it out as a PNG file.

Screenshot

You can get it here:

GitHub logo dtinth / pastebox

An Electron app for macOS that lets you paste image data from an application and drag it out as an image file to another application

pastebox

An Electron app for macOS that lets you paste image data from an application and drag it out as an image file to another application.

Introduction post

Introduction video

Cover image

Usage

  1. Clone the repository

  2. yarn

  3. yarn build

  4. Open dist/mac/pastebox.app




I have not set up a release system yet, so you’ll need to compile and run from source code for now. If you want to help out, I would appreciate it a lot.


Bonus: Audio recording

My main motivation for creating this tool is to streamline my video production process, so pastebox also comes with a built-in audio recorder. It uses WebRTC’s noise suppression algorithm to automatically reduce noise.

Press the r key to start and stop recording. After recording is finished, press space to preview. Once you are satisfied, you can drag it out as a WAV file.

Screenshot


Conclusions

pastebox made it much easier for me to produce screencasts using the tools I’m already familiar with (Keynote and iMovie). It also made it much easier for me to communicate visually when using other apps.

I hope you find this useful, and thanks for reading!

Posted on May 1 by:

dtinth profile

Thai Pangsakulyanont

@dtinth

JavaScript musician???? CSS layout destroyer!!!!

Discussion

markdown guide
 

You should turn this into a browser extension for easy access! Great tool, makes life a lot faster for me.

 

Thanks! At first I tried to make it a normal web application, but failed. Doing this requires a file to be written to the host filesystem in order for file drag-out to work with all apps. It also requires access to native drag and drop API which is not exposed to the browser environment. Therefore, I couldn't implement it as a browser extension.