Added document tool to upload images #42

finnboeger · 2020-04-26T13:42:53Z

No description provided.

…cense: CC BY 4.0

client-data/tools/document/document.js

finnboeger · 2020-04-26T22:01:33Z

This also fixes #20. Currently there is no size/quality reduction, however it could be done using e.g. mozjpeg.

lovasoa · 2020-04-27T10:10:06Z

The size/quality reduction could be done prior to sending on the client side with a canvas, with the server only validating that the document does not exceed the maximum size.

server/sockets.js

finnboeger · 2020-05-04T17:48:02Z

Option to disable tools added in #66

client-data/tools/document/document.js

Co-authored-by: Ophir LOJKINE <ophir.lojkine@auto-grid.com>

lovasoa · 2020-05-05T18:20:08Z

server/sockets.js

+		if (message.data.type === "doc") {
+			boardData = await getBoard(boardName);
+
+			if (boardData.existingDocuments >= config.MAX_DOCUMENT_COUNT) {
+				console.warn("Received too many documents");
+				return;
+			}
+
+			if (message.data.data.length > config.MAX_DOCUMENT_SIZE) {
+				console.warn("Received too large file");
+				return;
+			}
+
+			boardData.existingDocuments += 1;
+		} else if (message.data.type === "delete") {
+			boardData = await getBoard(boardName);
+
+			if (boardData.board[message.data.id].type === "doc") {
+				boardData.existingDocuments -= 1;
+			}
+		}


This should probably be handled in the BoardData class

Also, we should also verify the provided URL, to check that it's a data URL.

we would still broadcast the large files to all users in that case

Yes, you are right, I hadn't thought about that. I still think the board-specific code should happen in BoardData, but we should probably set the httpBufferSize option of socket.io in addition, to avoid having to handle and dispatch large messages.

lovasoa · 2020-05-05T18:21:47Z

client-data/tools/document/document.js

+                        ctx.canvas.width = image.width * scale;
+                        ctx.canvas.height = image.height * scale;
+                        ctx.drawImage(image, 0, 0, image.width * scale, image.height * scale);
+                        var dataURL = ctx.canvas.toDataURL("image/webp", 0.7);


We should probably use jpeg by default here... We can make it configurable, though.

https://caniuse.com/#feat=webp

jpeg does not support transparency, which would require us to check what kind of image was uploaded and if it made use of the alpha channel.
If it is a png with transparency we would not be able to compress it other than by shrinking the dimensions.

I would suggest using a webp polyfill, e.g. https://github.com/chase-moskal/webp-hero

Let's maybe start with JPEG, and then add support for webp, with a polyfill, in a second pull request ? webp-hero won't work as-is with data urls...

lovasoa · 2020-05-05T18:26:47Z

client-data/tools/document/document.js

+        img.setAttribute("width", 400*aspect);
+        img.setAttribute("height", 400);


We should probably have a maximum and a minimum image size, and scale only images that do not fit.

fklement · 2020-07-20T13:03:09Z

@finnboeger
I just checked out your PR. Pretty nice so far.
Do you plan on adding support for moving the imported image?

finnboeger · 2020-07-21T13:46:59Z

I plan on adding general support to move and resize shapes which would include images as well.
However the earliest I expect to have time to continue working on this would be in close to a month.

lovasoa · 2020-07-21T17:52:25Z

Doesn't the existing hand tool work to move images created with this patch?

finnboeger · 2020-07-22T11:06:46Z

I am not up to speed regarding the tools that have been added since my last commit so I can't comment on that right now

TechRova · 2020-07-23T11:28:39Z

This also fixes #20. Currently there is no size/quality reduction, however it could be done using e.g. mozjpeg.

The demo website dont have image adding feature

stranljip · 2020-10-01T11:50:04Z

I would love to see this feature. Is this issue still in progress or has it become stale?

lovasoa · 2020-10-01T12:09:33Z

I just haven't had the time to work on it yet.

lordneeko · 2020-11-19T16:24:14Z

In addition, the ability to "paste" into the window and have it show up within the canvas would be desirable. Perhaps that is a follow-on PR.

Y0ngg4n · 2021-05-18T12:45:52Z

any updates here?

keraldi · 2021-12-14T05:39:05Z

Hi, I'd also really like this feature. Can anything be done to help the progress?

gigabyteservice · 2022-03-03T13:45:47Z

this is producing an error with downloading functionality/tool

mrducky4 · 2022-04-02T15:49:14Z

this is producing an error with downloading functionality/tool

@gigabyteservice I saw a problem with this, the downloaded SVG would not open if the board included an uploaded image. I fixed it by adding the attribute xmlns:xlink="http://www.w3.org/1999/xlink" to the <svg id="canvas"> element in board.html.

mrducky4 · 2022-04-02T15:53:06Z

client-data/tools/document/document.js

+                        type: "doc",
+                        data: dataURL,
+                        size: size,
+                        w: this.width * scale || 300,


This uses the newly reduced value for scale. I think it was meant to use the previous value, which is the value used with drawImage()

mrducky4 · 2022-04-02T15:56:50Z

server/boardData.js

