Created
April 17, 2023 07:32
-
-
Save padmkris123/1e0c3e44698276ba4baa70c9f51e6646 to your computer and use it in GitHub Desktop.
ImageBlob example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| function createBlueBox() { | |
| const width = 8; | |
| const height = 8; | |
| let buffer = new ArrayBuffer(width * height * 4); | |
| let colorArrayView = new Uint8Array(buffer); | |
| // Define pixels. Fill it with blue. | |
| for (let i = 0; i < colorArrayView.length / 4; i++) { | |
| colorArrayView[i * 4] = 0x00; // R | |
| colorArrayView[i * 4 + 1] = 0x0; // G | |
| colorArrayView[i * 4 + 2] = 0xFF; // B | |
| colorArrayView[i * 4 + 3] = 0xFF; // Alpha | |
| } | |
| const imageMetaData = { | |
| width, | |
| height, | |
| colorSpace: "RGB", | |
| colorProfile: "", | |
| pixelFormat: "RGBA", | |
| components: 4, | |
| componentSize: 8, | |
| hasAlpha: true, | |
| type: "image/uncompressed", | |
| } | |
| // Create ImageBlob and a URL representing the pixels | |
| const imageBlob = new ImageBlob(colorArrayView, imageMetaData); | |
| const url = URL.createObjectURL(imageBlob); | |
| // Set the image src | |
| const imageElement = document.getElementById("image"); | |
| imageElement.src = url; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment