This question already has answers here:
How can I convert an HTML element to a canvas element?
(10 answers)
Closed 8 years ago.
I want to save screenshot of the current page ( full page with scroll) and save it as an image or pdf .
You can use html2canvas js library to take a screen shot and then use canvas in javascript to download/save.
HTML
<button id="save-img">Download</button>
JS/jQuery
$("#save-img").click(function () {
html2canvas(document.body, {
onrendered: function(canvas) {
document.location = canvas.toDataURL("image/png");
}
});
});
Or read this article if you want to achieve this in asp.net using DataVisualization.
Hope that helps.
Related
This question already has answers here:
How to put a gif with Canvas
(6 answers)
How to save canvas animation as gif or webm?
(2 answers)
Closed 4 years ago.
In my application, I'm trying to convert a div to image and download it.
This is my usual div:
<div style="width:200px;height:200px;">
<div style="width:100px;height:200px;float:left;">
<img src="images/1.gif">
</div>
<div style="width:100px;height:200px;float:left;">
<h1>Text comes here</h1>
</div>
</div>
My div usually contains a gif image & I'm using HTML2CANVAS for the convertions. This is my code for converting HTML to Image:
$('.toimage').click(function(){
html2canvas($('#myDiv'), {
onrendered: function(canvas) {
var img = canvas.toDataURL('image/gif');
console.log(img);
saveAs(canvas.toDataURL(), 'file.gif');
// also tested with the code below
// saveAs(img, 'file.gif');
}
});
});
function saveAs(uri, filename) {
var link = document.createElement('a');
if (typeof link.download === 'string') {
link.href = uri;
link.download = filename;
//Firefox requires the link to be in the body
document.body.appendChild(link);
//simulate click
link.click();
//remove the link when done
document.body.removeChild(link);
} else {
window.open(uri);
}
}
Everything works fine beside the gif animation. I already know in browsers like chrome, firefox & opera, browser ignores canvas.toDataURL('image/gif') and runs canvas.toDataURL('image/png'), so the code would be as: data:image/png;base64 instead of data:image/gif;base64.
But I tested on more browsers and only browser that actually does data:image/gif;base64 is Safari, but my problem is that even that the div has been converted to data:image/gif;base64 my images loses the animation that <img src="images/1.gif"> contains and only the first frame shows up.
Basically what I wish is to have/keep the animation to the image and only use whatever browser that supports that.
Any help and feedback are appreciated and thanks in advance!
This question already has answers here:
Official way to ask jQuery wait for all images to load before executing something
(11 answers)
Closed 6 years ago.
I have a simply script. For example:
var rowCount = $('tr').length;
document.write(rowCount);
I want to load this after entire webpage has loaded. How can I do?
Use following script:
<script type="text/javascript">
$(document).ready(function () {
var rowCount = $('tr').length;
document.write(rowCount);
});
</script>
This question already has answers here:
Redirect html5 video after play
(7 answers)
Closed 9 years ago.
so I want to have a short video intro for my website then it will go fade out and straight to my main site. Sorta like this: http://www.firecrackerfilms.com/.
This is my Code:
<video id="video" src="Inception.mp4" autoplay height: 100% width=100%>
The video works fine but after it finishes it just stays there and doesn't go to the main page. Any tips or solutions would be greatly appreciated!
Thanks!
In window.onload, bind an event handler to the video element's "ended" event. In that handler, you can either redirect the page or load content with AJAX. Something like:
window.onload= function () {
document.getElementById("video").onended = function () {
// video done playing
};
};
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Create links in HTML canvas
I have filled text in a html5 canvas using
window.onload = function() {
var theCanvas = document.getElementById('Canvas1');
if (theCanvas && theCanvas.getContext) {
var ctx = theCanvas.getContext("2d");
if (ctx) {
ctx.fillStyle = "yellow";
ctx.fillText("INDEX",325,105);
}}}
Now i want to hyperlink whatever text i have entered how do i do that? Thank you
Short of creating a system that parses the text for hyperlinks, measures its position and checks for clicks on it, you can't.
This question already has answers here:
jQuery/JavaScript to replace broken images
(32 answers)
Closed 6 years ago.
I need to be able to detect if an image is broken and replace with a default image if the image link is broken. I know i could do this with an image proxy, but was hoping to do it on the fly with javascript.
I believe it's the onerror event of the img element. onerror=function(){} though i've never used it.
As any event the onerror will propagate upwards on the DOM, so you could make a generic handler for this type of errors.
<script type="text/javascript">
jQuery(document).bind('error', function(event) {
console.log(event.target.src);
});
</script>
You can use <img onerror='doWhateverFunction()' etc etc
http://msdn.microsoft.com/en-us/library/cc197053(v=VS.85).aspx
Example of code:
<script language='javascript'>
function defaultImage(img)
{
img.onerror = "";
img.src = 'default.gif';
}
</script>
<img alt="My Image" src="someimage.gif" onerror="defaultImage(this);" />