Hacktoberfest 2026: the issues maintainers tagged for October, open and beginner-friendly. Browse Hacktoberfest issues

Update save image function to export image without surrounding border 🐜

Open
#9 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
45/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
frontend

Research direction

Start by locating the saveCanvas function and the save image button, then trace how stacksize, canvassize, and canvasspace determine the exported region. Verify the current output dimensions and adjust the save behavior so it excludes the canvasspace area; confirm that the saved image contains only the stacksize region.

Written by the indexing model from the issue text.

Description

bug

In Firebox the saveCanvas function saves a file with dimension of stacksize (width and height of the image), whereas in Chrome it seems to includes a black band around the outside, presumably canvassize which is currently defined as stacksize + canvasspace.

Update: Behaviour now appears consistent across browsers (perhaps issue identified above was a caching problem): both Firefox and Chrome save canvas based on canvassize (which is what you'd expect from the code). Ideally the save function should only export stacksize as per the following.

Current behaviour

When users click on "save image" button saveCanvas function exports canvassize which is currently defined as stacksize + canvasspace.

Desired behaviour

When users click on "save image" button they should ideally be able to export the area currently defined as stacksize, excluding the canvasspace area which has been included to allow space for save button, sliders, dropdown menus and other user interface features to customise and adjust the image.

This could possibly be addressed by splitting into two phases and/or screen areas:

  1. A configuration, including inputting image URLs and adjusting settings;
  2. Image canvas, for previewing image and showing what would be saved with the "save image" button.
Dominant language
JavaScript
Stars
2
Forks
2
PR merge metrics
No merged PRs in 30d

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from PublicDataLab/image-explorer

All issues in PublicDataLab/image-explorer

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.