Extract code snippets from screenshots with Pieces

anushka-23g - Jan 13 '22 - - Dev Community

Rewriting code from screenshots you find online? A thing of the past.

tl;dr
Developers take a ton of screenshots of code which often live on their desktop or in some Finder tray. These screenshots are usually impossible to search and the code in the image isn’t accessible. But with the Pieces snippet saving tool, images can now be converted into text so that the code inside the screenshots can be copied, pasted, and edited in your IDE.

Image description

Drowning in screenshots?

Raise your hand if you’ve experienced these screenshot frustrations:

  • You face an issue while coding. A quick Google search gets you to a useful tutorial with it, so you take a screenshot and later retype the code into your editor manually.

  • You’re on Reddit and find a screenshot of useful code but you need to screenshot it or bookmark the page and now it’s effectively gone from your memory.

  • You see someone asking for help on a StackOverflow or FreeCodeCamp and want to try running their code, which turns out to be a screenshot.

  • You’re trying to follow a beginner’s guide to a new tech you’ve been wanting to learn, but you can’t easily copy the example code from the screenshots.

  • You struggle with searching text in screenshots

  • The common thread above is that screenshots with code aren’t searchable on your desktop and you can’t extract the code from inside the image.

Pieces extracts code from your screenshots

Pieces is a snippet-saving tool that performs magic on screenshots. You upload your screenshot to Pieces and turns it into an editable and copyable snippet.

Image description

And better yet - your screenshots become fully searchable based on the text inside them. Because let’s face it - you like have hundreds or thousands of screenshots sitting on your desktop and you have little to no way to search through them. So now you can search your screenshots based on:
Any keyword inside the screenshot
The code classification of the snippet inside the screenshot - i.e. all your Javascript screenshots
Structures inside your code - i.e. for loops or switch statements

Your Life Reimagined with Code Extraction from Screenshots Code in screenshots from Slack, Discord, Reddit, Twitter...

There’s code in screenshots everywhere you look online. But instead of having to manually re-write the in the screenshot, just upload the screenshot to Pieces and you’ll have a copyable code snippet extracted from the image!

Image description

Screenshots from Coding Bootcamps and Youtube Tutorials

If you’ve ever watched a coding tutorial or an online Coding Bootcamp, you know it can suck when the presenter moves through the code too fast. Hit pause on that video, take a screenshot, and save it to Pieces. Voila - the code inside the screenshot will be converted to text instantly!

Image description

Dealing with PDFs and hardcopies in university assignments

Scanned documents such as your university assignments need to be edited in order to finish and submit them. Sometimes you have their hardcopies or pdfs and editing them on your machine becomes a hassle. Use Pieces to convert your screenshots into formatted, copyable, editable text.
Utilizing information from a lecture
Ever run out of time during the class and snap a picture of the code rather than writing it down? No need to manually convert it later - just send that screenshot to Pieces and it’s converted.

Change your screenshot game today with Pieces

You can install Pieces for free and start turning your images and screenshots into meaningful text like magic. And Pieces does a ton of other amazing things for developers, including:

  • Auto-formatting your snippets

  • Auto-categorizing snippets by language

  • Auto-tagging the snippet with the things inside it like for loops or switch statements.

  • Auto-capturing the project and file name and line numbers that the snippet came from in your editor

  • Storing the URL that the snippet came from if you saved from a web page like StackOverflow

  • Enabling you to manually save related links to a snippet

All of this serves one critical purpose, making your life easy as a developer.
What are you waiting for? Get Pieces now and begin extracting code from screenshots! Try it out with these sample images!

Image description

Image description

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .