Sending an image though a websocket

[larry104]

I'm kind of stuck since I ran into a chrome bug - first let me try to explain what I try to do:
I'm using websockets for server side image generation. So far I created a image handler function which which returns the image

http.HandleFunc("/image", imageHandler)

On the client side the image is embeded in svg: "<image x="190" y="20" width="700" height="700" xlink:href="/image" and so it gets nicely updated. Now since the rest of the communication between server and client is based on websockets. I'm not sure how I can define the image handler for a specific websocket which gets initialized in the websocket handler: func wsHandler(ws *websocket.Conn). Instead I was thinking of sending the image via a websocket but therefor I need to use a html5 canvas and embed it into the svg. This can be done by using foreignObject tag: <foreignObject x="190" y="20" width="100%" height="100%"><xhtml:canvas width="10" height="10"/></foreignObject> so javascript can receive the image via the websocket and update the canvas easily. Unfortunately, chrome has a bug related to the foreignObject tag (it works as intended with firefox). I just attach a little test file so you can see what happens when you open it with Chrome vs. Firefox - Chrome detaches the foreign object from the svg and does not scale it with the svg anymore when it exceeds a specific size - also it does not register any mouse events when overlayed with other svg objects. (Save the file as test.xml and change var i from 700 to 200 and open it with Chrome vs. Firefox and resize the window and move the mouse) - Anyway that's not subject of this forum but it prohibits me to send the image via websockets - Does anyone have an idea what the best way is to get the image to the client?

[Cole Mickens]

What are you trying to do? I don't understand what you're trying to achieve or why there's an image embedded in an SVG or how the imageHandler and wsHandler are related.

[jorelli]

this is really a JavaScript question, not a Go question, so it doesn't really belong on this list.  But I'll answer it because I've done this before and I'm not that much of a jerk that I would just tell you to go away.

I was able to solve the problem of rendering the svgs at runtime by rendering the svg to the page with raphael.js.  Raphael doesn't support it natively, but there's an extension called raphael-svg-import that adds this capability (https://github.com/wout/raphael-svg-import/).  It works well and is quite fast.

What I did was download all of the svgs on The Noun Project, stick them all in Redis, and then created a REST API that exposed them.  I wrote this before Go1, so it probably doesn't work any more, but there's an example use of this technique here:

https://github.com/jordanorelli/fun-with-nouns

and you probably want to use mustache.js to place the actual tag or modify the attributes of the tag before inserting it into the DOM.

I haven't sent the svg data through a websocket, but it's just text, so it shouldn't change anything.

[larry104]

What are you trying to do? I don't understand what you're trying to achieve or why there's an image embedded in an SVG or how the imageHandler and wsHandler are related. 

Let me try again: I need to overlay an image as well as SVG for allowing some interaction with the image. The image is generated on the server send to the client and on the client you can interact with it. E.g. You zoom in by drawing a "zoom box"  then the server generates a new image and sends it back. All the communication is done using websockets including sending back SVG with updated viewboxes and other updated information for the client. Since I can't mix the SVG with a canvas due to the Chrome bug I would need to find a way to update the image though a image handler function. So, the questions I have is how can I create a connection specific handler - /image needs to be aware which from which socket the request is coming - Does that make more sense?