Convert a WebPack PNG to a Buffer

I have webpack pack my png, and I can import it like so,

import A from './png/A_SingleCell.png';

I want to convert this to some sort of buffer so that I can pass the pointer to a .wasm file.

I don't need it decoded, I can do that in the wasm file.

I have been able to get the ImageData but this seems a bit cumbersome.

const canvas = document.getElementById("game-state-canvas");
const ctx = canvas.getContext('2d');


const image = new Image();
image.src = A;
image.onload = () => 
 ctx.drawImage(image, 0, 0);
 const imageData = ctx.getImageData(0, 0, 20, 20);
 const byteSize = 20 * 20 * 4;
 const pointer = alloc(byteSize);
 const array = new Uint8ClampedArray(memory.buffer, pointer, byteSize);

 const heap = new Uint8Array(memory.buffer);
 const ptr = alloc(byteSize);
 heap.set(imageData.data, pointer);

Is there a better way to either get the ImageData, or the raw unencoded buffer from the .png file?

edited Nov 14 '18 at 18:03

asked Nov 14 '18 at 17:53

christopher clark

6591133

I tried const reader = new FileReader(); const array = reader.readAsArrayBuffer(A); but the error was that A is not a blob.

– christopher clark
Nov 14 '18 at 21:34

add a comment |

I have webpack pack my png, and I can import it like so,

import A from './png/A_SingleCell.png';

I want to convert this to some sort of buffer so that I can pass the pointer to a .wasm file.

I don't need it decoded, I can do that in the wasm file.

I have been able to get the ImageData but this seems a bit cumbersome.

const canvas = document.getElementById("game-state-canvas");
const ctx = canvas.getContext('2d');


const image = new Image();
image.src = A;
image.onload = () => 
 ctx.drawImage(image, 0, 0);
 const imageData = ctx.getImageData(0, 0, 20, 20);
 const byteSize = 20 * 20 * 4;
 const pointer = alloc(byteSize);
 const array = new Uint8ClampedArray(memory.buffer, pointer, byteSize);

 const heap = new Uint8Array(memory.buffer);
 const ptr = alloc(byteSize);
 heap.set(imageData.data, pointer);

Is there a better way to either get the ImageData, or the raw unencoded buffer from the .png file?

edited Nov 14 '18 at 18:03

asked Nov 14 '18 at 17:53

christopher clark

6591133

I tried const reader = new FileReader(); const array = reader.readAsArrayBuffer(A); but the error was that A is not a blob.

– christopher clark
Nov 14 '18 at 21:34

add a comment |

I have webpack pack my png, and I can import it like so,

import A from './png/A_SingleCell.png';

I want to convert this to some sort of buffer so that I can pass the pointer to a .wasm file.

I don't need it decoded, I can do that in the wasm file.

I have been able to get the ImageData but this seems a bit cumbersome.

const canvas = document.getElementById("game-state-canvas");
const ctx = canvas.getContext('2d');


const image = new Image();
image.src = A;
image.onload = () => 
 ctx.drawImage(image, 0, 0);
 const imageData = ctx.getImageData(0, 0, 20, 20);
 const byteSize = 20 * 20 * 4;
 const pointer = alloc(byteSize);
 const array = new Uint8ClampedArray(memory.buffer, pointer, byteSize);

 const heap = new Uint8Array(memory.buffer);
 const ptr = alloc(byteSize);
 heap.set(imageData.data, pointer);

Is there a better way to either get the ImageData, or the raw unencoded buffer from the .png file?

edited Nov 14 '18 at 18:03

asked Nov 14 '18 at 17:53

christopher clark

6591133

I have webpack pack my png, and I can import it like so,

import A from './png/A_SingleCell.png';

I want to convert this to some sort of buffer so that I can pass the pointer to a .wasm file.

I don't need it decoded, I can do that in the wasm file.

I have been able to get the ImageData but this seems a bit cumbersome.

const canvas = document.getElementById("game-state-canvas");
const ctx = canvas.getContext('2d');


const image = new Image();
image.src = A;
image.onload = () => 
 ctx.drawImage(image, 0, 0);
 const imageData = ctx.getImageData(0, 0, 20, 20);
 const byteSize = 20 * 20 * 4;
 const pointer = alloc(byteSize);
 const array = new Uint8ClampedArray(memory.buffer, pointer, byteSize);

 const heap = new Uint8Array(memory.buffer);
 const ptr = alloc(byteSize);
 heap.set(imageData.data, pointer);

Is there a better way to either get the ImageData, or the raw unencoded buffer from the .png file?

javascript webpack arraybuffer webassembly

edited Nov 14 '18 at 18:03

asked Nov 14 '18 at 17:53

christopher clark

6591133

edited Nov 14 '18 at 18:03

asked Nov 14 '18 at 17:53

christopher clark

6591133

edited Nov 14 '18 at 18:03

asked Nov 14 '18 at 17:53

christopher clark

6591133

asked Nov 14 '18 at 17:53

christopher clark

6591133

asked Nov 14 '18 at 17:53

christopher clark

6591133

I tried const reader = new FileReader(); const array = reader.readAsArrayBuffer(A); but the error was that A is not a blob.

– christopher clark
Nov 14 '18 at 21:34

add a comment |

I tried const reader = new FileReader(); const array = reader.readAsArrayBuffer(A); but the error was that A is not a blob.

– christopher clark
Nov 14 '18 at 21:34

I tried const reader = new FileReader(); const array = reader.readAsArrayBuffer(A); but the error was that A is not a blob.

– christopher clark
Nov 14 '18 at 21:34

add a comment |

0

active

oldest

votes

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53306146%2fconvert-a-webpack-png-to-a-buffer%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

0

active

oldest

votes

0

active

oldest

votes

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb