I have an app on the iphone which will display on the screen an html file containing text and an image. I manipulate this html file with javascript and when I'm done I would like the user to be able to take a screen shot but would like it to be done automatically, without pressing the home and power buttons. Is the some javascript or jQuery that, once the final screen is displayed on the phone, automatically takes a screen shot and places it into the photo library on the phone? Thanks.
Short answer: No. Longer answer: Kinda, but not really.
As far as I know, you cannot make iOS take a screenshot nor even download an image through Javascript or similar. However, I guess you could try to draw the DOM in a canvas and then use canvas.toDataURL() (link) to convert it into an image. You could then instruct the user to hold down their finger on the image to bring up the save dialogue and save it to their device.
As I said, not really a pretty solution, but perhaps something you could experiment with if you really need this feature.
Edit: I did a fast Google search and found this javascript library that should make it a bit easier to do what I described above.
Related
I have a table set up on a website I use it to display 9 images with descriptions. I want to be able to click on an image and have it be displayed larger like in a gallery but i would like to not have it change the layout of the page.
I am just starting to work on this web page so almost any way to do this will be helpful.
Lightbox is a pretty commonly used one, but I'd suggest you try and build your own. It's not a terribly difficult thing to program and it will help you grow as a programmer.
I'm trying to build an interface for the user, so he can choose or pick colored eyes, skin, etc., of a model. I'm really on my way with divs and CSS. I'm using Ajax for loading images into the divs.
My problem is that I need to offer a option to the user so he can save the image as a JPEG or PNG file.
Looking around, I found canvas HTML5 stuff on Stack Overflow, but it's not compatible with Internet Explorer,
Create an Image of a DIV in JavaScript (GIF/PNG)
How can I save div as image at client side where div contains one or more than one HTML5 canvas elements?
I need help to find something compatible with all browsers.
I also found this JavaScript code:
button = document.createElement("img");
button.src = "http://example.com/livechart.gif?interval=15"
But I don't know much about the createElement method.
I know CSS, but JavaScript is beyond my knowledge.
You cannot do this on the browser, you must do it on the server.
see: Convert web page to image
You want to take screenshot of the browser? Well, there are lot of ways you could try, but all of them would be browser-specific. The most reliable would be to just tell the user to make a screenshot with the OS. On a Mac it's Command-Shift-4, then space; on a PC, it it's ALT-PrtScr, I think.
I believe you could do that with HTML canvas and some JavaScript: Canvas2Image : Saving Canvas data to image file.
Can any of you help me to be able to show pictures as fast as facebook does!
Facebook is incredible to watch pictures at, because the pictures are kind of preloaded I think.
Often ved you view galleries on other sites, it is a pain in the a**, because it is so slow every time you change picture.
I think you need javascript to do it!?
Depending on your implementation, you could do this with some ajax and hidden dom elements.
Suppose you have a gallery with a slideshow.. You could insert a hidden dom element with the picture next picture of the slide show for each load. This would cause the image to be loaded. If you then were to use JS to insert that same image tag later, the browser would rely on it's cache rather than fetching it form the server since it already has that photo.
This is kind of a broad question but I think this approach would work. You would probally be better off not reinventing the wheel and seeing what Image prefetch librarbies based on JQuery or whatever are available to you..
Facebook compresses images to extremes. Try it yourself, take an image you are having trouble with and upload it to Facebook. Then check the size of the image, you will know why. Once I did a small test by uploading 17429 bytes image and it compressed it to 18757 bytes, a complete 7% increase from the original size!
At that compressed size, you can implement some sort of prefetch next image for display. Along with, I think, they have extremely good infrastructure.
Facebook uses Bigpipe, there is an open implementation in the works called openpipe
Bigpipe pushes the content to the browser when server stopped processing, so user will notice that it is faster.
It basically loads pagelets, when they are ready for the user, at the browser the implementation is Javascript based, and you must push the info to the client with your preferred server language.
First of all, facebook heavilycompresses images. Many other websites don't. Facebook also has a faster network than most other websites.
With the small image size, the client can prefetch the next image.
Preloaded would mean loading when the page is loaded, which is what happens with an <img> tag. No, it's simply because the file size is smaller.
If your wanting images to be viewed quicker on your site first make sure the images are decently compressed and aren't any bigger than they have to be. The amount of times I have seen websites using an extremely large image scaled down to fit in an element 5 times smaller is just ridiculous.
You can check out these sites that has many implementations and links on how to pre-load / pre-fetch images (css, JavaScript, ajax)
http://perishablepress.com/press/2009/12/28/3-ways-preload-images-css-javascript-ajax/
Since your question was tagged with 'jquery' here is one just for that.
http://engineeredweb.com/blog/09/12/preloading-images-jquery-and-javascript
This is a long shot but I've seen things which might make it posssible.
I have a div, which is filled with images. Album covers if you must know. And I want to allow users to download this as an image. So they could use it as something like a desktop background.
So is this possible? Get this visual representation of an element and display it as an image?
Basically you can't do that. At least crossbrowser. But if it is not critical. You can try <canvas>
check here http://www.nihilogic.dk/labs/canvas2image/
Assuming I understand the question...If you know the position of the images in the div, you could concatenate the images together server side into a single image. Then just have a button users can click on that will call the function to assemble and download this image.
From what I understood from your question you can use an
img
tag for this. The user can view the image in the browser and can save it to their hard drive.
from your description each of the image inside will be a different album cover, so combining these into a single image won't a good idea.
You could possibly do the rendering serverside. By this I mean that you could generate the HTML and kind of "screenshot" it on the server. The result would nearly always be at least slightly different from what the user sees, but depending on your requirements it might be enough.
There are various tools to do this, for example wkhtmltoimage, which is a sister project of wkhtmltopdf and can be found at https://code.google.com/p/wkhtmltopdf/
I need to create a slide show of some images that can go full screen so it can be displayed via S-Video out.
The software is delivered via the web so a web-based option is needed.
The list of images is dynamic, and I would like to show them in order. The list of photos can change while the slideshow is running, and I would like to add the new photos to the slideshow.
I see two options:
Build it using JavaScript and then use a browser plugin to go full screen. I have a prototype of this, however it displays photos in random order.
Build it using Flash. I know nothing about Flash so I am looking for slideshows that can go full screen.
What would be best? Are there any good, customizable Flash slideshows?
For those interested, I ended up making an Adobe AIR application using HTML and JavaScript. Adobe AIR can go full screen and I was able to leverage the knowledge of HTML and JavaScript I already have. It has worked out pretty well, though there was a rather steep learning curve for the native AIR classes and how to use them.
If you're using Flash, SlideShowPro is a good option that you may recognize from sites like ESPN.
when you say "fullscreen", do you mean taking up ENTIRE screen? if so, javascript is not a tool to use, it must live inside the browser, so you will always have some chrome visible from the browser.
flash can do full screen, on the other hand.
Most browsers allow you to go full screen (even hiding the chrome) with the F11 key (requires user input). Then it's just a matter of scaling the image in javascript to the size of the viewport. If it doesn't exists, it could be written easily enough probably from a preexisting gallery script.
Also, this answer may be helpful
Hope that helps.