javascript - Three.jsキャンバスから画像をどのように保存しますか？

Question

Three.jsキャンバスから画像をどのように保存しますか？

Canvas2Imageを使おうとしていますが、Threejsで遊ぶのが好きではありません。キャンバスは、キャンバスオブジェクトをアタッチするdivができるまで定義されないためです。

http://ajaxian.com/archives/canvas2image-save-out-your-canvas-data-to-images

Answer 1

toDataURLはcanvashtml要素のメソッドであるため、3Dコンテキストでも機能します。しかし、あなたはいくつかのことに気を配らなければなりません。

1. 3Dコンテキストが初期化されるときに、次のpreserveDrawingBufferようにフラグをtrueに設定していることを確認してください。

   var context = canvas.getContext("experimental-webgl", {preserveDrawingBuffer: true});
   

2. 次に、ユーザーcanvas.toDataURL()が画像を取得します

threejsでは、レンダラーがインスタンス化されるときに次のことを行う必要があります。

new THREE.WebGLRenderer({
    preserveDrawingBuffer: true 
});

また、これはパフォーマンスに影響を与える可能性があることに注意してください。（読む：https ：//github.com/mrdoob/three.js/pull/421#issuecomment-1792008 ）

これはwebglレンダラー専用ですが、threejsのcanvasRendererの場合は、renderer.domElement.toDataURL();直接実行できます。初期化パラメーターは必要ありません。

私のwebgl実験： http： //jsfiddle.net/TxcTr/3/ 「 p 」を押してスクリーンショットを撮ります。

gaitatの小道具、私は彼のコメントのリンクをたどってこの答えにたどり着きました。

Answer 2

Dinesh（ https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008 ）によって投稿された会話を読み、アプリケーションの速度を低下させないソリューションを考え出しました。

    function render() { 
        requestAnimationFrame(render);
        renderer.render(scene, camera);
        if(getImageData == true){
            imgData = renderer.domElement.toDataURL();
            getImageData = false;
        }
    } 

これにより、preserveDrawingBuffer-Flagをfalseのままにして、THREE.jsから画像を取得できます。getImageDataをtrueに設定し、render（）を呼び出すだけで、準備は完了です。

getImageData = true;
render();
console.debug(imgData);

これが高いfpsを必要とする私のような人々に役立つことを願っています:)

Answer 3

キャンバスを使用してURLを作成すると、同じものをダウンロードできます

function createImage(saveAsFileName) {

    var canvas = document.getElementById("canvas");

    var url = canvas.toDataURL();

    var link = document.createElement('a');

    link.setAttribute('href', url);
    link.setAttribute('target', '_blank');
    link.setAttribute('download', saveAsFileName);

    link.click();
}