Creating a PNG file from a Uint8Array containing RGBA data

Question

Creating a PNG file from a Uint8Array containing RGBA data

I am currently attempting to save a screenshot of a specific area in ThreeJS to a file.

Initial attempts involved displaying the image in a new tab using:

window.open(renderer.domElement.toDataURL("image/png"));

The renderer object used has preserveDrawingBuffer set to true.

However, since this captures the entire scene, I switched to:

    var gl = renderer.getContext();
    var pixels = new Uint8Array(width * height * 4);
    gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);
    window.open("data:image/png;base64," + btoa(String.fromCharCode.apply(null, pixels)));

After making this change, only a grey outlined square is rendered on screen.

https://i.sstatic.net/Zk4tv.png

javascript three.js webgl

Answer 1

Answer №1

After realizing that the data was not in the right format for a PNG, a solution was devised.

    var gl = renderer.getContext();
    var pixels = new Uint8Array(width * height * 4);
    gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    var imageData = ctx.createImageData(width, height);

    for(var i = 0; i < imageData.data.length; i+=4) {
        imageData.data[i + 0] = pixels[i + 0];
        imageData.data[i + 1] = pixels[i + 1];
        imageData.data[i + 2] = pixels[i + 2];
        imageData.data[i + 3] = pixels[i + 3];
    }

    ctx.putImageData(imageData,0,0);
    window.open(canvas.toDataURL("image/png"));
    canvas.remove();

Though not the most elegant solution, it proved effective in this case.

Answer 2

After realizing that the data was not in the right format for a PNG, a solution was devised.

    var gl = renderer.getContext();
    var pixels = new Uint8Array(width * height * 4);
    gl.readPixels(x, y, width, height, gl.RGBA, gl.UNSIGNED_BYTE, pixels);

    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext("2d");
    var imageData = ctx.createImageData(width, height);

    for(var i = 0; i < imageData.data.length; i+=4) {
        imageData.data[i + 0] = pixels[i + 0];
        imageData.data[i + 1] = pixels[i + 1];
        imageData.data[i + 2] = pixels[i + 2];
        imageData.data[i + 3] = pixels[i + 3];
    }

    ctx.putImageData(imageData,0,0);
    window.open(canvas.toDataURL("image/png"));
    canvas.remove();

Though not the most elegant solution, it proved effective in this case.

Answer 3

Answer №2

To extract a small portion of an image, you can avoid using gl.readPixels by utilizing the width and height parameters in the drawImage function.

var gl = renderer.getContext();

var ctx = document.createElement('canvas').getContext("2d");

ctx.canvas.width = width;
ctx.canvas.height = height;

ctx.drawImage(gl.canvas, 0, 0, width, height, 0, 0, width, height);

window.open(ctx.canvas.toDataURL());

There are 3 different versions of the drawImage method:

drawImage(image, dstX, dstY)

drawImage(image, dstX, dstY, dstWidth, dstHeight)

drawImage(image, srcX, srcY, srcWidth, srcHeight, dstX, dstY, dstWidth, dstHeight)

Answer 4

To extract a small portion of an image, you can avoid using gl.readPixels by utilizing the width and height parameters in the drawImage function.

var gl = renderer.getContext();

var ctx = document.createElement('canvas').getContext("2d");

ctx.canvas.width = width;
ctx.canvas.height = height;

ctx.drawImage(gl.canvas, 0, 0, width, height, 0, 0, width, height);

window.open(ctx.canvas.toDataURL());

There are 3 different versions of the drawImage method:

drawImage(image, dstX, dstY)

drawImage(image, dstX, dstY, dstWidth, dstHeight)

drawImage(image, srcX, srcY, srcWidth, srcHeight, dstX, dstY, dstWidth, dstHeight)

Creating a PNG file from a Uint8Array containing RGBA data

Answer №1

Answer №2

Similar questions

Having difficulty retrieving the value of a variable obtained from the Google Distance Matrix function

Currently in motion post file selection

Creative Solution for Nested Forms

alert message specific to a certain page (triggered by clicking the back button, accessing the menu, or pressing a particular button

Unable to fetch data using getJSON method

Issues encountered when incorporating personalized CSS into a Vuetify element

Error: Unable to locate the include file

Unable to access property value in React component

Trigger the Input event on Android with Nuxt

Changing the color of specific sprites in three.js

A step-by-step guide to extracting live data using cheerio and socketio

There was a SyntaxError that caught me by surprise in my Javascript code when it unexpectedly encountered

What is the importance of utilizing mutation in Vuex to modify the state in a Vue.js application?

Bring in multiple classes from node_modules

Creating webpages dynamically by utilizing Javascript

Exploring the utilization of functions beyond module exports

What is the process for incorporating multiple HTML pages into an Ionic hybrid mobile application?

Generating numerous checkboxes dynamically

"Enhancing Real-Time Communication in Angular with Websockets and $rootScope's Apply

Utilize an Express.js controller to retrieve information from an API service and display it on the view