Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update save image function to export image without surrounding border 🐜 #9

Open
jwyg opened this issue Jun 17, 2020 · 1 comment · May be fixed by #12
Open

Update save image function to export image without surrounding border 🐜 #9

jwyg opened this issue Jun 17, 2020 · 1 comment · May be fixed by #12
Labels
bug Something isn't working

Comments

@jwyg
Copy link
Member

jwyg commented Jun 17, 2020 •
edited
Loading

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.
@jwyg jwyg added the bug Something isn't working label Jun 17, 2020
@jwyg jwyg changed the title Fix discrepancy between image save function in Firefox and Chrome Fix discrepancy between image save function in Firefox and Chrome 🐜 Jun 17, 2020
@jwyg jwyg changed the title Fix discrepancy between image save function in Firefox and Chrome 🐜 Update save image function to export image without surrounding border 🐜 Jun 18, 2020
@jwyg jwyg mentioned this issue Jun 18, 2020
Closed
@mikima
Copy link
Member

mikima commented Jun 25, 2020

I think the best option is to create the canvas of the exact size and then position it in the page using DOM functions

mikima added a commit to mikima/image-explorer that referenced this issue Jun 25, 2020
@mikima
changed canvas positioning
bd4ffba 
solve and close PublicDataLab#9 

The p5 canvas is an HTML object like as buttons and input form.
We can therefore position it where we want in the page.

Therefore the canvas size now is equal to the stacksize.
when we create it, we incapsulate it ina a variable (line 36) and then we position it in the page (line 37)
@mikima mikima linked a pull request Jun 25, 2020 that will close this issue
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

changed canvas positioning mikima/image-explorer
2 participants
@mikima @jwyg