0

Image Srcコンテンツを更新し、更新を停止します
こんにちは、「src」属性を毎秒更新する機能があります。、ボタンの停止をクリックすると、間隔が停止し、さらに、スナップショットのように写真を撮ってコンピューターに保存するためのボタンが作成されます。

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

あなたは私が書いたものをここで見て、私に道順を教えてくれます、ありがとう。

4

1 に答える 1

0

Canvas2Imageプラグインが役立つかもしれません。

HTML5キャンバス要素を使用すると、Javascriptを使用して、クライアント側であらゆる種類のクールなグラフィックをその場で作成できます。ただし、キャンバス画像は(すべてのブラウザで)他の画像と同じように単にディスクに保存することはできません。

幸いなことに、toDataURL()と呼ばれるcanvasオブジェクトにはきちんとした関数があります。この関数は、画像データをbase64でエンコードされたPNGファイルとしてエンコードし、データとして返します:URI。

IEで作業するには、 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 

ワーキングデモ

于 2012-11-22T23:16:20.707 に答える