Stack Overflow
Stack Overflow

Questions tagged [imagebitmap]

The ImageBitmap web interface holds a bitmap image that can be rendered directly by the browser (generally on a HTML canvas element or OffscreenCanvas).

The ImageBitmap interface allows to generate bitmap images from various sources (HTMLImageElement, HTMLVideoElement, SVGImageElement, HTMLCanvasElement, OffscreenCanvas, ImageData, Blob and ImageBitmap).

Some methods from the web-API can return such an ImageBitmap object, but the most common method to create one is to use the global createImageBitmap() method, which also accepts arguments to crop, resize, flip and set the bitmap's color-profile.

The bitmap data living in the GPU can be used by the UA as a texture directly, offering a very performant path to draw a bitmap to the screen.

MDN documentation
Specifications

11 questions
3
votes
1 answer

How can I use createImageBitmap with raw data as input rather then an image

I am writing a data viz app that requires me to process very large 2D arrays of data and convert that data into a scaled down image for display in a canvas in the DOM. I am bumping up against DOM canvas size limitations. My arrays can be as large…
dugla
  • 12,774
  • 26
  • 88
  • 136
2
votes
0 answers

How to draw pixels from WASM to an HTML canvas with minimal copying?

I'm writing a browser game in Rust. The basic flow is in WASM memory we have an array of pixels. Every frame we change some pixels based on user input, then we draw that image to a . I'm doing this by creating an ImageBitmap from an…
A. Kriegman
  • 510
  • 1
  • 4
  • 18
1
vote
1 answer

Problem with loading assets into canvas - Uncaught (in promise) DOMException: An attempt was made to use an object that is not, or is no longer usable

I'm trying to load images from my array using the drawImage canvas method. The problem is that it sometimes throws me the following error Uncaught (in promise) DOMException: An attempt was made to use an object that is not, or is no longer,…
anathrax
  • 91
  • 1
  • 1
  • 11
1
vote
1 answer

ImageBitmap from SVG - Jagged Text for some Font Sizes

I am dynamically creating SVG code containing text on a transparent background. The SVG should be drawn on a canvas, fonts should come from Google Fonts. The problem: While the approach basically works, some font sizes apparently yield bad alpha…
hschmiedhofer
  • 43
  • 5
1
vote
1 answer

Cannot create bitmap from SVG

I'm trying to create a bitmap from a SVG file but I'm getting the following error: Uncaught (in promise) DOMException: The source image could not be decoded. I'm using the following code: const response = await fetch(MARKER_PATH); const svgStr =…
Antonio Gamiz Delgado
  • 1,871
  • 1
  • 12
  • 33
1
vote
1 answer

Is it possible to get pixels from ImageBitMap web object without a canvas?

I need to manage pixels from a webcam in js. I need them in Uint8ClampedArray format. So far I do this.imageCapture.grabFrame() .then(imageBitmap => { this.context2d.drawImage(imageBitmap, 0, 0,imageBitmap.width,…
Michaël Merlange
  • 13
  • 3
1
vote
2 answers

Drawing ImageBitMap/Image to OffScreenCanvas in a web-worker

I have a vue.js application where I set up vue-workers/web-workers to perform some image processing(scaling/cropping) in the background after a user uploads a couple images. I decided to go with ImageBitMpas & OffScreenCanvas since Canvas and Image…
vpandher
  • 31
  • 2
  • 5
0
votes
1 answer

Is it possible to transfer ImageBitmap directly from JS to WebAssembly and convert it to ImageData there?

Is it possible to transfer ImageBitmap directly from JS to WebAssembly without converting it to a typed array? Can ImageBitmap be some kind of "transferable" object between JS and WebAssembly as it is between the main thread and web worker? The idea…
Liubomyr
  • 53
  • 4
0
votes
1 answer

Generate action icon from svg image?

I'm trying make my action icon dynamic by manipulating it with offscreenCanvas(): service_worker.js const iconFile = `icon.png`; const canvas = new OffscreenCanvas(24, 24), ctx = canvas.getContext("2d"); fetch(iconFile) .then(r =>…
vanowm
  • 9,466
  • 2
  • 21
  • 37
0
votes
1 answer

Mediapipe pose SegmentationMask python javascript differences

I am developing a pose recognition webapp using mediapipe pose library (https://google.github.io/mediapipe/solutions/pose.html). I am using the segmentationMask to find some specific points of the human body that satisfy a constraint (the value in…
Francesco Marzano
  • 3
  • 3
0
votes
1 answer

createImageBitmap only executing after page is reloaded

When I load up my webpage, the createImageBitmap lines don't run and my list of promises is left empty, but when I reload the page, the promises are in the list, and the list seems to have been filled before the function is called. This is causing…
Red Wizard
  • 23
  • 3