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();
Related
I made a simple billboard in blender with a curve in it. I'd like to now how I can add a video to it with the same curve. The video needs to be loaded separately in dcl. I can now modify the video with Typescript (Threejs or babylonjs). Is there a simple way to curve that video/image?
Curved screens are made by creating a parent Entity, and placing multiple planes inside of it, each with the same video Texture applied to each plane.
You will then have to offset and rotate each plane so that it gets its curved shape. (Toughest part)
You will then have to apply a unique UV map to each plane so that each strip of the video only shows the correct part of the video.
https://github.com/pmacom/dcldash/blob/818b3627751e491173cbeef5ea436fbe69d1c1e4/src/utils/Uvs.ts#L3 contains a helper function for generating the proper UVs for each plane. You can probably just copy it directly into your project. Usage is as follows:
planeshapes.forEach((planeshape: PlaneShape, index: number) => {
planeShape.uvs = Dash_UV_Curved_Video(planeshapes.length-1, index)
})
Hopefully this helps
i want to draw a circle on an image in easeljs.
My actual status:
In my canvas 1200 x 800 is a bitmap 9000 x 1000.
The image got a "pressmove" function, so i can navigate from the left to the right of the panorama and from the top to the bottom.
I want to draw a circle/shape onto the image/bitmap.
For example at the coordinate of the image x:3000, y:500.
With my actual attempt to do this i created a container and added the bitmap and the shape in there. If i say bitmap.x/y = shape.x/y, the shape stays where it belongs to be but i need to tie it a specific coordinate.
The picture shows my actual view, the whole picture and the point (x,y) where i want to draw a circle onto the picture. So if i am showing this part of the picture there should be the point.
Do you guys have any idea how to do this?
Problem Solved
As #Lenny said, moving the container instead is moving both of the displayed objects. That's the result i wanted.
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.
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]
);
Does anybody know if there is a way to 'export' an entire KineticJS layer (or group) and not just the part that is in the visible canvas?
I have a simple 'image editor' that allows the user to scale the image in the canvas, the image can deliberately be scaled larger than the visible canvas stage area allowing the user to pan the image sections into view. The problem is that when they come to export the image (currently using the toDataURL) only the section of the image in the visible canvas stage is saved, the rest of the image is discarded!
I effectively want to save the whole layer, not just what is rendered in the visible canvas stage.
Well, You need a temporary workaround.
I assume you have a function or something that does .toDataURL().
Right before you do toDataURL(), change the stage size or scale, then save, then change back.
Example:
function save(){
stage.setScale(newX,newY); //rescale to new values
stage.setWidth(newWidth);
stage.setHeight(newHeight);
stage.toDataURL(); // <----- save
stage.setScale(oldX,oldY); //rescale to old values
stage.setWidth(oldWidth);
stage.setHeight(oldHeight);
}
This will resize or rescale your stage and then put it back the way it was.