使用 JavaScript 更新图像、捕获屏幕截图并保存到磁盘答案

【问题标题】：Update Image, capture screengrab and save to disk using JavaScript使用 JavaScript 更新图像、捕获屏幕截图并保存到磁盘
【发布时间】：2012-11-22 22:10:50
【问题描述】：

刷新图片源内容并停止刷新
嗨，我有一个每秒刷新“src”属性的功能。，现在我想当我点击按钮停止时，它会停止间隔，另外，制作一个按钮来拍照并将其保存到计算机，如快照。

<img src="http://someurl" id="image1" class="g" />
<button id="stop">STOP!</button>
<button id="capture">capture</button>

Example 你可以在这里看到我写的东西并给我指路，谢谢。

【问题讨论】：

这是不可能的，你不能强迫用户下载文件，即使你做到了，它也不能在所有浏览器中工作

标签： javascript jquery

【解决方案1】：

Canvas2Image 插件可能会对您有所帮助。

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

幸运的是，canvas 对象上有一个名为 toDataURL() 的简洁函数。此函数将图像数据编码为 base64 编码的 PNG 文件，并将其作为 data: URI 返回。

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

还可以查看this question.

编辑：

刷新图片很简单：

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

Working DEMO

【讨论】：

停止刷新怎么样？