Level 3
can any one help please
Oct 29, 2016
10
Level 3
Share screen button
Hello dev,
I built a web app allows to edit/customize the formation of a football team ( I will explain) , 1 - Choose your League (Serie 1 , Premier League, Spain , France ...) 2 - Choose your team ( FCB, RMA, Chelsa,, etc) 3 - Edit your tactic ( 4-2-3-1, 4-3-3, ...)
4- on this step I create something allow people to share their own formation(tactic,training) I don't wanna share all the screen page, I only wanna allow them to share only a specified area ( only the football field)
-> Please check the picture below for more information https://s3.postimg.org/d56pztqpv/ymyy.png
Could Any one help me please , or maybe a simple advice will be enough for me Thanks
Level 50
Do you want to actually share the 'field', or is it the data about the position of the players you need to share? And is it two-way? Ie, can both 'sides' update the field or is one person setting it and the rest just see it?
1 like
Level 3
@ohffs Thanks for your answer,
I want to share both of them ( the field with players data )
- One person setting and the rest just see it
I was thinking to share that as a simple picture of field and players !
Is that possible ?
Level 50
You might be able to just get away with an api route/endpoint that returns the field type (or dimensions or whatever) and an array of the players data - the person who is making the field can POST to it, the other people can GET it. Sharing a picture is probably more work than just sharing the data - and certainly more bandwidth.
Level 3
what is that api for ? by the way the position of players dosen't saved , Yes sharing the picture is the good solution for me , do you have any idea how Could I do that?
Level 50
It depends how you're generating the picture. If it's a html canvas area for instance you could maybe use the canvas.toDataURL('image/png') to grab it as png data then share that with the 'viewers'. Either as an API endpoint or possibly websockets.
Level 3
it's just a HTML with JQUERY , what Is the first step Should I do ?
Level 54
html2canvas + canvas2image. Here's a fiddle: https://jsfiddle.net/8ypxW/3/
Basically.. you'd target the specific container div, generate a canvas instance of it, then convert the resulting canvas instance to an image. The resulting image would then need to be either downloaded by the user, or posted to the server so it can be shared via a url.
1 like
Level 3
@willvincent Oh Thankyou for your answer , very helpful for me .. but if I need to post that to the server what I need to do in the migration database? should I create a new table for the url ? or should I saved all the images on my server?
Level 3
thankyou guys , you was very helpful
Please or to participate in this conversation.