I'm running a Google Map which loads png images from server, stores them in an array and when needed, creates and shows animation of these images. As they are png images, I have issues with IE transparency support. I know about IEPNGFix.htc script, but I don't think it can be used in this situation. From what I've read it is only applicable to DOM elements. Is there a way to apply png transparency fix for these images?
Google doesn't help neither (although i would expect this to be a common problem). If you have any idea how to solve this, let me know.
You can call PNGFix on any element after it has been added to the page. See here:
http://pjdietz.com/jquery-plugins/pngfix/
You will need to hook into the event which is fired after the image has been displayed on the google map and then apply the pngfix to that new element.
Related
We want to build a google map liked javascript library to show our map data(we can not use google map or yahoo map).
We have done 60% of all the work,we can display the map tiles(img) according to user's drag operation.
Howver we found some problem:
We have a container(div element) to fill the tiles,when use drag on this container,we will do some caculatioin to see if new tiles should to be loaded.
It works. But it seems that when image are loaded,we can hardly move the mouse until imgaes are loaded completed or error.
It seems that the image load thread and the event handle thread is the same.
So any idea to fix it?
Multithreading in javascript exists, but it's still quite new. https://developer.mozilla.org/En/Using_web_workers
In order to answer this question properly I thought that I would:
Convert an in-document SVG file to a data URL
Load it into an <img>
Draw that <img> to a <canvas>
Convert that <canvas> to a PNG data URL
Load that data URL into an image.
I have an example of this attempt here:
http://phrogz.net/SVG/svg_to_png.xhtml
In Firefox I get (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage] when attempting to draw the image to the canvas in step 3.
Why do I get this error in Firefox, or how do I work around it?
In Chrome I get a SECURITY_ERR exception when I try to call toDataURL() in step 4.
Why would I get this error in Chrome, or how do I work around it?
The WhatWG specs state that the origin for an image "generated from a data: URL found in another Document or in a script" should be the same as that document. All data in this test is from the same document.
In Firefox, SVG images taint the canvas but we're working on removing that restriction in https://bugzilla.mozilla.org/show_bug.cgi?id=672013 when that bug lands what you're trying to do should be possible. This restriction has been removed in FFv12.
All browsers implement similar restrictions and all are working on removing them; generally by making what you can do in SVG images more restricted. For instance we don't want to get back to the bad old days of being able to work out what sites you've visited by creating an SVG image with links in it and then reading off the colour of the links using canvas.
In addition at the moment firefox requires that the svg element have width and height attributes in order to render to canvas. This restriction may be removed in future.
Edit by Phrogz: as noted in my comment above, I received independent confirmation that the security issue in Chrome is the same issue: Chrome (currently) always taints a canvas when an SVG document is drawn to it.
I started a web based game engine a while back, but used primarily jQuery to handle the sprites and animation, now I am learning the power of HTML5, by moving the game canvas to HTML5. So here's issue I am having: I'm using multple canvas as suggested from http://html5.litten.com/layers/canvaslayers.html to layer images.
This is not working for me, even if I set z-index to 999999: Here's my code->
http://snipt.org/xoKn
The objects layer is not on top of the tiles, thanks!
The code should work (at least the canvas handling part). I looked at your script and there may be the problem with loading images. You have
var tile = new Image();
tile.src = tiles[i]['bg'];
tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32);
but it won't work since image is not loaded yet. Instead you should use
tile.onload = function(){
tilesCtx.drawImage(tile, tiles[i]['col']*32, tiles[i]['row']*32);
}
or something like that (i.e. you won't have a reference to the i variable so it needs to be modified).
Note that in the tutorial they use setInterval(drawAll, 20); which makes it work after a while (since after a time all images will be loaded).
Of course you may lose ordering of images (although this does not seem to be important), so preloading all images at the begining and then drawing them all at once is a good idea. Give it a try and let us now if it works!
If anyone is having a similar problem I managed to solve this by loading the first layer first then the lowest layer last. Apparently it seems that whatever is loaded first will be on top.
So my solution was to just move m objects loop above my tiles loop. Interesting to me, had no idea it mattered what loads first.
Is there an alternative (and more elegant!) method of creating multiple tooltips on top of an image without using image maps? Preferably looking for a solution that makes use of jQuery, but not necessary.
While I know solutions exist with image maps, they just seem so clunky and unmaintainable. For example, what if the image comes from a dynamic source? Would that source also have to provide an image map as well, which someone would then have to create beforehand? Maybe I'm asking for too much, but on the chance that someone out there has a more elegant solution to this, I'd be very grateful.
Thanks for you help!
I understand your question, but there are two few things that we cannot break from.
Your images might be loaded dynamically
Tool-tip areas can be points, boxes, or basically ANY shape (a set of coordinates that binds a region)
Because of #2, it's impossible but to use an image map. If, however, your tool-tip areas are restricted to points and boxes, then you can make do without creating an image map. This doesn't mean that the image source doesn't have to provide any information because that doesn't make sense, it just means that the source can provide a generic JSON object that talks about the image. Once the image reaches client side, you can call a function that you wrote to create an invisible div on top of your image and based on the data you've received, create small div regions that have mouseenter() bound to them. Even with this, it's not FAR from an image map.
I guess the point I'm trying to make is that you are not getting away from having to attach data to your image AND do some processing of that data once it reaches client side. This is because you're working with such an unrestricted environment of an image that can take on any shape with your regions taking on any shape.
I'm not sure if this answers your question in any way, but usually elegance comes from taking advantage of restrictions, which in this case there is practically nothing we can work with.
I am going to have a lot of images and trying to find the most efficient way of storing these images to keep the page snappy.
So far I have thought of just the two ways: load with javascript eg picture = new Image(); picture.src = "file.jpg"; and append / remove to the page as necessary, or load into <img> and set display:none.
Are there other options? what is considered the best way to do this?
The best way for a photo gallery (if thats what you are building) is usually to have several sizes of the images, at least two:
a smallish size that is highly compressed and thus have a small footprint: this is the image you load into grids and display in a page where there are multiple images
a larger image with lower compression and higher image quality - this is the one you show when people want to see details.
Since people most often come to the detailed image from a page where the small/fast loading version has already been shown, and thus is already in the browsers cache, you do a little trick and have instant photos, without preloading anything.
It goes like this:
On the details page you show the highly compressed small image in an image tag that has the dimension of the larger detailed version. You then load the larger detailed version in the background using new Image() with an onload event attached that changes the source of the image tag with the small compressed version to the large detailed version.
It looks great, works fast and users will love you ;)
PS: the best way to store images is the browsers cache, not js or the DOM, so if you truly wish to preload images, which is generally a bad practice (tho it can be necessary sometimes), make the browser fetch them for you in the background by including a css file that references them in styles that aren't applied to visual areas of your site.
I'm not sure about "efficient", but the most logical way would be not use the JavaScript to load an image (useless if you have JavaScript disabled) or to set the image as hidden via the display property (likewise, and the browser will probably just load the image anyway).
As such, a sensible suggestion would be to use boring old paging and display 'n' images per page. However, to bring this up to date, you could use "lazy" (a.k.a. "deferred") loading and load additional page content via Ajax as the user scrolls. However, it's key that this gracefully degrades into the standard "paged" behaviour if JavaScript is disabled, etc.
The perfect example of this in operation is Google's image search, and if you search here on StackOverflow you see a discussion of possible implementations, etc.
It's better to use javascript the way that you have it and then add it to the DOM as you need, as opposed to first adding it to the to the DOM and then hiding it because DOM manipulation is much slower and you may not use some images