I'm trying to save a canvas image to the web page server, so a php script can post it to a web api. I've been looking around and all I see is saving it in the users web browser, any help for a newbie?
You can extract the contents of the canvas as a data url using the toDataURL method, and then upload this to your server using an AJAX POST.
The accepted answer to this question should give you some help.
Related
How to upload image on page using ajax in codeigniter? On form image needs to be uploaded then
user should fill further information. I try ajax but unable to figure out simplest way
http://net.tutsplus.com/tutorials/javascript-ajax/how-to-upload-files-with-codeigniter-and-ajax/
This is how I did it for the first time, easier than it might look and should work without too much problems.
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
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.
Jsonp can be used to fetch data from supporting services but can i use it to upload images. As far as i understand javascript cannot access your file system making it impossible to upload an image using pure javascript techniques.However is there a work around. Can an image be uploaded to a server using jsonp?
I don't think you can just using json. The closest you can get is posting to a seperate iframe. Jquery has a feature where you can post a form to a hidden iframe.
http://aspzone.com/tech/jquery-file-upload-in-asp-net-mvc-without-using-flash/
If you are using jquery: http://plugins.jquery.com/plugin-tags/ajax-upload
I tried upload image with CKEditor form ASP.net server and send image to upload with PHP in another server.
That's work for upload image but the image didn't show on editor.
Please could you help to solve this problem.
You can't use different servers due to cross-site scripting protection by the browser. Check this sample: http://cksource.com/forums/viewtopic.php?p=46715#p46715