使用JavaScript更新图像，捕获屏幕抓图并保存到磁盘 [英] Update Image, capture screengrab and save to disk using JavaScript

问题描述

刷新Image Src内容并停止刷新
我有一个函数，它每秒刷新一次"src" attr. ，现在我想当我单击按钮停止时，它还会停止间隔，以使按钮拍摄照片并将其保存到计算机，例如快照.

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 插件可能会对您有所帮助.

Canvas2Image plugin might help you.

使用HTML5 canvas元素，您可以使用Javascript动态创建各种炫酷的图形客户端.但是，不能(在所有浏览器中)将画布图像像其他任何图像一样简单地保存到磁盘.

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.

幸运的是，画布对象上有一个名为toDataURL()的整型函数.此函数将图像数据编码为base64编码的PNG文件，并将其作为数据URI返回.

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.

要在IE中工作，您需要一个画布支持库，例如 http://excanvas.sourceforge.net/

To work in IE you'll need a canvas support library such as http://excanvas.sourceforge.net/

也请查看这个问题.

刷新图像很简单:

    //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 

工作演示

这篇关于使用JavaScript更新图像，捕获屏幕抓图并保存到磁盘的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！