I have a page with a series of divs. Each div represents a slide in a slide deck. I need a series of thumbnails, one for each slide. Ideally these thumbnails would be rasterized versions of the slides: a PNG data: url would be perfect. I'd like the work to be done in the browser, and I'm okay with things that only work in one of the modern browsers (e.g. chrome, or firefox). I suspect this is impossible, but would love to hear otherwise.
The method toDataURL() on the canvas object is essentially what I want, but the divs in question aren't instances of canvas, so that won't work.
One solution can be to render HTML to a canvas by embedding the HTML into an SVG image as a <foreignObject> and then drawing the resulting image via ctx.drawImage().
Read the article on MDN here, or take a look at rasterizeHTML.js which is an implementation of said approach.
The limitations are that your content should all be same-origin clean (i.e. accessible by AJAX).
Disclaimer: I am the author of rasterizeHTML.js.
It isn't possible on the client side as this is forbidden to protect from potential frauds like for ie script that would take a screenshot of your page with some private data and send it god one knows where.
Although...
it is possible to copy whole HTML to use it as a thumb preview/whatever and use CSS3 transformations (scaling) + add overlay over it to prevent interactions/text selection etc to mimic a thumbnail of a div.
and there was an option in firefox/chrome extensions to save page to an image - though not sure if it was possible to take only part of the page as an image
or you can always do like google does on its search results page with their page preview (click the magnifying lens near the result title) - have a robot machine which enters the page and takes a screenshot of whatever to produce the preview of the page using this data - don't know how much you WANT to do that but if you wanted it that bad... :)
I'm afraid there is no easy way to do what you want and the CSS3 trick one seems to be the easiest one to pull of.
you can rasterize html to a <canvas> element in javascript with the rasterizeHTML library:
http://cburgmer.github.io/rasterizeHTML.js/
Related
I wish to create a local (offline) HTML5 page containing various sized rectangles containing a paragraph of text (and links) that can be repositioned by being dragged by the user. It's not necessary to drop them into any target; simply to drag them. But the page has to remember their final locations and show them there when it is reopened.
I did think of using Canvas to do this but drawing the text in the rectangles is very slow. Better to create a div (with a border) for each paragraph. The closest solution I have found so far is this one, where one drags the "aside". The original page is here.
What code would I need to write to store these locations locally (offline), preferably by self-modifying the HTML page itself? I understand there are localStorage and sessionStorage objects in HTML5 but have not tried using them.
PS This page is for my own use and as I use Firefox I am not interested in other browsers. I would prefer using Javascript to jQuery, but all suggestions will be most welcome.
PS While waiting for a reply, I stumbled across this site:
built with HTML5, CSS3 and JavaScript, the diagrams are created with canvas and offline usage is possible, thanks to ApplicationCache.
Would this be the way to go?
You could save the div information (positions and width, (eventually height too)) into the localstorage. When you are reloading the page you just need to get them back out of the localstorage to rerender the whole thing.
jStorage is a simple plugin where you can "speak" to your local storage. You could store an object (serialized) into this and then loop it out on your page load.
Anyone know if adding a tracking pixel (just a transparent GIF with some logging going on at the server that's sending out the GIF) as a background-image in a linked stylesheet will work the same as if it was a regular <img> on a page?
From a simple test I did in Chrome's network inspector it looks like it's just pulling images from local cache if I go into the location bar and hit enter. If I actually click Reload then I see it go out to the server and get back a 304. And if I shift+reload it'll force it to go back to the server for real and I get 200s.
But, it looks like it's the same behavior for the <img> images on the page as well, so then the behavior as a background-image should match the behavior as if it was an <img>
It should work exactly the same way. But tracking pixels are not decorative, or are specific to a single page, so it is easier to put an img tag in the HTML and a little more reliable, it will work for text browsers, etc.
Having a tracking pixel called via CSS would be possible, but there would be some challenges compared to using a tracking pixel in HTML:
Tracking pixels commonly have visitor data detected by JavaScript (monitor size, for instance) added to the pixel's URL. JavaScript would be unable to (easily) do this if the pixel was called via stylesheet.
When in the page source, the tracking pixel can be at the bottom of the page and be modified by code that executes first. This would be difficult to do in a single-pixel-call via CSS.
Do people still use the old HTML Image Maps? The ones with:
<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...
Or is there a newer, better alternative?
Yes, people do still use image maps. An alternative would be to position elements using absolute positioning and CSS but that's not necessarily better. It also doesn't allow you to have shapes like in image maps
They are in the HTML5 specification, so they will not get deprecated.
You can still freely use them, they certainly still have their place in web development. Or I could say, those rare occasions exist where you can best solve something with an image map.
An alternative solution to using CSS or image maps would be to make use of SVG graphics embedded into the HTML dom.
One tutorial on how to achieve mouseover effects using this technique is described in this tutorial: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
The key takeaway being that SVG elements also trigger traditional dom events including onmouseover and onmouseout.
Yes html image maps are good especially if you want your area to be a polygon. You can add rollover effects to you map as well with javascript. There is a nice tutorial and demo here:
http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484
Image Maps are still in HTML5 specifications, supported by all browsers.
They can be adapted to responsive design using jQuery RWD Image Maps:
https://github.com/stowball/jQuery-rwdImageMaps
It detects and automatically resize the image maps coordinates.
It's also available for Wordpress developers as plugin:
http://wordpress.org/plugins/responsive-image-maps/
Simple and effective solution.
Yes, I still use image maps, however my last project used Raphaël. It was pretty easy to get something up and running.
http://dmitrybaranovskiy.github.io/raphael/
From their web site:
Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base
for creating graphics. This means every graphical object you create is
also a DOM object, so you can attach JavaScript event handlers or
modify them later. Raphaël’s goal is to provide an adapter that will
make drawing vector art compatible cross-browser and easy.
Nice simple image map example:
http://dmitrybaranovskiy.github.io/raphael/australia.html
While I rarely see them used on modern websites anymore, they do seem to be used by my clients in their email campaigns. However, I've noticed, and confirmed that there are some scaling issues with the coordinate system on mobile devices.
** I know this thread is old, I was just doing some additional research into this for a recent email campaign issue and thought it may help someone else down the line.
3rd party edit
The question on litmus.com on image map support is from 04/2014
Image maps do not support ALT tags, when images aren't loaded the ALT text isn't displayed in some clients.
Image map usage generally results in using large images which can cause deliverability issues and hinder download speed (especially
important to mobile users).
And most importantly, The iOS (iphone/ipad) doesn't scale the image map link coordinates when the image is scaled which breaks the
links. Since iOS represents a large majority of email opens (iPhone +
iPad = 38% via http://emailclientmarketshare.com/) this is important.
Yes, it still used
An image map allows a user to hyperlink to many pages by clicking different parts of an image.Simply by using image map we create lists of coordinates relating to a specific area of the same image and give the hyperlink to a different location. By using this within a single image we give multiple links.
More
image map is quite interesting option in html and html5 they are still being use and i personally love it i therefore find issuse in mobile devices my issue is relatd to scaling
yes i have experience it my self however i am a student enrolled in html html5 and for begineers i would like to follow w3chools link
http://www.w3schools.com/html/html_images.asp
you will gain alot from this [page
i have a image that i don't want it drag-able or selectable so that no drag to other places on the page. how is that done?
If you want your visitors/users to see the resource on your page there is no way to stop them downloading it or saving it.
Possible options:
You can use JavaScript to prevent the context-menu popping up on right-click (related article: http://javascript.about.com/library/blnoright.htm).
You can cover the image with a transparent .png or .gif so that clicking on the image simple returns the transparent image.
But if the user can see the image on the webpage then it's already on their computer.
In reality this is far harder than you may think it will be, I assume you don't want people stealing your images which is a fair enough thing but just remember all the different ways in which someone can get an image from a web site. Your can catch the right click event and stop them at least doing that, but they can always just take a screenshot and save that instead. This is a slippery slope and it always ends the same way, if they really want to steal it, they're going to.
Since the image is just a binary data, and all the data is written on client PC's, for displaying reason it's up to th euser what they'll do with the data. There's no way you can prevent them from saving the picture displayed on a website.
All you might do is make it a little bit harder, by blocking right clicking on image, (displaying alert on right click, or something like this). But if the user really wants to save the picture they will do this anyway.
Why should you do it?
I can suggest a javascript that will able it: http://www.brownielocks.com/stopcopying.html
But every one, even with little experience can view the source and copy it. and even if you block them from viewing the source, they can use wireshark and get the picture directly. Even if you use flash to show the picture one can screen-capture the screen and retrieve the picture.
Put a watermark on the picture and use http://www.tineye.com/ from time to time and search for your picture. If you find others that use your picture - sue them. It is the most effective way.
It is impossible to prevent someone to store an image (or other resources) on their computer as others already have mentioned.
But another trick to make it harder (impossible for inexperienced people I guess) is to use CSS and background images:
<div style='background: url("myimage.gif");'></div>
The image is now on the background of the <div> block and cannot be dragged or right clicked in order to save it.
Using some coding knowledge it is possible to ind out the myimage.gif part, which can be added after the base URL in order download the image and save it. For example if the HTML page is at http://www.example.com/mypage.html the image could be found at http://www.example.com/myimage.gif
As I mentioned it is still possible to save the image, but for inexperienced people it is a lot harder.
Note: In this example the image is just put in the HTML tag, but with proper use of a CSS file, it is even harder to find for inexperienced people.
You cannot prevent a user from saving something from the web to his PC. The nearest thing that comes to my mind is the -moz-user-select CSS property... https://developer.mozilla.org/en/CSS/-moz-user-select
This javascript snippet does exactly what OP asks:
document.addEventListener("dragstart", preventDrag);
function preventDrag(event) {
event.preventDefault();
}
Here's the thing: I have a Google Map with a lot of markers in it.
The problem is that the map loads, stays empty for a little while and only then markers are displayed. The markers are customized PNGs.
My idea is to "preload" them (not sure it's the right word) so they appear almost at the same time as the map.
What I did so far is to add the same images I use on my map, outside of the map, earlier in the page in display:none;
I'm not sure but it seems like the time between the map and the images are displayed has been reduced.
Is it the best way to do it, and is it a good practice?
You could use "sprites" i.e. a collection of separate images on 1 single png. This bears the advantage of requiring only 1 load i.e. less separate loads. Google GWT pushes this technique a lot (i.e. Image bundles).
The value of this technique increases with the number of discrete images that require loading: the more separate images, the longer it takes to load them.
Don't use display:none for preloading. Because an element set to display:none doesn't render any of its physical attributes, the browser doesn't bother downloading it until it's made visible.
An alternative is to use visibility:hidden, but you run the risk of running into a user agent that does pretty much the same thing. visibility:hidden requires that the browser compute the box model for the image, which requires that image is loaded (to get the dimensions). I don't believe this works in IE6, though.
The last technique (and my favorite) is to create a div directly before your </body> tag. Position it absolute with left: -99999999px; top: -99999999px. The browser is forced to render the images (and consequently load them) and there's no messy Javascript to deal with.
Now, to integrate this with your issue, put the code for your Google map after your "preload div". Your browser will be forced to load the images before it runs the code to create the map. This should solve your problem.
Hope this helps!
From what I recall of most modern browsers, images are always loaded once (given the src of the image is the same). I guess you mean loading them before the maps load.
In my opinion in does not really matter that much. Markers should be relatively light compared to the map image itself and I can't really use them without the map anyway.
If you think it improve you user experience then I think it is a good practice, but I'd try to get them on a more cleaner way, probably an ajax call early in the page load?
Take a look at Ajax In Action: Preloading Images