Remove a Strip From a Screenshot

Build and publish a browser tool that removes a strip from a screenshot.

Introduction

30 Second Summary

Long stitched screenshots often include a private prompt or an irrelevant block right in the middle. Normal cropping leaves you stuck because it only trims the edges.

In this project, you will build a single HTML page that uses the browser Canvas API to remove a strip from the middle of a screenshot. You will publish the finished tool with GitHub Pages for easy access from your phone.

What You'll Build

Your phone opens a browser tool that turns a cluttered stitched screenshot into a clean PNG with its unwanted middle section gone.

By the end of this project, you'll have:

A tool that lets you place a cut line across a screenshot to create a live joined preview with the unwanted horizontal strip removed.
A vertical mode that removes an unwanted column from a wide image with the same drag-to-cut workflow.
A downloadable PNG that preserves the screenshot at its expected dimensions with a clean seam.
Secret Mission: Add keyboard controls that nudge each cut handle one pixel at a time for precise seams.

Are there any prerequisites?

You need a browser plus a text editor. You also need a GitHub account for free static hosting.

You do not need an installation or an API key. The project costs $0.

Before We Start

Built-in cropping can only trim the edges of an image. Removing a private block from the middle needs a purpose-built page that runs in your browser.

A code editor gives you a place to write its single HTML file. A safe local screenshot gives you something to test without exposing personal content.

In this step, get ready to:

Confirm your modern web browser is ready.
Open your code editor for the HTML work ahead.
Prepare a safe local screenshot for testing.

Check your browser and code editor

The browser displays the finished tool. The code editor holds the page that powers it.

Keep this project page open in your modern web browser.
Open a new browser tab.
Close the blank browser tab.
Use your operating system's app search to find your code editor.
Select your code editor from the search results.

Good start. Your workspace is ready for the first file.

Prepare a safe test screenshot

A tall image makes a horizontal cut easy to judge. Visible details near the middle help you spot the joined seam.

Your computer may already contain a suitable screenshot. The two paths below lead to the same test image.

✔️ I have a safe screenshot

Choose a tall screenshot with visible content across its full height.
Check the screenshot for private messages or account details.
Use Finder on macOS or File Explorer on Windows to move the screenshot to your Desktop.
Double-click the screenshot on your Desktop to open it.

ⓧ I need a safe screenshot

Return to this project page in your browser.
Use your computer's built-in screenshot tool to capture a tall section of the page.
Check the captured image for private messages or account details.
Use Finder on macOS or File Explorer on Windows to move the captured image to your Desktop.
Double-click the captured image on your Desktop to open it.

Your image should contain clear details across its full height. Its middle should give you an obvious place to test the cut.

Why Keep the Image Local?

The finished tool processes every pixel inside your browser. Nothing needs to leave your device.

A screenshot without private information also keeps your later project checks safe to share.

Verify your starting kit

Before you make the final check, do you expect a cut through the middle of this image to be easy to spot?

Confirm your browser still shows this project page.
Confirm your code editor remains open.
Switch to the image viewer showing your test screenshot.
Inspect the middle area for clear details.

You should be able to reach every part of your workspace without setting anything else up.

The middle of your screenshot should contain enough detail for a missing strip to be obvious.

That is your starting kit complete. Your browser, editor, and safe test image are ready.

Your workspace is ready. Next, you'll create the HTML page that draws your screenshot onto a canvas.

Load an Image onto the Canvas

Long screenshots can contain a private prompt or an irrelevant block in the middle. Edge-only cropping leaves that section trapped between the parts you want to keep.

The browser's Canvas API gives an HTML page a pixel-based drawing surface. A file picker can pass a screenshot to that surface directly on your device.

In this step, you will create the local page. You will draw a selected screenshot onto its canvas without uploading the file.

In this step, get ready to:

Create an index.html page with an image file picker and a canvas.
Read a selected image inside the browser.
Draw the screenshot onto the canvas at its natural dimensions.

Create the page shell

The page shell provides two parts of the tool. The file picker receives your screenshot while the canvas provides the drawing surface.