+		boardData.existingDocuments = 0;
+		for (id in boardData.board) {
+			boardData.validate(boardData.board[id]);
+			if (boardData.board[id].type === "doc") existingDocuments += 1;


Should this be boardData.existingDocuments?

mrducky4 · 2022-04-03T21:16:33Z

server/configuration.js

@@ -26,6 +26,12 @@ module.exports = {
    /** Maximum value for any x or y on the board */
    MAX_BOARD_SIZE: parseInt(process.env['WBO_MAX_BOARD_SIZE']) || 65536,

+    /** Maximum size of uploaded documents default 1MB */
+    MAX_DOCUMENT_SIZE: parseInt(process.env['WBO_MAX_DOCUMENT_SIZE']) || 1048576,


Large images failed for me, causing a transport error. The socket.io default maxHttpBufferSize is 1e6, so I changed this to 1e6 - 500.

NyaomiDEV · 2022-10-12T14:07:45Z

is there still some interest in merging this PR?

holema · 2022-10-25T09:07:44Z

@lovasoa and @NyaomiDEV , it would be great to have the feature. I`m still missing this feature so much

rdbeach and others added 5 commits April 26, 2020 15:23

Added document tool

e6a5639

Added Document icon. Author: Dave Gandy (https://fontawesome.com), Li…

6a4c9bd

…cense: CC BY 4.0

change icon to fit new structure

4b1ee6e

ignore group/layers for now

9f210b3

Added checks for maximum filesize and amount of concurrent documents

38bebf3

finnboeger commented Apr 26, 2020

View reviewed changes

client-data/tools/document/document.js Outdated Show resolved Hide resolved

lovasoa force-pushed the master branch 2 times, most recently from d2ff89d to 189ebbe Compare April 27, 2020 22:56

finnboeger added 2 commits May 2, 2020 18:47

Merge branch 'lovasoa/whitebophir' into tool/document

e8ff46c

pass through configuration from server

5247853

finnboeger force-pushed the tool/document branch from fa7d632 to 5247853 Compare May 2, 2020 22:59

finnboeger added 3 commits May 3, 2020 12:30

remove debug logging

0a99ad2

append to drawing area instead of svg root

061f84d

compress image until it is small enough for upload

bc0e1e9

lovasoa reviewed May 3, 2020

View reviewed changes

server/sockets.js Outdated Show resolved Hide resolved

lovasoa reviewed May 3, 2020

View reviewed changes

server/sockets.js Outdated Show resolved Hide resolved

finnboeger added 3 commits May 3, 2020 17:57

actually verify size

b1b875a

compute existing document count only on board load on the server side

4e258c0

Merge branch 'lovasoa/whitebophir' into tool/document

cd8a9ca

finnboeger marked this pull request as ready for review May 4, 2020 17:48

lovasoa reviewed May 5, 2020

View reviewed changes

client-data/tools/document/document.js Outdated Show resolved Hide resolved

remove es6

0067399

Co-authored-by: Ophir LOJKINE <ophir.lojkine@auto-grid.com>

lovasoa reviewed May 5, 2020

View reviewed changes

lovasoa mentioned this pull request Aug 13, 2020

Feature: Load board from file #26

Open

Merge branch 'master' into tool/document

79352c9

Update sockets.js

8aefd41

gigabyteservice mentioned this pull request Mar 19, 2022

Fixed: Download Svg Button #195

Merged

mrducky4 reviewed Apr 2, 2022

View reviewed changes

mrducky4 reviewed Apr 3, 2022

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added document tool to upload images #42

Added document tool to upload images #42

finnboeger commented Apr 26, 2020 •

edited

finnboeger commented Apr 26, 2020

lovasoa commented Apr 27, 2020

finnboeger commented May 4, 2020

lovasoa May 5, 2020

lovasoa May 5, 2020

finnboeger May 5, 2020

lovasoa May 5, 2020

lovasoa May 5, 2020

finnboeger May 5, 2020

finnboeger May 5, 2020

lovasoa May 5, 2020

lovasoa May 5, 2020

fklement commented Jul 20, 2020

finnboeger commented Jul 21, 2020

lovasoa commented Jul 21, 2020

finnboeger commented Jul 22, 2020

TechRova commented Jul 23, 2020

stranljip commented Oct 1, 2020

lovasoa commented Oct 1, 2020

lordneeko commented Nov 19, 2020

Y0ngg4n commented May 18, 2021

keraldi commented Dec 14, 2021

gigabyteservice commented Mar 3, 2022 •

edited

mrducky4 commented Apr 2, 2022

mrducky4 Apr 2, 2022

mrducky4 Apr 2, 2022

mrducky4 Apr 3, 2022

NyaomiDEV commented Oct 12, 2022

holema commented Oct 25, 2022

		img.setAttribute("width", 400*aspect);
		img.setAttribute("height", 400);

Added document tool to upload images #42

Are you sure you want to change the base?

Added document tool to upload images #42

Conversation

finnboeger commented Apr 26, 2020 • edited

finnboeger commented Apr 26, 2020

lovasoa commented Apr 27, 2020

finnboeger commented May 4, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fklement commented Jul 20, 2020

finnboeger commented Jul 21, 2020

lovasoa commented Jul 21, 2020

finnboeger commented Jul 22, 2020

TechRova commented Jul 23, 2020

stranljip commented Oct 1, 2020

lovasoa commented Oct 1, 2020

lordneeko commented Nov 19, 2020

Y0ngg4n commented May 18, 2021

keraldi commented Dec 14, 2021

gigabyteservice commented Mar 3, 2022 • edited

mrducky4 commented Apr 2, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

NyaomiDEV commented Oct 12, 2022

holema commented Oct 25, 2022

finnboeger commented Apr 26, 2020 •

edited

gigabyteservice commented Mar 3, 2022 •

edited