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/
Related
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.
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.
Normally when you keep <img/> tag it shows from top to bottom while it is being downloaded from the web and looks very ugly but if you somebody's Facebook album and click on some photo you will see the whole photo is downloaded i.e the whole photo looks blurry/hazy and then as it downloaded from the web the picture goes clearer and clearer.
It looks so natural and as against the default behavior. How can this be done? I know it is Facebook and they can do anything they wish ;) but I need a brief overview of what they might have done to achieve this.
It's the image that is in special form - saved as progressive.
About progressive JPEG:
A simple or "baseline" JPEG file is stored as one top-to-bottom scan of the
image. Progressive JPEG divides the file into a series of scans. The first
scan shows the image at the equivalent of a very low quality setting, and
therefore it takes very little space. Following scans gradually improve the
quality. Each scan adds to the data already provided, so that the total
storage requirement is roughly the same as for a baseline JPEG image of the
same quality as the final scan. (Basically, progressive JPEG is just a
rearrangement of the same data into a more complicated order.)
More information here.
Interlaced jpg's do that. As far as I know, it's not code, but it's how you edit/save the image in the image editor.
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
I would like a user to be able to edit an image that I serve, using Javascript, and then upload that image back into App Engine.
Original image is stored as Blob in DataStore.
Image is served (currently) just using
Currently user can only view the image, but i want user to be able to edit the images (adding text and lines at most, no complex transformation needed).
User can save the image back into the web application.
What is the quickest way to do this?
Will it be easy to integrate with 3rd party javascript image libraries (which has the editing tools already)?
Your starting point (and minimum requirement) for line art (read: not pixels but as you say: text and lines) will be the HTML5 Canvas Object:
http://www.w3schools.com/html5/html5_canvas.asp
Depending on your use case you may want to 'underlay' the pixel image to be decorated.
For saving refer to
http://www.tutorialspoint.com/html5/canvas_states.htm and
How to save HTML5 canvas?
If the end results shall be pixels, Canvas2Image might by for you.
Sorry to just throw general links at you, but since you asked in a general way. Hope this helps.