How to use getImageData() in js, when the images are drawn into the canvas on top of one another? (I need the data of each image separately.)
Here's one way:
// get the imageData for the second image
context.drawImage(secondImage,0,0);
var imageData2=context.getImageData(0,0,canvas.width,canvas.height);
context.clearRect(0,0,canvas.width,canvas.height);
// get the imageData for the first image
context.drawImage(firstImage,0,0);
var imageData1=context.getImageData(0,0,canvas.width,canvas.height);
// and now redraw the second image back on the canvas
context.drawImage(secondImage,0,0);
Or simply create a canvas object for each image. They will visually layer correctly but you can work with image independently. If you don't mess with the z-index they will render in the order you add the canvas objects.
Related
Actually. I have created two canvas one containing some static content & over that another canvas containing some dynamic content. Now I have show snap of both the canvas with zoom in a separate canvas where the snap will change according to the moving object. I am using getImage & putImage but unable to zoom the image content. Even getImage is not working for the canvas contating dynamic content because security error is showing.
context.drawImage can use another canvas as its source image.
context.drawImage can scale the source image when drawing.
context.drawImage does not run afoul of CORS security like getImageData does.
For example, assume sourceCanvas has the original image located at coordinate[20,30] sized at 100x140.
If you have a context to the destination canvas, you can scale it 2X and draw it on the destination canvas at [50,60] like this:
context.drawImage(
sourceCanvas,
20,30,100,140, // grabs 100x140 pixels from sourceCanvas at [20,30]
50,60,200,280 // scale the grabbed pixels to 200x280 and draw it at [50,60]
);
I am using paper.js to create an application in which I can markup an image then save it.
My lowest layer of my paper project is a raster of the image. The next layer up is where vector graphic markup is done using various paper.js items. When an item is committed I copy it to the lower (raster) layer where it is preserved. But it is just a child item of the layer, not part of the rasterized image. If I capture the raster as an image with toDataURL the child items are not part of the image (I wouldn't expect them to be).
How do I insert/overlay part of the rasterized image with an paper.js item? I can rasterize the item first, but then I need to know how to merge the two rasters with one overlaying part of the other? If I convert to a raster first then pixels that are not in the actual paperjs item but are in the enclosing rectangle will need to be transparent, i.e., not overlay the rasterized image.
You can create a raster object from the whole layer, then convert that to a DataURL string:
var tempImg = project.layers[0].rasterize();
var dataString = tempImg.toDataURL();
tempImg.remove();
I am trying to grab a particular part of the canvas and then put that image back onto the canvas in a very particular way. However, it seems that the get and put ImageData methods work on an absolute canvas that is not affected by image manipulations. Is there any way to use translations with the get and put dataImage operations in HTML5?
I have a line drawing that occurs at an angle and I want to capture that image, put it on its own canvas, do some processing on it, and then put it back on the canvas at that exact angle and position. I originally thought I could do this by repositioning the canvas based on the position and angle of the drawing, but this did not work because get and put dataImage use absolute rather than relative coordinates.
You could send the data to an image, and draw the image to the new canvas for processing. That way, you will get what appears on the canvas, exactly as it appears.
var img = new Image();
img.onload = function(){
processingCanvas.width = this.width;
processingCanvas.height = this.height;
processingCanvas.drawImage(this,0,0);
}
img.src = originalCanvas.toDataURL();
And boom, it's on your processing canvas (after you wait for it some). As long as you don't have an absolutely HUGE canvas, this method should work rather quickly. Just get everything you want, and make sure it is visible on the canvas. And then you know how to get the processed data back to the other canvas. I hope this was what you were looking for.
Core Problem:
The goal is to render a portion of an SVG to a fixed size Canvas element on a web page.
My Attempted Solution:
Seeing as CanVG seems to be the most straight-forward way to render an SVG image in Canvas I figured I could leverage the viewBox attribute to crop the image prior to CanVG's rendering. I've been having trouble on this point.
The Question:
Provided an SVG image, how can one render a portion of that image to a Canvas element?
Create an offscreen canvas and render to it using CanVG:
var full = document.createElement('canvas');
full.width=800; full.height=600;
canvg(full, '<svg>…</svg>');
Copy a portion of this canvas-as-image to a region on another canvas using drawImage (see link for parameter details):
var ctx = myVisibleCanvas.getContext('2d');
ctx.drawImage(full,10,20,80,60,92,16,80,60);
Edit: However, the above is not necessary if you have access to the SVG source (either directly in JS or via an XMLHTTP request) and can modify the viewBox attribute before rendering. See this demo which shows an SVG file rendered directly to one canvas, and then changes the viewBox attribute and renders the clipped region to another canvas.
Which exactly is the problem you get?
The context.drawImage function has a nice cropping feature built in. Instead of the standard 3 parameters (image object, x position, y position) you just pass to it 9 parameters and it will crop the image. These are the parameters:
context.drawImage(
imageObject,
original image x crop position,
original image y crop position,
original image crop width,
original image crop height,
canvas image x crop position,
canvas image y crop position,
canvas image crop width,
canvas image crop height
)
I have no idea if this works with CanVG but, as long as you can pass an image object to the function drawImage(), you will be able to crop it as mentioned in the code.
I want to replace image pixel color with other color in webos. so can any one suggest how i do this.
Thanks
This can be done by using the HTML5 canvas API. Create a canvas the size of the image, and then draw the image into the canvas. Get the image data, and manipulate away!
var canvas = document.getElementById(canvasID);
var context = canvas.getContext('2d');
var image = context.getImageData(0,0,canvas.width,canvas.height);
image is now an imageData object, which contains an array data, which contains all pixels of the image.
Suppose you wanted to remove the green component at the pixel in the sixth column and the third row.
var index = (5*image.width+2)*4;
//six columns of pixels, plus two for the third row.
//Multiply by four, because there are four channels.
image.data[index+1] = 0; //Plus one, because we want the second component.
Once your pixel manipulation is done, load the image data back into the canvas.
context.putImageData(image);