Làm cách nào để lưu hình ảnh từ canvas Ba.js?

Question

Làm cách nào để lưu hình ảnh từ canvas Ba.js?

Tôi đang cố sử dụng Canvas2Image nhưng không thích chơi với Threejs. Vì canvas không được định nghĩa cho đến khi nó có một div để gắn đối tượng canvas vào.

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

Answer 1

Kể từ khi toDataURL là một phương pháp của nguyên tố canvas html, mà sẽ làm việc cho bối cảnh 3d quá. Nhưng bạn phải chăm sóc vài thứ.

1. Hãy chắc chắn rằng khi bối cảnh 3D được khởi tạo bạn thiết preserveDrawingBuffer cờ là true, như vậy:

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

2. Sau đó, người dùng canvas.toDataURL() để có được những hình ảnh

Trong threejs bạn sẽ phải làm theo sau khi trình kết xuất được khởi tạo:

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

Cũng xin lưu ý rằng điều này có thể có tác động hiệu suất. (Đọc: https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008)

Đây là chỉ cho webgl renderer, trong trường hợp threejs canvasRenderer tuy nhiên, bạn chỉ có thể làm renderer.domElement.toDataURL(); trực tiếp, không có tham số khởi tạo cần thiết.

Thử nghiệm webgl của tôi: http://jsfiddle.net/TxcTr/3/ nhấn 'p' vào ảnh chụp màn hình.

Đạo cụ để gaitat, tôi vừa theo liên kết trong nhận xét của anh ấy để nhận câu trả lời này.

Answer 2

Tôi đã đọc cuộc trò chuyện do Dinesh đăng (https://github.com/mrdoob/three.js/pull/421#issuecomment-1792008) và đưa ra giải pháp không làm chậm ứng dụng của bạn.

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

Với điều này, bạn có thể rời khỏi bảo quảnDrawingBuffer-Gắn cờ sai và vẫn nhận được hình ảnh từ THREE.js. Đơn giản chỉ cần đặt getImageData thành true và gọi render() và bạn tốt để đi.

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

Hope this helps những người như tôi, những người cần fps cao :)