Update Image, Capture Screengrab And Save To Disk Using Javascript

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,

Solution 1:

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 imagesvar 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 functionrefreshImages() {
        $('#myimage').attr('src', images[loop]);

        loop++;

        if (loop === images.length) {
            loop = 0;
        }
    }

    //Set Refresh time herevar setInt = self.setInterval(function() {
        refreshImages();
    }, 1000);

    //This button stops the image refreshing
    $('#stop').click(function() {
        setInt = window.clearInterval(setInt);
    });​

    //Add image capture code here 

Working DEMO