I am using heatmap.js to overlay a heatmap using the GoogleMaps plugin. I would like to be able to download the picture as an image along with the heatmap overlay. I tried the method heatmapInstance.getDataURL() only returns the overlay region and not along with the image on which it is overlayed.
You need to create an id which is used inside of your div and script tags
var heatmapInstance = h337.create({
container: document.getElementById('heatMap')
});
As you can see I got the element by id 'heatmap'. So inside of your div where you want to place the picture on the page just call the id 'heatmap'
<div id='heatMap'></div>
Then simply place an image under the heatmap by using css
#heatMap {
background-image: url(HinckleyTown.jpg);
height: 445px;
width: 840px;
}
I used the same id for the css, html and javascript.
I hit this problem recently and encountered all sorts of problems getting around it. The heatmap was generated with heatmap.js and displayed successfully over a background image using CSS background-image: as described above.
The problem came when trying to save both the heatmap and background as a single image on my local machine. I think this is the problem the OP was referring to. My understanding is that the problem arises due to how heatmap.js creates a canvas within an element such as a div
A detailed search didn't come up with a solution that didn't introduce a new set of problems. I did however come across a fairly neat solution which at least met my needs.
I used Steel.Liao's post ( https://stackoverflow.com/a/36077807/9438775 ) as the basis to clone the contents of the div using html2canvas.js into a new canvas. I then set the original div to display: none .
You can then just right-click on the new canvas to save it as a PNG image file. Both the heatmap overlay and the background are contained in the saved image.
Related
I'm using Contenttool :
https://github.com/GetmeUK/ContentTools
I would like to be able to change an image.
To do that, I click on the exiting image and upload a new one.
But, when I upload a file, width and height are at 1 x 1
And the image is not replaced by the new one. What I my doing wrong?
When I valid the page, my new image appear :
I've create a sample page :
http://portekoi.com/contentTool/test.html
Your problem directly come from the way contenttools manage images editing.
Instead of working with img tag, it use a div with a background image. The behavior between the two are completly different and is the source of a lot of issue related to image management.
The best solution to me would be to write a "real" image management plugin for contenttools that would deal with image editing in an.... img tag.
After that, you could just do a simple CSS rule like that :
img { max-width:100%; height:auto; } and your images would be responsive by default.
I would like to put a Slider inside an image (specifically an iMac), like they have on unbounce homepage. I think I need a div and then jQuery, but I have no idea where to start.
The thing is the image inside the Mac changes, but not the iMac image itself.
If that helps, I am using WordPress, so I could use any plugin too.
Do you have any idea on how to do that?
Thank you,
http://i.stack.imgur.com/HVe98.png
I would suggest you to use HTML canvas for complex image rendering.
You can potentially dynamically draw what you want, where you want I'm them.
You can use canvas to rotate, move, overlay images and add listener to click events to it.
See here to start :
Dynamically add image to canvas.
Or here:
Dynamically add image to canvas
Late, but may be helpful (by increasing level of difficulty):
Use the iMac image as a frame PNG, leaving its inside "empty" using transparency. Behind it, the slider
Make a slider which every image is framde by the iMac
Position an slider hovering the iMac image
I'm trying to write something that draws on an image. I have a flow chart that's in a .png and I want to draw a circle around a specific step in the chart based on the page that the user is on. I would normally just head for HTML5 and use the <canvas> element, but it has to work on IE8, which doesn't support <canvas>. I can use jQuery, but that's the only external library that I can use. Also, the user can scroll up and down the page, so things that I've seen that use absolute positioning end up looking bad since I don't always want the image there. Any tips? Thanks.
How about a DIV containing the flowchart as a background image with another image (which would be a transparent circle outline image) sitting inside the DIV, positioned absolutely (relative to it's parent DIV) which is moved to the correct position within the div based on which page the user is on. Should be simple enough to do.
I'm trying to display a background image for a map area when a user hovers over it. Currently I've specified a separate id for each area and I have written a javascript function that triggers when the area is hovered over. To this function I pass the element id and by looking at the console I know that the function is being called with the correct element yet the background is not being displayed! Currently I've only implemented the functionality in the products tag.
I also tried giving the area a z-index of 9999 and fixed width/min-width and height/min-height.
Here is the website https://dl.dropbox.com/u/14863356/OsmosysV3/index.html
NOTE: Just an fyi to others who are facing this problem, Chrome or safari require that you have name attribute declared for map even though it is deprecated.
Why do you even need javascript? In CSS could you not do:
#welcome{
height: 300px; // or whatever
&:hover{
background: url("welcome.jpg")
}
}
Then same for the other elements.
According to this Visible Area Tag image map areas are not visually represented and hence no css is reflected on them. If you want a hover over effect over your maps, then you can find a way to do so by following this link
It's probably not the neatest way to do it, but it works.
I'm having difficulty turning an image into a clickable link. The image is a chart that's generated by a 3rd party service that we use. The functional image can be seen here:
http://jsfiddle.net/3jMdW/ (please note that I've hosted the image on imgur because otherwise you won't be able to see it.)
The problem I'm having is that the link only seems to work along the bottom edge of the image in Firefox. If I click anywhere in the middle of the image, the link doesn't work (even though the hand icon is visible). How can I fix this so that clicking anywhere in the image activates the link request.
Just to note, there is a lot of extra HTML (scripts/tags) associated with the image. This is because the charting service maps a chart to its data points for hover-over info. The client has asked for this specifically so I can't remove it.
Add href attributes to your <area> elements.
Modifying the chart template to remove everything that isn't part of the <img /> tag fixed this.