Press Cmd+Space on macOS or the Windows key on Windows to open your search bar.
Type the name of your code editor and press Enter to open it.
Use the new-file control in your code editor's file menu to create a blank document.
Save the document to your Desktop as index.html.
Build the page shell by replacing the blank document with this code:

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Screenshot Strip Cutter</title>
</head>
<body>
  <h1>Screenshot Strip Cutter</h1>
  <!-- The picker accepts local image files. -->
  <label for="imageInput">Choose a screenshot</label>
  <input id="imageInput" type="file" accept="image/*">

  <!-- The selected screenshot is drawn here. -->
  <canvas id="canvas"></canvas>
</body>
</html>

What does this code do?

The page metadata gives the browser the document title and responsive viewport settings.
The file input accepts local image files through the image/* value.
The imageInput identifier gives the script a way to find the picker later.
The canvas identifier points to the surface where the screenshot will appear.

Save index.html.
Locate index.html on your Desktop using Finder on macOS or File Explorer on Windows.
Double-click index.html to open it in your browser.

You will see the Screenshot Strip Cutter heading with a file picker underneath. This confirms that your local page is open in the browser.

Page not opening correctly?

Check that the file is named index.html. A text-file extension after the name stops the browser from treating it as a web page.

Compare the opening and closing HTML tags if the page is blank. Help me find why my local HTML page is blank.

Read and draw the screenshot

The picker exposes only the file that you select. JavaScript can read that file into memory before drawing it onto the canvas.

Return to index.html in your code editor.
Find the closing </body> line near the bottom of the file.
Add the image-loading script immediately above that line by copying this code:

<script>
  // Link the picker to the canvas drawing surface.
  const imageInput = document.getElementById("imageInput");
  const canvas = document.getElementById("canvas");
  const context = canvas.getContext("2d");

  imageInput.addEventListener("change", () => {
    const file = imageInput.files[0];
    if (!file) return;

    // Read the selected file inside the browser.
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      const image = new Image();
      image.addEventListener("load", () => {
        // Keep the canvas at the screenshot's natural dimensions.
        canvas.width = image.naturalWidth;
        canvas.height = image.naturalHeight;
        context.drawImage(image, 0, 0);
      });
      image.src = reader.result;
    });
    reader.readAsDataURL(file);
  });
</script>

How does the image reach the canvas?

The change listener runs after you select a file from the picker.
The FileReader reads the selected file inside the browser. No upload request is made.
The image load listener waits until the browser has decoded the screenshot.
The naturalWidth and naturalHeight values preserve the screenshot's natural dimensions.
The drawImage() call paints the decoded screenshot from the canvas's top-left corner.

Save index.html.
Return to the local page in your browser.
Refresh the page to load the new script.

Before you choose the screenshot, do you expect the canvas to keep its default size or expand to match the image?

Select the Choose a screenshot file picker.
Choose your local test screenshot in the file dialog.
Confirm the file selection.

You will see the screenshot drawn below the picker. The canvas expands to the image's natural width and height.

That is your first working result. Your browser can now turn a local screenshot into canvas pixels for the cutting controls you add next.

Why does the image stay private?

The file picker gives the page access only to the screenshot you select. FileReader processes its contents in your browser's memory.

This page contains no upload request or server connection. The screenshot stays on your device.

Screenshot not appearing?

Check that the script sits above </body>. Confirm that imageInput and canvas match the identifiers in the page shell.

Refresh the browser after saving the file. Help me debug why my selected image is not drawing on the canvas.

Checkpoint

Local browser tool page created with an image file picker and a canvas. Selected image files are read locally and drawn onto the canvas.

✔️ Awesome, I've got everything!

Your index.html file is saved. Your local browser page now draws the selected screenshot onto its canvas.

ⓧ I'd like to double check the full code

Compare your saved index.html file with this complete version.

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Screenshot Strip Cutter</title>
</head>
<body>
  <h1>Screenshot Strip Cutter</h1>
  <!-- The picker accepts local image files. -->
  <label for="imageInput">Choose a screenshot</label>
  <input id="imageInput" type="file" accept="image/*">

  <!-- The selected screenshot is drawn here. -->
  <canvas id="canvas"></canvas>
  <script>
    // Link the picker to the canvas drawing surface.
    const imageInput = document.getElementById("imageInput");
    const canvas = document.getElementById("canvas");
    const context = canvas.getContext("2d");

    imageInput.addEventListener("change", () => {
      const file = imageInput.files[0];
      if (!file) return;

      // Read the selected file inside the browser.
      const reader = new FileReader();
      reader.addEventListener("load", () => {
        const image = new Image();
        image.addEventListener("load", () => {
          // Keep the canvas at the screenshot's natural dimensions.
          canvas.width = image.naturalWidth;
          canvas.height = image.naturalHeight;
          context.drawImage(image, 0, 0);
        });
        image.src = reader.result;
      });
      reader.readAsDataURL(file);
    });
  </script>
</body>
</html>

Your screenshot now lives on a local canvas at its natural dimensions. Next, you will place a horizontal cut line across the exact part you want to remove.

Place a Horizontal Cut Line

Your page already loads a local screenshot onto a canvas. The next piece is a marker that tells the tool where the future cut begins.

The browser's Canvas API keeps a drawing size that can differ from the canvas size on screen. This step maps each click to the correct image coordinate before drawing the horizontal line.

In this step, get ready to:

Map a canvas click to the screenshot's vertical coordinate.
Keep horizontal-cut mode active while the image is displayed.
Render the selected cut line across the full image width.

Map clicks to image coordinates

A screenshot can contain more pixels than the displayed canvas. The click position needs the same scale as the image data so the line lands under the pointer.

How should the interaction work?

Horizontal-cut mode is the active mode for this version of the tool.
The pointer's displayed vertical position is scaled to the canvas drawing height.
The selected position stays within the top and bottom edges of the image.
Each redraw paints the screenshot first. It paints the horizontal cut line second.

Open index.html in your code editor.
Locate the existing script that draws a selected image onto the canvas.
Extend that script with click-to-place horizontal cut-line behavior using the interaction rules above.
Save index.html.
Return to the browser tab from earlier.
Refresh the local page.
Select your test screenshot with the file picker.

You'll see the screenshot fill the canvas just as it did before. This confirms the existing local image workflow still works.

Screenshot no longer appearing?

Confirm that the new interaction uses the canvas from the existing image-loading script. Check that the image still draws before the cut line.

Look for an unmatched bracket or parenthesis near the new click behavior.

Ask for help with the script changes.

Verify the horizontal cut line

The clearest test uses a recognizable feature in the screenshot. A correctly scaled line passes through the exact point you click.

Before you click the canvas, where do you expect the line to appear if you click a feature about one third of the way down?

Click a recognizable feature about one third of the way down the canvas.

You'll see one horizontal line cross the full width of the screenshot at the chosen height.

Click a different recognizable feature lower in the screenshot.

You'll see the line move to the new height. The previous position disappears because the image is redrawn before the new line.

Click close to the top edge of the screenshot.
Click close to the bottom edge of the screenshot.

You'll see the line follow both clicks without leaving the image. You have the interaction locked in. The cut marker now follows your chosen image coordinate.

Line offset from your click?

An offset usually means the script is using the displayed pointer position as an image coordinate. Scale the pointer's vertical offset by the ratio between the canvas drawing height and its displayed height.

If the line flashes and disappears, confirm that the redraw paints the image before it paints the line.

Help me fix an offset horizontal cut line.

✔️ Awesome, I've got everything!

Great work. Save index.html once more. Your screenshot remains local while each canvas click places a visible horizontal cut line.

ⓧ I'd like to double check the full code

Compare your page against this exact end state:

Local browser tool page with an image file picker and canvas. Selected image files are read locally and drawn onto the canvas. Horizontal-cut mode supports clicking the canvas to set and visibly render a horizontal cut line across the image.

Confirm that selecting a local image still draws it onto the canvas.
Confirm that clicking the canvas stores the corresponding vertical image coordinate.
Confirm that every redraw places the line over the screenshot.
Confirm that the line spans the full width of the image.

Your tool can now mark the start of a horizontal cut. Next up, you'll add a second handle that controls how much of the middle disappears.

Remove a Horizontal Strip

That first control is working. Your upper cut line now lands exactly where you click.

A single line marks only the start of the unwanted area. This step adds a lower boundary. The browser's Canvas API then joins the image sections outside those boundaries.

In this step, get ready to:

Add a draggable lower boundary for the removed strip.
Compose the remaining image sections on a shorter canvas.
Verify that the joined preview updates while you drag.

Add the lower boundary

A removable strip needs an upper boundary plus a lower boundary. The existing cut line stays in place while the new handle controls the bottom of the strip.

In your code editor's file sidebar, select index.html.
Find the existing state that stores the horizontal cut-line position.
Implement the lower edge as a separate horizontal handle positioned below the existing line.
Save index.html.
Return to the local page from earlier.
Reload the page.
Use the existing file picker to select your test screenshot again.

You should see the original upper cut line plus a second horizontal handle below it.

Return to index.html in your code editor.
Update the existing pointer handling to drag the lower handle in the image's natural coordinate scale.
Keep the lower handle between the upper cut line and the bottom edge of the image.
Save index.html.
Return to the local page.
Reload the page.
Select your test screenshot again.
Drag the lower handle down the image.

You should see the handle follow your pointer without crossing the upper cut line or leaving the image.

Handle moving to the wrong position?

Check that the pointer's displayed position is scaled to the image's natural height. A displayed canvas can be smaller than the image data it represents.

Confirm that only the lower handle enters the dragging state when you press near it.

Help me debug the lower canvas handle.

Join the two image sections

The preview keeps the pixels above the upper line. It places the pixels below the lower handle directly underneath them.

How does the joined preview work?

The first source rectangle covers the image from its top edge to the upper cut line.
The second source rectangle covers the image from the lower handle to the bottom edge.
The output canvas height equals the original height minus the distance between the two boundaries.
The second rectangle starts immediately below the first rectangle to create a gap-free seam.

In index.html, find the existing routine that redraws the image plus its cut line.
Implement the two-rectangle composition described above in the horizontal preview logic.
Trigger the redraw whenever the lower handle moves.
Save index.html.
Return to the local page.
Reload the page.
Select your test screenshot again.

You should see a shorter canvas containing the top section joined directly to the bottom section.

Seeing a gap or stretched image?

Check that the lower image section starts at the height of the retained top section. Confirm that both source rectangles use the image's natural dimensions.

Help me fix the joined canvas preview.

Test the live seam

Before you test the finished interaction, how do you expect the preview height to respond as the lower handle moves farther from the upper line?

Click the canvas at the top edge of an unwanted block in your screenshot.
Press the lower handle.
Drag the handle below the unwanted block.
Release the handle.

You should see the unwanted horizontal strip disappear. The content below it should meet the content above it with no empty gap.

Drag the lower handle slightly farther down.

The canvas should become shorter in real time. The lower image section should continue sliding upward to meet the top section.

That is the core seam-cutting behavior working. Your tool can now remove a middle section while preserving everything above it and below it.

✔️ Awesome, I've got everything!

Your saved index.html now supports a draggable lower handle plus a live joined preview.

ⓧ I'd like to double check the full code

Your finished artifact should match this state:

Local browser tool page with an image file picker and canvas. Selected image files are read locally and drawn onto the canvas. Horizontal-cut mode supports a clickable upper cut line and a draggable lower handle. The area between the two horizontal positions is removed in a live canvas preview, with the bottom image section joined to the top section.

Your horizontal seam cutter is working. Next, you will extend the same interaction to remove vertical strips from wide images.

Add Vertical Cut Mode

Your horizontal cutter now removes a middle strip from a tall screenshot. The live preview closes the gap immediately.

A wide image presents the same problem along a different axis. This step adds a direction toggle so the cutter can remove a vertical column.

The same two cut positions still define the discarded area. Vertical mode reads x-coordinates before joining the right image section to the left section.

In this step, get ready to:

Add a direction toggle for horizontal or vertical cuts.
Map the two cut positions to the x-axis in vertical mode.
Render a joined preview with the selected column removed.

Add the direction toggle

A direction toggle gives the existing controls a clear axis. Horizontal mode stays selected initially so the current behavior remains available.

Open index.html in your code editor.
Add a two-option direction toggle near the existing file picker with Horizontal selected initially.
Save index.html.
Refresh the local page in your browser.

You should see Horizontal and Vertical options near the file picker. Horizontal should appear selected.

Return to index.html in your code editor.
Connect the direction toggle to the mode used by the cut interaction.
Save index.html.
Refresh the local page in your browser.
Select Vertical.

The Vertical option should now appear selected. This confirms that the page can switch the active cut direction.

Toggle not changing modes?

Check that both options belong to the same direction control. Confirm that changing the selected option updates the mode used by your cut interaction.

Ask for help with the direction control.

Map the cut positions to the x-axis

The Canvas API keeps the image at its natural dimensions. Pointer positions from the displayed canvas need scaling before they can identify the correct source pixels.

Horizontal mode already performs this conversion along the y-axis. Vertical mode applies the same idea along the x-axis.

Return to index.html in your code editor.
Adapt the existing cut-position interaction to use image-space x-coordinates while Vertical is selected.
Save index.html.
Refresh the local page in your browser.
Choose your test screenshot with the existing file picker.
Select Vertical.
Click the canvas to place the first vertical cut position.
Drag the second handle horizontally to place the other vertical cut position.

You should see two vertical positions move with your pointer. Both positions should stay aligned with the same image pixels when the canvas is displayed at a smaller size.

Why does pointer scaling matter?

The browser can display a large screenshot inside a smaller canvas area. Scaling converts the displayed pointer position into the matching position within the original image.

Accurate source coordinates keep the visible guides aligned with the pixels removed from the exported image.

Vertical positions feel offset?

Check that the horizontal pointer offset is scaled from the displayed canvas width to the image's natural width. Confirm that the canvas boundary is removed from the pointer position before scaling.

Help me correct the vertical pointer coordinates.

Render the vertical join

The vertical preview keeps the pixels to the left of the first cut position. It also keeps the pixels to the right of the second cut position.

The right section shifts left by the width of the removed column. The preview keeps the natural image height while its width becomes shorter.

Return to index.html in your code editor.
Implement the vertical preview branch so it sizes the canvas to the retained width before drawing both retained source sections.
Save index.html.

Before you check the result, which canvas dimension do you expect to shrink?

Refresh the local page in your browser.
Choose your test screenshot with the existing file picker.
Select Vertical.
Click the canvas near the left edge of the column you want to remove.
Drag the second handle past the right edge of that column.

You should see the middle column disappear. The right image section should meet the left image section with no empty gap.

Seeing a gap or stretched image?

Confirm that the preview width subtracts only the removed column width. Check that the right source section keeps its original pixel dimensions when it shifts left.

Help me debug the vertical canvas join.

Before switching back, do you expect horizontal mode to keep its previous behavior?

Select Horizontal.
Click the canvas to place the upper cut line.
Drag the lower handle to choose the strip height.

You should see the middle horizontal strip disappear as before. You now have one cutter that closes gaps on either axis.

✔️ Awesome, I've got everything!

Save index.html.

Great work. Your direction toggle now controls both horizontal and vertical cuts.

ⓧ I'd like to double check the full code

Your finished index.html should match this state:

Local browser tool page with an image file picker, canvas, and horizontal/vertical direction toggle. Selected image files are read locally and drawn onto the canvas. Horizontal mode removes the area between an upper cut line and lower draggable handle, joining the bottom image section to the top. Vertical mode removes the area between two vertical cut positions, joining the right image section to the left.

Your cutter now handles tall screenshots and wide images. Next, you will export the joined preview as a PNG file that you can keep.

Download the Joined Image

Your cutter already removes a middle strip in either direction. The joined result currently lives inside the browser preview.

This step gives that result a way out. A Download button uses the Canvas API to turn the joined pixels into a PNG file.

In this step, get ready to:

Add a Download button beside the existing direction toggle.
Connect the button to the current joined canvas.
Open the downloaded image to inspect its dimensions and seam.

Add the Download button

The download control belongs beside the existing cutting controls. Keeping these actions together makes the tool easy to use after each preview looks right.

Switch back to the code editor from earlier.
Locate the existing direction toggle in index.html.
Add a button labelled Download beside the direction toggle.
Save index.html.
Return to the local page in your browser.
Refresh the page.

You should see the new Download button beside the direction toggle. The file picker and canvas should remain visible.

Download Button Missing?

Confirm that the new button sits inside the visible controls in index.html.
Save index.html before refreshing the browser.

Ask for help if the control still does not appear: Help me find why the Download button in my local HTML page is not visible.

Export the current preview

The canvas already contains the finished joined image after every cut update. The button can export those current pixels without rebuilding the cut.

Locate the code in index.html that redraws the current joined preview.
Connect the Download button to a click handler that exports the canvas's current pixels as a PNG file.
Save index.html.

How Does the Download Work?

The browser reads the pixels currently stored on the canvas. It packages those pixels into a PNG file.

The screenshot stays on your device throughout the export. The downloaded file contains the same joined result shown in the preview.

Return to the local page in your browser.
Refresh the page.
Select your test screenshot with the existing file picker.

You should see the test screenshot drawn on the canvas again.

Set the direction toggle to horizontal mode.
Place the upper cut line above the strip you want to remove.
Drag the lower handle below the strip you want to remove.

The live preview should show the bottom section joined directly beneath the top section.

Before you click the button, do you expect the downloaded file to contain the original screenshot or the joined preview?

Click Download.

Your browser downloads a PNG file containing the joined preview. The removed middle strip stays out of the exported image.

No File Downloaded?

Confirm that the click handler is connected to the visible Download button.
Confirm that the export reads from the same canvas that displays the joined preview.
Check your browser's download area for a blocked or pending download.

Get help with the export flow: Help me debug why my Canvas download button does not create a PNG file.

Open the downloaded file

The browser preview proves that the cut logic works. Opening the downloaded file separately confirms that the exported pixels preserve the same seam.

Before you open the file, where do you expect the two retained image sections to meet?

Open the downloaded PNG from your browser's download area.
Zoom in on the point where the two retained image sections meet.

You should see the top section meet the bottom section with no gap. The downloaded image should be shorter than the original by the height of the removed strip.

That closes the loop. Your browser tool now turns each live cut into a file you can keep.

Your cutter can now produce a finished PNG from a local screenshot. Next, you will publish the tool as a page you can open from your phone.

Deploy to GitHub Pages

Your screenshot cutter now removes horizontal strips or vertical columns. It also exports the joined result as a PNG.

A GitHub repository gives your page a permanent home. GitHub Pages turns the existing index.html into a site your phone can open.

In this step, get ready to:

Commit index.html to a public GitHub repository.
Publish the repository through GitHub Pages.
Use the deployed tool on your phone with a real stitched screenshot.

Commit your page to GitHub

A repository stores the page online with a history of every committed version. Your credentials stay on GitHub's sign-in page.

Open GitHub in your computer's browser.
Sign in to your GitHub account.

You should land on your signed-in GitHub dashboard. Your account is ready to hold the page that becomes your mobile tool.

Select the plus menu in the upper-right corner.
Click New repository.

You should see the form for creating a repository.

Your Site Becomes Public

Publishing through GitHub Pages makes your page public. Your repository contains the tool's index.html file.

Selected screenshots remain on your device because the tool reads them locally in the browser. Your test images never enter the repository.

Enter screenshot-strip-cutter in the Repository name field.
Select Public as the repository visibility.

The form now identifies the tool through a public repository name.

Turn Add README on.
Click Create repository.

GitHub opens the new repository. You should see README.md in the file list.

Open the Add file menu above the file list.
Click Upload files.

You should see the file upload page for your repository.

Click choose your files.
Select the existing index.html file from your computer.

You should see index.html listed on the upload page.

Enter Add screenshot strip cutter in the Commit message field.
Choose the option that commits to the current branch.

Your upload now targets the repository's default branch.

Click Commit changes.

That is the first deployment milestone. You should see index.html in the repository file list.

Can't See index.html?

Return to the repository's main page to check the file list.
Repeat the upload with the index.html file that is open in your code editor.
Confirm the upload is committed to the current branch.

Ask for help with a missing file in your GitHub repository.

Publish with GitHub Pages

GitHub Pages can publish directly from a repository branch. The root folder works here because index.html sits at the top level of the repository.

Click Settings below the repository name.
Click Pages in the sidebar.

You should see the Build and deployment section.

Open the Source menu.
Select Deploy from a branch.

The page now shows controls for the publishing branch and folder.

Select your repository's default branch from the branch menu.
Select / from the folder menu.

The publishing source now points to the root of the default branch.

The first deployment can take up to 10 minutes. A short wait here is normal.

Click Save.
Wait up to 10 minutes for the deployment.
Refresh the Pages settings page.

You should see the published site address with a Visit site button.

Click Visit site.

You should see the screenshot cutter load from a public web address. The page should include its file picker, direction control, canvas and Download button.

Site Still Not Ready?

Confirm the Pages source uses your repository's default branch.
Confirm the publishing folder is /.
Confirm index.html appears at the top level of the repository.

Wait the full 10 minutes before refreshing the Pages settings again.

Ask for help troubleshooting the GitHub Pages deployment. You can also ask in the GitHub Community forum.

Test the deployed tool on your phone

The phone test proves the deployment works outside your computer. The selected image should still stay inside the phone's browser.

Record the deployed address from the browser here: your GitHub Pages URL.
Enter your GitHub Pages URL in your phone's browser address bar.

You should see the same screenshot cutter that worked on your computer.

Use the page's file picker to select a real stitched screenshot.
Choose horizontal mode for a strip that crosses the screenshot.
Place the first cut line above the unwanted strip.
Drag the second handle below the unwanted strip.

You should see the joined preview update on your phone. The unwanted middle strip should be gone.

Before you download the result, do you expect the saved PNG to include the removed strip?

Tap Download on the deployed page.
Open the downloaded PNG on your phone.

You should see the sections joined with no empty gap. The removed strip should be absent from the downloaded image.

Phone Preview Not Working?

Reload the saved GitHub Pages URL in your phone's browser.
Try a shorter copy if a very long phone screenshot does not render.
Try a lower-resolution duplicate if the browser closes the page while drawing.

Ask for help debugging the screenshot cutter on your phone.

You now have a reusable screenshot cutter at your own public URL. It works from your phone without sending the selected image to a server.

Secret mission

Prove Your Cutter Works Offline

Your cutter promises local image processing. Test both cut directions while your computer is offline. Export a joined PNG before reconnecting.

Clean Up Your Resources

Your screenshot cutter runs entirely in the browser. The deployed GitHub Pages site has no server process or ongoing bill.

Choose the cleanup level that fits what you want next. The reusable page can stay online while you remove the disposable test files.

Resources you used:

Downloaded PNG test images created while checking the joined seam.

Keep everything running

No action is needed. Choose this if you want the screenshot cutter ready for your next stitched image.

Keep the GitHub Pages URL bookmarked for use on your phone.
Keep index.html in its current local location for future edits.
Keep the GitHub repository as the source for the deployed page.

Pause - I'll come back to this later

Close your local editing session. The source and deployment remain available for your return.

Close the browser tab showing the local index.html page.
Keep index.html in its current local location.
Leave the GitHub repository unchanged.

Delete - I don't want to use this again

This option permanently removes only the disposable test exports. Your source and deployment stay untouched.

Use your browser's download history to locate each PNG file exported during testing.
Open the folder containing each exported PNG with your computer's file manager.
Delete each exported PNG from that folder.
Empty your computer's deleted-files folder to remove the exported PNG files permanently.
Confirm that no exported PNG test files remain in the folder.

Nice Work!

You did it! You built a private screenshot editing tool that removes unwanted strips from the middle of an image. You also published it for use from your phone.

You've learned how to:

Use the browser Canvas API to load a screenshot from your device. Draw the image locally without uploading it.
Build horizontal and vertical cut modes that remove a selected strip from the middle of a screenshot. Confirm the remaining image sections meet in a live joined preview.
Export the joined result as a PNG file with a clean seam. Publish the tool with GitHub Pages so you can use it from your phone.
Extend the tool through the optional Secret Mission to push your browser image-editing skills further.

Ready to quiz yourself?