I have been building websites and small web tools for quite some time. While working on one of my own projects, I noticed a simple problem that many people face when they want to create a PDF from images, especially on a mobile phone.
It sounds simple: take a screenshot, upload it, and create a PDF.
But in practice, it is not always that simple.
When we take a screenshot on a phone, the screenshot can include things that we don't actually want in the final document. For example, the status bar at the top, the navigation area at the bottom, or some extra part of the screen.
Then the usual process becomes something like this:
Take screenshot → Open a crop app → Crop the image → Save it → Open a PDF app → Add the image → Create PDF
I thought there should be an easier way to do these small tasks without opening several different apps.
So I decided to build my own browser-based Image-to-PDF tool.
The first problem: unwanted parts of a screenshot
The first useful feature I added was Crop & Resize.
The idea was simple: after uploading an image, the user should be able to select only the part of the image they actually want to include in the PDF.
For example, imagine taking a photo of an object. The original image may contain a lot of unnecessary background.
In my case, I tested it with a photo of a glass.
The original image was much larger than the actual area I wanted to use. Instead of cropping the image in another application first, I wanted the user to be able to do it directly inside the Image-to-PDF tool.
So I added a crop interface where the user can select the required area and then apply the crop.
After applying it, only the selected portion of the image is used for the next step.
This may look like a small feature, but for someone creating a PDF from screenshots or photos, it removes one extra step from the workflow.
Making cropping useful on mobile
Because many people will use this type of tool from a phone, the crop interface also needed to be usable on a small screen.
The user needs to be able to see the image clearly, select the required area, and adjust it without having to leave the page.
The crop area is basically a selection over the image. Once the user applies the crop, the selected area becomes the new image content that can be used in the PDF.
This was important to me because I didn't want the user to have to download the image, open another app, crop it, save it again, and then come back to the PDF tool.
Then I noticed another problem: adding text
After adding the crop feature, I noticed another common situation.
Sometimes you don't just want to crop an image. You may also want to write something on it.
For example, you may want to add a name, label, heading, or some other short piece of information before putting the image into a PDF.
Normally, this means opening another image editing application.
So I added a basic Text Editor to the same tool.
Now the user can add text directly over the image. The text can be moved around, and basic options such as text size and color can be adjusted.
The goal wasn't to replace a full-featured image editor. I just wanted to provide the basic editing options that are actually useful while preparing an image for a PDF.
This keeps the workflow simple:
Upload → Crop → Add Text → Create PDF
Instead of switching between different applications.
Another small but useful feature: Rotate
Images don't always have the correct orientation.
Sometimes a photo is taken vertically when it needs to be horizontal, or it may simply be rotated in the wrong direction.
So I also added a Rotate option.
The user can rotate the image directly inside the tool before adding it to the PDF.
Again, it is a small feature, but it avoids another unnecessary step.
PDF page size and orientation
After dealing with the image itself, there is another part of creating a PDF: the page.
I wanted the tool to be useful for different types of documents, so I added options for common page sizes such as:
- A4
- A5
- Legal
- Letter
The user can also choose between Portrait and Landscape orientation.
This gives the user more control over how the final PDF should look instead of simply putting every image onto a fixed-size page.
What the final workflow looks like
The main idea behind the tool is to keep all these small tasks together.
A typical workflow can now look like this:
Upload an image → Crop or resize it → Rotate if needed → Add text if needed → Choose PDF size and orientation → Create the PDF
For someone who only needs to make a quick PDF from a screenshot or photo, this can save a lot of unnecessary steps.
Why I chose to build it in the browser
I wanted this to work as a web-based tool so that users don't have to install another application just for a simple task.
The interface is designed to work on mobile as well as larger screens.
I also wanted the experience to be straightforward. Upload the image, make the changes you need, and then create the PDF.
While building it, I learned that these seemingly simple features involve quite a few things behind the scenes.
For example, cropping an image is not simply about displaying a rectangle on the screen. The selected area has to correspond correctly to the actual image dimensions. Similarly, when an image is rotated, resized, or edited, the final output still needs to maintain the correct proportions when it is placed into the PDF.
These are the kinds of small details that become noticeable when you actually build and test a tool instead of just planning it.
What I learned from building this
One thing I have learned from building my own web tools is that a useful feature doesn't always have to be complicated.
Sometimes a small feature can solve a real problem.
In this project, Crop & Resize, Text Editor, and Rotate are not particularly complicated ideas by themselves. But putting them together with the PDF creation workflow makes the whole process more convenient.
I am a self-taught developer, and I learn a lot by building things myself, testing them, finding problems, and then figuring out how to solve them.
This project was another example of that process.
I didn't start with the idea of building a huge image editor. I simply wanted to make the process of turning an image into a PDF easier.
Then, as I used the tool and thought about the problems a user might face, I kept adding the features that actually made sense.
Try the tool
I built this tool as part of Indian Blog Help, where I create useful web-based tools and resources.
If you want to try the live Image-to-PDF tool, you can use it here:
I would also be interested to know what other small features people would find useful in this kind of tool.
Final thoughts
For me, the interesting part of building a web tool is not just getting it to work.
It is noticing a small problem in a normal workflow and asking:
“Can I make this easier?”
That was the main reason I built this Image-to-PDF tool.
Instead of using one app to crop an image, another to add text, another to rotate it, and another to create the PDF, I wanted to bring the useful parts of that workflow together in one place.
It is still a simple tool, but it solves a problem that I personally wanted to solve, and that is often how my projects start.
Top comments (0)