Stack Overflow
Stack Overflow

Questions tagged [putimagedata]

The putImageData() is a method of the HTML5 Canvas, and is used to place new image data onto an existing image.

The putImageData(imageData, dx, dy) method of the 2D API places the contents of the imageData array into the calling CanvasRenderingContext2D object at position (dx, dy).

An optional 'dirty rectangle' can be used to clip the imageData.

For more information, see MDN.

81 questions
53
votes
5 answers

How to generate an Image from ImageData in JavaScript?

I would like to know if there is any way to create a new Image from ImageData, which was previously obtained from a canvas element. I've searched for a solution, but they all seem to be drawing the result to a canvas. I need a way to convert an…
YemSalat
  • 19,986
  • 13
  • 44
  • 51
23
votes
1 answer

HTML5 canvas how to change putImageData scale

How to change putImageData scale with scale(1.5, 1.5) not working.. var imageData = context.getImageData(0, 0, canvas.width, canvas.height); context.clearRect(0, 0, canvas.width, canvas.height); context.scale(1.5,…
user3778390
  • 375
  • 1
  • 6
  • 16
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
14
votes
2 answers

Draw image from pixel array on canvas with putImageData

I am working on a project that can encrypt an image and redraw the decrypted image on canvas. As I am still pretty new to coding and programming, I am currently having issues redrawing the decrypted image data, which is a pixel array in the form…
Elias Pedersen
  • 173
  • 1
  • 1
  • 9
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
6
votes
1 answer

Convert ArrayBuffer into ImageData for drawing on canvas: optimization

I am streaming video over a WebSocket by sending each frame in the raw ImageData format (4 bytes per pixel in RGBA order). When I receive each frame on the client (as an ArrayBuffer), I want to paint this image directly onto the canvas as…
rvighne
  • 20,755
  • 11
  • 51
  • 73
6
votes
1 answer

Fastest way to iterate pixels in a canvas and copy some of them in another one

I'm into a 2D/3D graphic project and I'm facing a performance problem. My algorithm takes two images: a picture and the relative grayscale depth map. I have also an array of 10 canvases ("layers") initally blank. A note: all the images have the same…
TheUnexpected
  • 3,077
  • 6
  • 32
  • 62
5
votes
1 answer

What is "colorspace" in imagedata?

Needed to do some pixel manipulation, but ImageData has changed. Now it has a colorSpace property. What is this, and how do I use it as normal? Just get an ImageData object in Chrome to reproduce.
Kriso
  • 165
  • 1
  • 1
  • 10
4
votes
1 answer

Canvas putimagedata is sometimes not drawing like expected

I am trying to draw a simple flat line from the left center of my canvas to right side. The starting and ending points will be taken from textbox input. To do this i am first drawing a line from start to end with same html color with canvas to erase…
Faruk
  • 773
  • 1
  • 6
  • 20
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
3
votes
2 answers

Change image size with ctx.putImageData

I am working on angular project and I have to put an image on a canvas. The image is not locally stored, I only have the image data so I use this. this.context.putImageData(imgData, firstPointX, firstPointY); Now my problem is that the picture I…
Daniel
  • 77
  • 1
  • 2
  • 10
3
votes
1 answer

Using ImageData object in drawImage

Is it possible to use ImageData array object to get an Image() object. My eventual goal is to use drawImage instead of putImageData since putImageData is too slow (from stackoverflow similar qs and my own tests). All I have is ImageData array that I…
Captain Jack sparrow
  • 959
  • 1
  • 13
  • 28
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
3 answers

Cannot change canvas imageData

i'm facing a bug in my script that i don't understand. I try to modify a canvas imageData after modifying it's data. data is a Int32Array var clampedArray = new Uint8ClampedArray(data); var newImgData=ctx.createImageData( WIDTH,…
Scandinave
  • 1,388
  • 1
  • 17
  • 41
3
votes
1 answer

imageData set in InternetExplorer

I have an arraybuffer - named MEM - larger than the canvas width*height size. And I would like to draw the arrayBuffer data to the canvas. imgData.data.set(...) should work, because imgData.data is an Uint8Array, which has the .set hethod. It works…
Iter Ator
  • 8,226
  • 20
  • 73
  • 164
1
2 3 4 5 6