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.
Related
I want get all the content of a loaded UIWebView, especially the images.
When UIWebView loading a img tag, I want load one image from sandbox instead load through the internet from img url.
I know default there is fcCacheData in the SandBox by UIWebView, I want create one cacheData of myself and wholly control it, then I can replace the default one. How to do this?
I'm running a Vanilla Forum with a FileUpload plugin, allowing users to upload images and insert the corresponding code directly into the body of their post. These images work with FancyBox when clicked, linking together nicely within the page. However, should a user use a third-party image hosting site (i.e. Imagevenue, Imageshack, Postimage.org) and copy and paste the resulting image code, it deactivates the FancyBox feature associated with all images previously on the page, so when you click on an image uploaded via FileUpload it opens in a new window now instead of in a FancyBox.
My question is one of two things:
a) Is it possible to fix this formatting issue so that if a user does choose to use a third-party image hosting service then it will not affect the fancybox of my previous images.
or
b) Is it possible to block this type of image code from being inputted in the body of a post to prevent this from ever happening.
Thank you and please reply if you would like more information!
Most likely the generated code from those third-party hosting sites has not an image extension (JPG, PNG, GIF) so fancybox doesn't know what type of content needs to handle.
If you are binding fancybox like
$(".fancybox").fancybox();
... you could force the type of content to image like
$(".fancybox").fancybox({
type : "image"
});
I don't really see how pasting the code of a new image will disable the code for existing ones if you want to elaborate.
I'm doing all of this in a DotNetNuke module.
I have some images that I load from a database as byte data. Originally, I was converting the byte data to a Drawing.Image, resizing it, then converting it back to a byte before doing a Response.BinaryWrite. This was all taking a place in .aspx.
Meanwhile, in the View.ascx I create a div in the code as part of a jquery and had the background-image point to the url of previously mentioned .aspx. I had passed in a parameter within the url string to get different images and this all worked fine.
However, here's the problem; I learned that using a .aspx within a DNN module can create a security issue among other problems. Therefore, I'm now looking for alternatives for displaying the images as a background within the div tag.
Is there a way to load the image into memory and set the div's background to that memory image and will that work across the latest versions of IE7, IE8, IE9, Firefox, and Chrome? I'm open to other alternatives and suggestions
As long as you are validating the users access to the resource, there is no security risk with doing this.
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
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.