Let's say I'm working on a 1000x1000 px fabric canvas. I add an 200x200px image right in the middle (top: 400, left: 400), then save my canvas as json. (the bag on these pictures is a background image, don't mind it)
I create another canvas, which is smaller. If I load my json, image will still be 200x200px, and 400px from top and left, therefore getting out of my canvas.
How can I make sure that, once loaded in a smaller/bigger canvas, my objects will scale accordingly ?
Work out the new canvas dimensions as a percentage of the original canvas then set the scale on each of the items in the callback of loadJSON.
As in your example if original canvas was 400x400, new one is 200x200 then scale is 0.5. Apply that to each object in the callback of loadJSON and to its coordinates (top, left etc etc).
Related
I have an image which has a ratio of 1724:1078(width:height).
Now i need to center that image inside canvas which is 800:1078.
This scenario works perfect with the code bellow:
ctx.drawImage(this.leftImageResized, ((this.thumbnailWidth/2)-this.leftImageResized.width)/2, (this.thumbnailHeight-this.leftImageResized.height)/2);
But what i cannot figure out is how to position the image to the left of the canvas and to the right of the canvas, because the image is wider than the canvas itself.
What i basically need to achieve is placing the left side of the image in the beginning of the canvas and in the second scenario placing the right side of the image to the right side of the canvas.
I already tried the code bellow to position it to the left:
ctx.drawImage(this.leftImageResized, 0, 0);
But this code does not work as expected. Basically it crops out a part of the image, although the image is positioned to the left a part of the image to the left is outside of view...
EDIT: This question has not a single point common with the question pointed as a duplicate, i am not simulating a cover at all, at the contrary my image should be cut but in different context.
As you can see on the image bellow this scenario is the one i need to cover, the image can be much bigger, but i need it aligned to the left edge of the canvas and also to the right edge.
If I understand correctly here is a schema of your situation:
leftImageResized
|------------------|
canvas
|----|
=> left margin
|------|
If this representation is correct, the width of your left margin equals
(width image - width canvas) / 2
And thus replacing
((this.thumbnailWidth/2)-this.leftImageResized.width)/2
by
-(this.leftImageResized.width - this.thumbnailWidth)/2
Should solve it
I am building an online video editor. I need to allow the users to blur an area of movies. This must be done graphically, I mean user should be able to select an area of a video, using an screenshot, then the selected area must be blurred. Some thing like this
Is there anyway to map this selected area dimension and its distance from borders to the real values that must be applied to the video?
I mean four numbers, width, length, top, left will be provided using this plug in and I need to use these numbers to blur an area of videos.
I take an screenshot of video. In order to keep the aspect ratio, I will fix the width to 800px and let the height to be scaled up/down. It is clear that the width, length, top, left of the selected area of the screenshot is a factor of the width, length, top, left of the area that must be blurred in video. but I don't know how to get this factor. Besides that I don't know how to get the video resolution.
Thanks in advance.
Update
This is my PHP code that gets the selected area dimensions and offsets
$iLeft = $_POST['left'];
$iTop = $_POST['top'];
$iWidth = $_POST['width'];
$iHeight = $_POST['height'];
exec('ffmpeg -i '.$url.' -filter_complex "[0:v]scale=iw*sar:ih,setsar=1,split[bg][bb];[bb]crop='.$iWidth.'*iw/800:iw*'.$iHeight.'/800:'.$iWidth.'*iw/800:'.$iHeight.'*iw/800,boxblur=10[b0];[bg][b0]overlay='.$iLeft.'*W/800:'.$iTop.'*W/800"" '.$name.' > block.txt 2>&1');
$iLeft, $iTop, $iWidth, $iHeight are the left, top, width and height of the selected area via the image plugin.
It blurs many selected areas very well, but areas like this
The Image Left, Top, Width, Height is 257, 39.26666259765625, 10, 391
don't get blurred. Also a video with Dimension 207x207 didn't get blurred as well.
Running
ffprobe in.mp4 -loglevel quiet -select_streams v -show_entries stream=width,height,sample_aspect_ratio -of compact=p=0:nk=1
will produce an output that looks like this:
1280|720|1:1
The first entry is the video width, then the height, and finally the pixel or sample aspect ratio, shown as num:den so it's num/den. That's your video resolution.
With that info, the factor is video-width*sar/800. This assumes that you'll be scaling all anamorphic videos to square pixels using the scale and setsar filters, and that the 800px screenshot is undistorted as well. If you're using FFmpeg to scale screenshot, it's scale=800:ih*800/iw/sar
So FFmpeg value for area width is screenshot area width * video-width*sar/800.
and for FFmpeg Y co-ordinate is screenshot top * video-width*sar/800, and so on.
Assuming the code in the comment is for the screenshot, for the full-sized movie, it would be
"[0:v]scale=iw*sar:ih,setsar=1,split[bg][bb];[bb]crop=50*iw/800:50*iw/800:20*iw/800:10*iw/800,boxblur='min(min(cw/2\,ch/2)\,10)'[b0];
[bg][b0]overlay=20*W/800:10*W/800"
I've scaled the movie to make sure we're always dealing with a square-pixel video.
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]
);
A situation I'm trying to solve. I'm loading an image onto a canvas, then making some edits(resize, crop etc.) to it and saving the resultant image to a folder. Now if the original image is larger than the canvas dimensions, the resultant image is cropped. Hence I'm trying to scale the image to a smaller size that fits in the canvas, apply the effects, and then scale it back to the original dimensions and save it. Is there a way to do this?
My JS pseudo code is somewhat like this:
//load the image using drawimage
//compare image dimensions with canvas dimensions, scale down the image if large
//apply the effects
(I have done till here)
//scale it back to original size
//save
How do I scale it to and fro using canvas scale method? I'm assuming I have to calculate a widths ratio for scaling down and up like so:
scale_down_width = image_orig_width / canvas_width
scale_down_height = image_orig_height / canvas_height
//For scaling down
scale(1*scale_down_width, 1*scale_down_height)
//For scaling up
scale(1/scale_down_width, 1/scale_down_height)
Am I doing this correct?
Scale down works fine, but scale up doesn't, how do I do it right?
I wanted to know if Html5 supports shape translation in canvas..For instance I have a rectangle,is it possible to apply a transformation to it?
canvas = document.getElementById('Canvas');
context =canvas.getContext('2d');
context.rect(myRectangle.x,myRectangle.y,myRectangle.width,myRectangle.height);
There's a few different methods for animating and changing the position that you want to draw your thingy. Either way, if you're after an animation, you're going to need to clear your canvas and keep drawing - like a flip book if you will.
Choices for setting the newly drawn item include:
moveTo - to move to the new position of your thing
translate - to translate the centre point of the canvas and keep the drawing positions the same, but move the underlying coordinate system
.rect(newX, newY, height, width) - drawing the specific position
I mocked together a (contrived) example of using translate on a canvas - which will move the the animating box around the position of your cursor. It's done in a loop - and I'd suggest checking out Paul Irish's article on requestAnimFrame for better animation loops. Here's the example: http://jsbin.com/afofur/2/edit#preview
As the comments say in the previous answer - SVG maintains a object model, so you can reference objects on the page, canvas is a bitmap API (basically), and once the pixels are committed to the canvas, there's no reference to the method or shape behind the drawing, it's just pixels to the canvas API.
No, once it is drawn to the canvas you can't change it anymore, there is no in-memory representation of the shapes you draw on the canvas. However, you can transform the canvas before you draw the shape and reset transform (canvas.setTransform(1, 0, 0, 1, 0, 0)) after you've drawn the shape.
Edit
Remember that the canvas API doesn't keep track of which objects you draw. It just fills the pixels with a color where you ask it to draw a rectangle. If you want to make animations, you will have to keep track of which rectangle you drawn yourself (make an object with properties x, y, width, height). Then you will have to do the following in each animation step:
clear the canvas
update the objects for the new time frame
redraw the canvas
You can find a tutorial here.