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.

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

Already on GitHub? Sign in to your account

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

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 added this to To do in Roadmap 馃洠 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
@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
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
Roadmap 馃洠
  
To do
Development

Successfully merging a pull request may close this issue.

2 participants