I have an image which is 640px by 480px and I have coordinates where I want to create a canvas crop of the image. I am a bit confused as to how to work out for 1, the crop size, where to crop and so on.
How would one work out the correct position to crop and the crop size? e.g. what size to set the canvas from coordinates such as the following
coordinates = [160, 593, 345, 407] // [top, right, bottom, left]
essentially im returning image coordinates from a Python script but no idea how to work out the correct positions.
The drawImage() method takes arguments for source and destination coordinates.
context.drawImage(imageObj, sourceX, sourceY, sourceWidth, sourceHeight, destX, destY, destWidth, destHeight);
Related
PROBLEM
Source image dimensions:
width: 2448
height: 2448
Canvas dimensions:
width: 323
height: 323
Image position and scale on the canvas
x: 141.8 (x coordinate where to place the image on the canvas)
y: 214.55 (y coordinate where to place the image on the canvas)
width: 178.7 (the width of the image to use (stretch or reduce the image)
height: 134.1 (the height of the image to use (stretch or reduce the image)
I have called drawImage like this:
ctx.drawImage(img, x, y, width, height)
ctx.drawImage(img, 141.8, 214.55, 178.7, 134.1);
yes! the image is scaled and positioned correctly on the canvas.
but oh no! it is cutting off the face of my subject! I need to offset the source image while maintaining the positioning and scaling I had on the canvas.
I know that I need to use
context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height);
// sx: x coordinate where to start clipping
// sy: y coordinate where to start clipping
// swidth: The width of the clipped image
// height: The height of the clipped image
I need to offset in the x direction by 158 of the original source image (2448 of width)
After hours and hours of trying different equations and reading the documentation to find the correct numbers to fill in the missing variables, I couldn't figure it out how to offset the source image without altering the positioning and scaling I already had.
I referred to documentation here: https://www.w3schools.com/tags/canvas_drawimage.asp
and tried to experiment here https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_canvas_drawimage2
need the equations and explanation to calculate sx, sy, swidth, and sheight!
I am drawing a line using Shape Renderer in LibGDX and i am using Orthographic Camera in my code, so to increase the width i used
camera = new OrthographicCamera();
int lineWidth = 8; // pixels
Gdx.gl10.glLineWidth(lineWidth / camera.zoom);
Now, I get a wider line. But the problem arises when the screen power goes off and then turns on, the line becomes the normal one again. How to keep the width constant?
ShapeRenderer has the method rectLine that is intended to be used to draw thick lines. It draws a rotated filled rectangle with the smaller opposite sides centered on the points passed to it (as coordinates or as Vector2 objects). The method has the parameter width to set the line width.
You can see the documentation here
Example:
shapeRenderer.rectLine(new Vector2(x1,y1),new Vector2(x2,y2),lineWidth);
As you can see here:
libgdx Shaperenderer line .. How to draw line with a specific width
And here:
Libgdx gl10.glLineWidth()
And here:
Why Libgdx Gdx.gl10.glLineWidth(width); does not react to change projection properities
Playing with the line width in the shaperenderer isn't the best way to do what you want to achieve.
Try using a 1x1 white TextureRegion (you can change the color the Batch draws it with later), and draw it with the width and height that you desire:
batch.draw(region, x, y, width, height);
I have been struggling with this problem for sometime, I hope someone would be able to help me out on this.
I have added canvas object in my html code, in which I load a photo image. I am trying to scale the image at some random coordinates, but the scaling happens only from the center of the canvas. If I use translate the whole image moves as the origin changes. I have also tried transform but that too doesn't give the desired result.
use context.drawImage() + extended parameters to scale your original image onto your canvas
context.drawImage(srcImage, srcX, srcY, srcWidth, srcHeight,
canvasX, canvasY, scaledWidth, scaledHeight)
Where:
srcImage = your source image
srcX = the X-coord on your source image you want to start grabbing pixels from
srcY = the Y-coord on your source image you want to start grabbing pixels from
srcWidth = width of a rectangle of pixels you want to start grabbing from the source image
srcHeight = height of a rectangle of pixels you want to start grabbing from the source image
canvasX - the X coord on the canvas where you want to start painting your pixel rectangle
canvasY - the Y coord on the canvas where you want to start painting your pixel rectangle
scaledWidth - scale the source pixel rectangle to this width before painting to the canvas
scaledHeight - scale the source pixel rectangle to this height before painting to the canvas
For example:
context.drawImage(myMap, 50,50,100,150, 20,20,200,300)
This will grab a 100x150px rectangle of pixels from myMap image object starting at coordinate [50,50].
Then it will scale the pixel rectangle to 200x300px.
And finally, it will paint the scaled-up pixel rectangle at coordinate [20,20] on the canvas
Is it possible to set the width and height of a canvas element and have the existing content scale to fit these new dimensions?
Right now the user uploads an image and my page creates a canvas element containing this image and whose dimensions are the same size as the image. I want to limit the size that I'm working with, however, so here is an example of what I want to have happen:
The user uploads an image that is 1600 x 1200 pixels (Not saved to server)
The data goes right to an html5 canvas object
The canvas height and width are set to 800 x 600 and the image content scales appropriately and then is displayed.
Right now if I set the canvas width and height it just crops the image at those dimension, not resizing as I would like. Thanks!
There are many ways to call drawImage
One is:
ctx.drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)
Where dx,dy,dw,dh are the destination x, y, width, and height.
If you make dw and dh always 800x600, the image will drawn will always automatically be scaled to 800x600.
Here's a tiny example that will always draw any size image to 800x600 http://jsfiddle.net/jAT8Y/
Another alternative is to use context.scale function. Your image quality will remain better if you use scale.
I'm using Phonegap to allow a user to select a photo from their library, and then edit it.
When I retrieve the photo using Phonegap, I store the image in an html img element that is already on my page:
sourceImage = document.getElementById('smallImage');
sourceImage.style.display = 'block';
sourceImage.src = "data:image/jpeg;base64," + imageData;
Of course, when the photo loads in, it could be larger than the phone screen, so I shrink it down in my img element. I modify the actual img element width and height, not the css properties, and the image is properly displaying on screen (around 288 x 200, rather than the original 1024 x 768). So, my img element is now displaying a picture (as a preview) and when the user advances to the next screen, the image is drawn on a canvas so it can be modified:
sourceImage.onload = function(){
myCanvas.drawImage(sourceImage, 0, 0);
}
The image draws correctly, however, it draws the original 1024 x 768 image retrieved from the library and not the modified, smaller image in the actual img element I am displaying on the page. I'm assuming this is due to the fact that the actual image.src is referencing an image that is 1024 x 768, even though I shrink it down.
I have not found any support for re-sizing images before storing them in phonegap. Does anyone know of way I could modify this image src size so that when I am able to shrink it before drawing it to a canvas? (Please keep in mind the user is loading in pictures on-the-fly from their library. I'd prefer to have a client-side solution, but I've not been able to find one).
when you draw the image on canvas you can specify the destination coords on the canvas an the part of the image your like to draw like this:
context.drawImage(image, source_x1, source_y1, source_x2, source_y2, dest_x1, dest_y1, dest_x2, dest_y2);
So you can draw the image in any size you like...