Refresh Image Src content and Stop the refreshing
Hi, i have a function that refresh the "src" attr every second. , now i want when i click button stop, it will stop the interval, in addtion, to make a button to take the picture and save it to computer, like snapshot.
<img src="http://someurl" id="image1" class="g" />
<button id="stop">STOP!</button>
<button id="capture">capture</button>
Example you can see here what i wrote and give me directions , thanks.
Canvas2Image plugin might help you.
Using the HTML5 canvas element, you can create all sorts of cool graphics client-side on the fly using Javascript. However, the canvas image cannot (in all browsers) simply be saved to disk as any other image.
Luckily there is a neat function on the the canvas object called toDataURL(). This functions encodes the image data as a base64 encoded PNG file and returns it as a data: URI.
To work in IE you'll need a canvas support library such as http://excanvas.sourceforge.net/
Also check out this question.
Edit:
Refreshing image is simple:
//Declare array of images
var images = ['http://www.creativereview.co.uk/images/uploads/2012/10/1_press_image_l_for_the_lol_of_cats_l_maru_0.jpg',
'http://blog.naseeb.com/wp-content/uploads/2010/12/cute-cat.jpg',
'http://www.helpinghomelesscats.com/images/cat1.jpg'];
var loop = 0;
//This function will refresh image on specified interval
function refreshImages() {
$('#myimage').attr('src', images[loop]);
loop++;
if (loop === images.length) {
loop = 0;
}
}
//Set Refresh time here
var setInt = self.setInterval(function() {
refreshImages();
}, 1000);
//This button stops the image refreshing
$('#stop').click(function() {
setInt = window.clearInterval(setInt);
});
//Add image capture code here
