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
100
votes
9 answers

Get pixel color from canvas, on mousemove

Is it possible to get the RGB value pixel under the mouse? Is there a complete example of this? Here's what I have so far: function draw() { var ctx = document.getElementById('canvas').getContext('2d'); var img = new Image(); …
vince83000
  • 1,015
  • 2
  • 8
  • 6
56
votes
13 answers

Android get image from gallery into ImageView

I'm trying to add a photo from galery to a ImageView but I get this error: java.lang.RuntimeException: Failure delivering result ResultInfo{who=null, request=1, result=-1, data=Intent { dat=content://media/external/images/media/1 }} to…
user1378505
  • 563
  • 1
  • 4
  • 5
40
votes
6 answers

How to scale an imageData in HTML canvas?

I have a canvas in my webpage; I create a new Image data in this canvas then I modify some pixel through myImgData.data[] array. Now I would like to scale this image and make it bigger. I tried by scaling the context but the image remains small. Is…
Masiar
  • 20,450
  • 31
  • 97
  • 140
21
votes
4 answers

How to create a new ImageData object independently?

I want to create a new ImageData object in code. If I have a Uint8ClampedArray out of which I want to make an image object, what is the best way to do it? I guess I could make a new canvas element, extract its ImageData and overwrite its data…
Likhit
  • 799
  • 2
  • 6
  • 18
20
votes
3 answers

Render .pdf to single Canvas using pdf.js and ImageData

I am trying to read an entire .pdf Document using PDF.js and then render all the pages on a single canvas. My idea: render each page onto a canvas and get the ImageData (context.getImageData()), clear the canvas do the next page. I store all the…
H_end-rik
  • 551
  • 1
  • 6
  • 19
15
votes
7 answers

possible to use html images like canvas with getImageData / putImageData?

I'd like to know if there is a way to dynamically modify/access the data contained in html images just as if they were an html5 canvas element. With canvas, you can in javascript access the raw pixel data with getImageData() and putImageData(), but…
Ahi Tuna
  • 1,253
  • 2
  • 14
  • 26
14
votes
3 answers

How to clone ImageData?

This is working, but I feel this code is lengthy. I'm looking for better idea. var clone = function(imageData) { var canvas, context; canvas = document.createElement('canvas'); canvas.width = imageData.width; canvas.height =…
minodisk
  • 650
  • 6
  • 18
12
votes
3 answers

getImageData() returning all zeros

I'm trying to output the pixel values from an image. The image is loading correctly; another answer on here suggested that the browswer is trying to read the pixels before the image is finished loading, but I can see that it's loaded by the time the…
zzxjoanw
  • 374
  • 4
  • 16
11
votes
1 answer

Is it possible to generate an image (blob or data-url) in a web worker from a canvas context's getImageData?

Background Setup I have a web application that deals with creating images from a set of other images. The way I've chosen to do that is by reading in a set of images and placing them on an HTML canvas. Then, I export each canvas as a jpeg to a…
Kent Willis
  • 380
  • 3
  • 11
10
votes
2 answers

getImageData always returning 0

I have been trying to make a script that compares two images in HTML5 and Javascript. But for some odd reason, it always returns that the images are completely the same. And when looking at what the problem could be, I found out that every data…
iamarcel
  • 103
  • 1
  • 4
10
votes
2 answers

SECURITY_ERR: DOM Exception 18 on using getImageData in a Chrome Extension

I'm writing my first Chrome extension. I'm trying to use jQuery and the jQuery Image Desaturate plugin to desaturate an image on a page on http://www.flickr.com. I'm loading my script (and jQuery and the plugin) programatically in my…
Matt Gibson
  • 37,886
  • 9
  • 99
  • 128
10
votes
1 answer

Converting Blob/File data to ImageData in javascript?

I am using file input element to capture an image from android browser. Now I would like to convert the blob data into ImageData so that I can render it on a canvas using putImageData.
Ganesh K
  • 2,623
  • 9
  • 51
  • 78
10
votes
1 answer

Is canvas getImageData method machine/browser dependent?

A client required help with a program that extracts the dominant color of a product image. I was able to quickly implement this in Javascript; the algorithm below only samples the central square of a 3x3 grid on the image for a quick estimate of…
SNag
  • 17,681
  • 10
  • 54
  • 69
9
votes
1 answer

Does canvas ImageData in JavaScript contain EXIF info?

From the Docs ImageData interface represents the underlying pixel data of an area of a canvas element I would like to know does ImageData will have only pixel data or pixel data + meta data? Meta data means any EXIF data like orientation,…
Ganesh K
  • 2,623
  • 9
  • 51
  • 78
8
votes
2 answers

Horrible Canvas GetImageData() / PutImageData() performance on mobile

I'm doing a little HTML5 game and, while loading my sprites at the beginning of the map, I do some processing with GetImageData() / looping over all the image / PutImageData(). This works fantastically great on my PC, however, on my cell phones it's…
Daniel Magliola
  • 30,898
  • 61
  • 164
  • 243
1
2 3
14 15