0 
<div id="1" class="aaa" style="position: relative; left: 50px; top: 50px; width: 300px; height: 200px; border: solid 1px; background: #dddddd; overflow: hidden;">
    <div style="position: relative; left: 30px; top: 25px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='red';"></div>
    <div style="position: relative; left: 160px; top: 70px; width: 100px; height: 50px; background: blue;" onmouseenter="this.style.background='orange';"></div>
</div>
<div id="2" class="bbb" style="position: relative; left: 250px; top: 100px; width: 50px; height: 20px; border: solid 1px; background: #cccccc; text-align: center; overflow: hidden;">click</div>

http://jsfiddle.net/FWyBQ/

複数のインタラクティブな div を含む 1 つの div (id="1" class="aaa") があります。このインタラクティブなコンテンツの状態は、他の div (id="2" class="bbb") をクリックして画像 (gif?) としてレンダリングできる必要があります。

その画像は、できれば新しいタブまたはウィンドウで開く必要があります。または、右クリック > その場で保存します。

ps html2canvas や phantomjs などのスクリプトは知っていますが、私の場合はそれらを実装する方法がわかりません。

編集：

今、私はこのソリューションを実装しようとしています。これは、少し調整するだけで processing.js ( http://cloud.github.com/downloads/processing-js/processing-js/processing-1.4.1.min. js )。

必要な機能を実現するには、適切な jquery コードと processing.js が必要だと思います。私はこれを試しましたが、うまくいきません：

$('.bbb').click(function (e) {
        var canvas = document.getElementById("1"),
            img    = canvas.toDataURL("image/png");
        $('.aaa').document.write('<img src="'+img+'"/>');
    });
4

2 に答える 2

1

これには html2canvas を使用できます。ページに html2canvas ライブラリを含めて、次のようなことを試してください。

  //element would be your aaa div
  html2canvas(element, {
    onrendered: function(canvas) {
        // canvas is the resulting canvas generated from the element
        var url = canvas.toDataURL("image/png");
    }
  });

次に、この質問への回答の 1 つにあるように、「url」の値を PHP スクリプトに投稿する必要があります。

編集

新しいコードが機能しない理由は、id が「1」の要素がキャンバス要素ではないためです。そのdiv。

toDataUrl() のような Canvas メソッドは、Canvas 要素でのみ呼び出すことができます (これが、html2canvas を使用して div を Canvas に変更することを提案した理由です)。

ID「1」の要素がキャンバスである場合にコードがどのように機能するかを示すために、jsfiddle をフォークしました。

http://jsfiddle.net/_Pez/cksGt/1/

_ペッツ

于 2013-09-22T22:30:30.760 に答える