I have an applications that is composed of a server side rendering component and a client side rendering component. The server side generates the image, sends it to the client where is is rendered using WebGL textures. The client also renders a bounding box around the image. Whenever the user moves the mouse, an model-view matrix is computed and sent to the server via a websocket interface. The client must then wait for the server to generate and send the image back.
The issue is that the orientation of bounding box I am drawing seems to get several frames ahead of the orientation of the image that is rendered on the server. I do not update the modelview transform that is sent to the server until after I render the image that is returned from the server. This is really perplexing. Anybody have any ideas on how this could occur?
Related
I am new HTML5 and Ajax and I was wonder if it's possible with these technologies to write a service that would allow a user to upload an image for example in the background so they could continue browsing different pages on the same site while the upload is in progress?
XHR2 AJAX request can submit binary data like images:
https://developer.mozilla.org/en-US/docs/Using_files_from_web_applications#Example.3A_Uploading_a_user-selected_file
However, changing the address bar (windows.location) will interrupt the upload as the new page is loaded. You can work around of this by loading pages via AJAX and using History API:
https://developer.mozilla.org/en-US/docs/DOM/Manipulating_the_browser_history
Optionally you can resize image on the client-side using <canvas> to decrease the needed bandwidth and the server load
Resizing an image in an HTML5 canvas
Also if you touch the image in <canvas> you might want to keep JPEG metadata, like rotation and GPS coordinates around,
https://github.com/miohtama/Krusovice/blob/master/src/tools/resizer.js
this may be a stupid question.. but i decided to give it a try here...
i am developing a web application using AJAX to do the interactions between client and server(python/django).
now in the client page, there is a canvas which contains a dynamically generated image; i want to get this image and send this image to server, however, i can't use Canvas.toDataURL() due to the violation of canvas security rule (client and server must be in same domain in this case).
so I am just wondering whether it's possible to get the canvas element and send its HTML back to server, then let server process it and extract its image data?
appreciate any advice!
The only problem if the <canvas> date is tained by using images from different origins (CORS problem).
Just
Use toDataURL() to get the image data
Post this data to the server using normal AJAX
Strip off data URL prefix
base64 decode the data
Now you have image data in binary format
Do whatever you wish with the image
base64 + dataURL decode example: https://github.com/miohtama/Krusovice/blob/master/bin/create_bg_thumbnails.py#L62
I've got an HTML email template that's using a kludgy process as follows:
Pull data from MySQL and put it into a HighCharts chart
Convert the HighCharts SVG to canvas using canvg
Render the canvas as a Base64 PNG using canvas.toDataURL
All's well and good, the image shows up fine (except for some quirkiness in Internet Explorer), but here's the rub:
I'd like users to be able to copy and paste the entire web page into Outlook and send it out as an email. However, Outlook (and a few other clients I've tried) won't receive Base64 PNGs via copy paste -- there's a blank space where the image should be.
Does anyone know of a way to convert the Base64 into a normal PNG such that it can survive the copy/paste? Maybe this requires saving the PNG to server?
I've been thinking about this since your last question and I've come up with 3 options:
One
Stick with what you have.
Take the base64 string from the toDataURL, submit it back to the server via AJAX, on the backend convert it to a PNG, store it on server and serve PNG back to the page.
Two
Render highcharts SVG on the users browser.
Submit that SVG string to your backend server via AJAX call.
On the backend, generate a post request (something like described here see Using PHP for POST Request) to the highcharts exporting server at http://export.highcharts.com/. From looking at the highcharts source the request needs to contain the following posted variables:
filename: png filename
type: from the plotOptions, the type, line, bar,etc..
width: the width in pixels of the desired png
svg: the svg string
Get the resulting PNG, save it to your server, serve it normally.
Three
Switch to using the Java Highcharts API. You'd have to get this running on your server. Once you did, though, you could generate your charts entirely on the backend and just serve up the PNG file.
now i'm making application for facebook with javascript.but I don't know method to change my screen application to .jpg file.
So,I would like to know how to change my application and post it
Thank you for your help.
You cannot get the screenshot done client side, however you can grab the HTML code of the page being viewed and AJAX it up to your server, have your server component transform that HTML into an image.
Use this to get the HTML content of the page at the moment they want the screen capture document.getElementsByTagName('html')[0].innerHTML;
AJAX the HTML to your server
Have your server transform that HTML into an image (depending upon server-side technology you're using, there are solutions to this) (eg http://www.converthtmltoimage.com/)
two choice, store the image on your server to be the permanent place sending back the new URL for the image, or send the content back to the client.
Have the client HTTP Post the image content to Facebook for the post, or reference the URL
It's a big project, but I commend you for tackling something like this.
Save PNG (etc.) work in this demo in Firefox, but not Chrome.
Convert to PNG (etc.) work in Firefox and Chrome.
Is there a way *in Chrome* to save an image of a canvas element to a local file -- or to a server?
The simplest way to do it is to use the toDataURL() function.
Say you have a canvas:
var canvas = document.getElementById("myCanvas");
Then, with a button with id "saveButton", you can make it pop open a new window with the canvas as a png, and the user can save that page.
document.getElementById("saveButton").onClick = function() {
window.open(canvas.toDataURL());
}
Sam Dutton: (regarding comment left in Timothy Armstrong's answer) The 'SECURITY_ERR: DOM Exception 18' error that you're getting is probably because in your Canvas you've loaded an image that comes from a different domain, eg. maybe the image is hosted on your server hence why you see the error locally but not when hosted on your server. Whenever you load images from a foreign domain into a Canvas, certain API calls are banned for security reasons such as toDataUrl() and getPixelData(). It's similar to the same origin policy issue you see with cross-domain Ajax calls.
As for SaveAs Canvas, browser implementation is spotty, for browsers that don't support it, I believe you can still have the canvas appear as an image inside an <img /> tag. Just set the src attribute to the data you get back from toDataUrl(), then you can invite the user to right click -> save as. I believe the demo in the link you posted does this.