trjs canvas todataurl is blank

Question

Хорошо, я знаю, что canvas.toDataUrl() создаст изображение в формате png. Однако, когда я пытаюсь получить изображение с http://threejs.org/examples/#webgl_lines_sphere. Все, что я вижу, это черное изображение на хроме. Для повторения шагов -

1) Откройте консоль разработчика и выберите элемент холста. 2) canvas = $0 3) context = canvas.getContext('webgl', {preserveDrawingBuffer: true}) 4) img = canvas.toDataUrl() 5) document.write('<img src="'+img+'"/>')

изображение является пустым. Однако, я попробовал с другим холстом по ссылке http://threejs.org/examples/#canvas_geometry_cube. Проделайте следующие шаги для репликации.

1) Откройте консоль разработчика и выберите элемент холста. 2) canvas = $0 3) context = canvas.getContext('2d', {preserveDrawingBuffer: true}) 4) img = canvas.toDataUrl() 5) document.write('<img src="'+img+'"/>')

Это дало ожидаемый результат. Почему существует разница и как этого можно избежать, чтобы получить первое изображение?

Answer 1

Это потому, что в первом примере _{(см линейных источников 103)} действительно использует THREE.WebGLRenderer создателя, в то время как второй _{(см линейных источников 92)} использует THREE.CanvasRenderer.

Некоторые примечания:

• There is no preserveDrawingBuffer contextAttribute in the context2d API, only in the WebGL one.
• You can create only one context per canvas element.
• You can't set the preserveDrawingBuffer flag after context's creation
• With three.js you can simply call renderer.domElement.toDataURL()(вы должны пойти в the iframe target, чтобы иметь возможность звонить из Дев инструментов).
• Another solution, (и лучше, чем флаг preserveDrawingBuffer) должен вызвать canvas.toDataURL() в самом цикле рендеринга, прежде чем браузер снова примет элементы управления.