Screenshot framing/device mockup image creation tool | ZeroTools

The screenshot device mockup creation tool adopts a simple architecture that loads an image in the user's browser and draws it on a canvas with specified fixed dimensions.

The core of this process is the 2D drawing context utilizing the HTML5 Canvas API. This tool is designed to output mockup images at a fixed resolution of 1200 pixels in width and 900 pixels in height.

When a user selects a screenshot image saved on their device, the image data is expanded in memory via the file reading API. However, rather than being drawn immediately upon upload, the rendering onto the specified coordinates on the Canvas is executed when the generate button is clicked.

This fixed-dimension Canvas approach generates an image based on the 1200x900 resolution. When the Canvas is generated, a drawing area of 1200 pixels in width and 900 pixels in height is first secured, forming a layer structure where the background, shadow, device frame, and screenshot image are sequentially overlaid.

In this process, a design is adopted where all processing is completed entirely in the client-side memory without sending image data to an external server.

However, depending on the browser cache and storage conditions, it is not intended for completely offline operation, but rather functions as a temporary image generation within the browser session.

Furthermore, when loading an image, it is specified to accept only a single image file, and does not include functions such as simultaneous loading of multiple images or batch processing.

As a result, the processing flow is consolidated into a single Canvas drawing pipeline, achieving stable image compositing.

Rather than using specific latest models or official product design templates as they are, this tool provides three generic device frames dynamically generated programmatically using the Canvas vector drawing functions: iPhone-style, MacBook-style, and monitor-style.

These frames are all drawn by combining basic path drawing methods and do not rely on external image materials. For example, when the iPhone-style frame is selected, a rounded rectangle measuring 340x680 pixels is drawn in the center of the Canvas, and a dynamic island-style black notch area is added at the top.

For the MacBook-style frame, a 700x430 pixel shape is drawn; in addition to the display area, a silver rectangle imitating a keyboard deck and trackpad is placed at the bottom, recreating the characteristic shape of a laptop.

For the monitor-style frame (740x440 pixels), a stand with a width of 90 pixels and a base portion with a width of 200 pixels are drawn beneath a large display frame, representing a desktop environment.

These frames merely imitate generic shapes and do not adhere to the exact dimensions of actual devices, official materials, or official design guidelines.

Additionally, a padding adjustment function is not implemented, and the screen area within the device frame is fixed according to the definition of each frame.

This simple drawing logic makes it possible to instantly generate a unified mockup frame for various screenshots.

The loaded screenshot image is drawn onto the screen area of the selected generic device frame. At this time, the original aspect ratio of the input image is not maintained, and it is specified to be completely stretched to fit the screen area rectangle.

Specifically, the input image is forcibly resized and drawn to 320x660 for the iPhone-style, 672x394 for the MacBook-style, and 716x404 for the monitor-style.

This processing is achieved by specifying the width and height of the screen area, in addition to the X and Y coordinates for drawing, in the Canvas API image drawing method.

Functions for adjusting the cropping position to fit the image within the frame or selecting a fit method to fill margins are not implemented.

Furthermore, for device frames where the corners of the screen area are rounded (such as the iPhone-style), clipping processing is applied so that the image does not protrude from the frame.

Specifically, the current state of the Canvas is saved just before drawing the image, and the clipping method is called after drawing the path of the screen area.

As a result, the screenshot image drawn subsequently is displayed only inside the defined path, and pixels outside the path are masked.

After the image drawing is complete, the saved state is restored to release the clipping state, controlling it so as not to affect subsequent drawing processes (such as adding a notch).

In this way, the combination of aspect-ratio-ignoring stretching and clipping ensures that the screen area of the device frame is completely filled without gaps, regardless of the dimensions of the input image.

The background of the mockup image is drawn in a way that fills the entire 1200x900 pixel Canvas. This tool provides three types of background settings: gradient, solid color, and transparent background.

When a gradient background is selected, a linear gradient from the top left to the bottom right is generated using the Canvas method.

Five types of color presets are defined in the tool in advance, and the start and end colors of the preset selected by the user are applied as the color stops of the gradient.

By setting this gradient object as the fill style and executing a rectangular drawing over the entire Canvas, a brightly colored background is drawn.

On the other hand, when a solid color background is selected, the HTML color code specified by the user from the color picker is directly set in the style, and the entire Canvas is filled in the same way.

When background transparency is selected, the fill processing is skipped after the entire Canvas is reset to a transparent state by the clear method executed when the Canvas is initialized.

As a result, the finally output PNG image retains the alpha channel (transparency information), generating a transparent background mockup that is convenient when overlaying and using it in other design tools.

Note that because these background drawing processes are executed as the very first step before drawing the device frame and screenshot image, a layer order that correctly places them behind subsequently drawn elements is guaranteed.

To give a three-dimensional effect to the device frame, this tool implements a drop shadow switching function. When the application of the shadow is enabled, the shadow property of the Canvas context is set just before drawing the device frame.

Specifically, a translucent black is specified for the shadow color, and a blur radius and vertical offset value are provided. This allows the Canvas API to automatically generate a shadow based on the shape of the drawn path, creating a visual effect as if the device were floating above the background.

The shadow generation relies on standard Canvas functions and does not perform detailed 3D perspective calculations such as light source angles or shadow spread.

Also, just before drawing areas where a shadow is unnecessary, such as when clipping and drawing a screenshot image or the internal screen of a MacBook-style frame, the shadow color can be made transparent.

However, it is not guaranteed that all shadow values will be completely reset across all branching paths. The padding state is unused, meaning there is no adjustment UI available for parameters.

By appropriately managing the state of the Canvas context in this manner, it generally achieves a mechanism that drops a natural shadow only on the outside of the generic device frame.

The shadow setting can be toggled on and off from the user interface, and if you prefer a flat design or want to add your own shadow later, you can generate an image in a clean state without a shadow.

The Canvas, upon which all drawing processes are completed, is finally exported as a single image file. A method that converts the Canvas into a Blob object is used for the export process, and the PNG format is specified as the MIME type.

This generates a PNG image with a fixed resolution of 1200x900 pixels. Output functions in other image formats such as JPEG or WebP are not implemented, nor are resolution upscaling or oversampling processes performed to guarantee high image quality.

The generated Blob object is converted into a temporary URL within the browser and functions as a preview display and download link.

Any change in settings will clear the previous export. When the user clicks the download button, the PNG image is saved locally with a filename that has a suffix added to the original filename.

The tool holds the image and generation results in the temporary state of the page, but the maximum Canvas resolution and memory space available for image decoding depend on the specifications of the executing browser and device.

Therefore, the behavior when processing an extremely huge input image may vary depending on the environment. Complete retention or deletion of EXIF data is not verified.

Also, since the output image is always 1200x900 pixels with a 4:3 aspect ratio, it does not have a function to automatically adjust to the image ratio recommended by specific platforms or the official App Store screenshot prescribed dimensions.

It does not support complex requirements such as text insertion or the simultaneous placement of multiple devices; it is designed specifically for the single purpose of stretching and fitting a single image into a generic device frame and outputting it as a fixed-dimension PNG.