Как сохранить изображение с холста Three.js?

Question

Как сохранить изображение с холста Three.js?

Я пытаюсь использовать Canvas2Image, но он не любит играть с Threejs. Так как холст не определен, пока у него нет div, к которому нужно прикрепить объект холста.

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

Answer 1

Так как toDataURL является методом HTML-элемента canvas, он будет работать и для трехмерного контекста. Но вы должны позаботиться о нескольких вещах.

1. Убедитесь, что при инициализации 3D-контекста вы установили preserveDrawingBuffer признак истины, вот так:

   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)

Это только для рендерера webgl, но в случае с Threejs canvasRenderer вы можете просто сделать renderer.domElement.toDataURL(); напрямую, параметр инициализации не требуется.

Мой эксперимент с webgl: http://jsfiddle.net/TxcTr/3/ нажмите " p ", чтобы сделать скриншот.

Реквизит для gaitat, я просто gaitat по ссылке в своем комментарии, чтобы добраться до этого ответа.

Answer 2

Я прочитал беседу, опубликованную Динешем ( https://github.com/mrdoob/three.js/pull/421), и нашел решение, которое не замедлит работу вашего приложения.

    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();
}