1

I have a scene with 2 textures, that loaded from jpg. I make

 imgData = renderer.domElement.toDataURL(strMime)

and see black image. I found this question and took from him this lines:

 texture.needsUpdate = true
 texture2.needsUpdate = true

but result jpg file is black square. I make a codepen with full code for reproduce this case

How save jpg frame image correctly? Thanks!

tolyan
  • 809
  • 3
  • 10
  • 27

1 Answers1

1

Save it after call to renderer.render(scene, camera), when the canvas is guaranteed to be initialized with some render output.

For example:

var saveRequested = false;

function render() {
    renderer.render(scene, camera);

    // FIX: scene is rendered, ready to save it
    if (saveRequested) {
        saveAsImage2();
        saveRequested = false;
    }
}

function saveAsImage() {
    // say, need to take a snapshot after next frame is rendered
    saveRequested = true;
}

function saveAsImage2() {
    var imgData, imgNode;

    try {
        var strMime = "image/jpeg";
        var strDownloadMime = "image/octet-stream";

        let imgData = renderer.domElement.toDataURL(strMime);
        console.log(imgData);

        saveFile(imgData.replace(strMime, strDownloadMime), "test.jpg");

    } catch (e) {
        console.log(e);
        return;
    }
}
Alex Khoroshylov
  • 2,234
  • 1
  • 17
  • 28
  • Alex, as you see in codepen, I make saveAs by clicking a link. So, renderer.render(scene, camera) is executed before click – tolyan Mar 22 '19 at 16:45
  • pls try to apply my changes, I was not able to update your codepen example – Alex Khoroshylov Mar 22 '19 at 19:16
  • Alex, sorry, I not carefully read your code at first time. i did as you said, and now all working good. Thanks! – tolyan Mar 23 '19 at 08:38
  • Alex, I have one thought that I would like to discuss with you. Unfortunately stackoverflow does not allow to send private messages. If you are comfortable, please contact me tolyan.com@gmail.com Thanks! – tolyan Mar 25 '19 at 10:54