Stack Overflow
Stack Overflow

Questions tagged [getimagedata]

a function to access the raw pixel data of HTML5 canvas element.

a function to access the raw pixel data of HTML5 canvas element.

For more information see the MDN documentation of CanvasRenderingContext2D.

211 questions
4
votes
2 answers

html5 canvas always returns 8bits of color when using getImageData()

I am using an html5 canvas to render and image, do some basic editing of the image than trying to use the getImageData(0 function to read through the pixels and do some work. I have notices thou, no matter what bit depth the source image is (8 bit,…
QBM5
  • 2,778
  • 2
  • 17
  • 24
4
votes
2 answers

Rendering multiple pages of pdf to single Canvas using pdf.js and ImageData

I am trying to render pdf onto the single canvas, I referred to the below link to implement the same. Visit: Render .pdf to single Canvas using pdf.js and ImageData var pdf = null; PDFJS.disableWorker = true; var pages = new Array(); var…
DareDev
  • 43
  • 1
  • 1
  • 4
4
votes
1 answer

Detect how much of a canvas element is filled in HTML5

I just started with HTML5, and I have a paint program where a user can fill in the canvas by clicking the mouse button and dragging the cursor around like a pen. I want to be able to figure out what percentage of the canvas is currently filled with…
Ian Hyzy
  • 481
  • 5
  • 26
4
votes
2 answers

getImageData causes "Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9"

I'm trying to get a feel for some image manipulation in HTML5. I am finding that when I try and use the getImageData method I get this JS exception thrown. I am using Chrome and running on localhost. Thanks!
flerngobot
  • 616
  • 1
  • 9
  • 30
3
votes
2 answers

What is leaking memory with this use of getImageData, javascript, HTML5 canvas

I am working with the 'canvas' element, and trying to do some pixel based manipulations of images with Javascript in FIrefox 4. The following code leaks memory, and i wondered if anyone could help identify what is leaking. The images used are…
stephendwolff
  • 1,382
  • 1
  • 13
  • 27
3
votes
1 answer

Javascript ImageData Drawing Is Scaling Incorrectly

The idea of the program is to have an image of a map and to overlay a black canvas on that map. Then the user will click on some part of the canvas and, similar to a spray paint tool, the pixels near the mouse will become transparent on the canvas.…
m4gik
  • 430
  • 5
  • 27
3
votes
1 answer

Getting the color value of a pixel on click of a mesh with three.js

I'm working with the last version of three.js and I got a scene with a 2D mesh, with gradient color. The color depends of a value assigned to each vertex. I would like to get the value of every point of my gradient by clicking on it with the mouse…
Myakko
  • 45
  • 1
  • 8
3
votes
1 answer

Most efficient way to reuse an HTML5 canvas's drawn content

I use an offscreen canvas to dynamically generate certain images based on the runtime value of certain variables. Once the image has been drawn on the offscreen canvas, I want to get it and use it in several places of my webapp. Strategy 1: use the…
Jean-Philippe Pellet
  • 59,296
  • 21
  • 173
  • 234
3
votes
1 answer

HTML5 canvas slow native function getImageData() on Mac OS

I have problem with one native HTML5 canvas function getImageData() on Mac OS. I run test for this function in jsperf with a similar power processors and result is: Ubuntu 14.04 - chrome/opera: 300k operations/sec Window 7/8/8.1 -…
Paulius Sapragonas
  • 176
  • 8
3
votes
0 answers

Get correct pixels from canvas

When I try to get image data from my png everything works fine on every browser. For most of the users it works also fine. But, on some computers this code imageData = ctx.getImageData(0, 0, img.width, img.height).data; returns pixels where some of…
Marka
  • 377
  • 1
  • 4
  • 17
3
votes
1 answer

detect if color is between two colors with javascript

I want detect if each pixel of an image is in a range between two colors. I get the pixel color with getImageData but now I don´t know how know if it is in the range. any idea? thanks
PaRoJa
  • 303
  • 3
  • 13
3
votes
0 answers

$.getImageData not working because img-to-json is down?

I'm trying to do some image processing on external images using Pixastic. I know that I need to use $.getImageData to do operations on external images because otherwise you'll get DOM Exception 18 due to the canvas being "tainted by cross-origin…
shoffing
  • 107
  • 1
  • 6
2
votes
0 answers

context.getImageData strangeness in IE9

I'm using canvasContext.getImageData(0, 0, 1, 1).data to retrieve pixel information on an image. It works great in all browsers except IE9. At random times the pixel information is not available, it returns 0 instead of 255 which is expected. I'm…
Jón Trausti Arason
  • 4,548
  • 1
  • 39
  • 46
2
votes
1 answer

How to eliminate cesium warning Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attr set to true

I'm new to cesium, when i use this software, i always get warning in Chrome's console: Canvas2D: Multiple readback operations using getImageData are faster with the willReadFrequently attribute set to true. See: I guess there could be some setting…
ipk app
  • 53
  • 1
  • 4
2
votes
0 answers

Get all pixels of an image in react native efficently

I try to receive all pixel information (RGB data) from an image. Right now i got it working by using react-native-canvas, drawing the image and using getImageData() to receive the RGB-Values. But this way takes around 1 minute to get the data from…
TrytoFly
  • 121
  • 3
1 2
3
…
14 15