canvas.drawImage() renders only the top half of the source image - javascript

I am trying to make a JS image cropper from scratch. I get the cropping part pretty much okay, but when I try to render the cropped section of the image into a canvas using drawImage(), the output displays only the top half of the image. Any idea what might be wrong?
CodePen link: https://codepen.io/virtuoso/full/MxrWrN

Found a solution from this post: canvas drawimage draw zoomed image
The problem was that I was changing the <canvas> element's style attribute to set its width and height, when I should have used its width and height attributes instead.

Related

How can I specify a height on my image, let it scale naturally. Then draw it perfectly with canvas with pure JS

So I am attempting to make a meme generator. I am using canvas, and am trying to set my memes to be at a height of 300px. However I want the width to keep the same ratio so that the image still looks normal. If I use image.width it gives me 0 for some reason. After I get the width I need to set my canvas to be that same width. What would be the easiest way to do this. I appreciate you guys in advance!
I tried to resize the image by adjusting the height, it keeps it's width.
I tried to use the canvas 5 argument function, I don't even know what that did.
I have console.logged width after my image is loaded, and it says it is 0.

show image in percentage sized canvas HTML5/JS/ASP.NET MVC/CSS

I have to "fix" a ASP.NET MVC 5 Website. Gridlayout is done with bootstrap.
The Problem is, there is a Canvas, that should fill a "50% width" div.
When I set the width of the Canvas to 100% that works great.
In the canvas i want to show an Image I got from an Controller. To show it in the right resolution i need to set the height of the Canvas, but first I need to know how many Pixels I got in X-Dimension, to scale the image.
Is there any nice way to do so? I tried
parentDiv.innerWidth()
canvas.clientWidth
canvas.style.width
parentDiv.clientWidth
Most of them returned zero.
It needs to be an canvas, where I show the image, because I want to draw something in the image.
Any idea?
Thanks
EDIT:
Is there a "good" way to show an image in a canvas, that is sized in percent?

Resizing using the Canvas's id?

Can you make your canvas resize to the page width using the style in the html of the canvas id?
And then in your js for the canvas just resize listeners based on the size of the canvas at the current time?
I have many of my variables and listeners hardcoded just wondering what is the fastest method of solving this :)
Firstly, a good starting thing would be not to take the entire page width, but a divcontainer. That way if you end up putting your app in a website or anything, your code will adapt to any container. If you want it to be the full page, this container can just be a 100% width/height absolute with no padding/margin.
Please also note that there are two sizes for a canvas :
The HTML size, which is the size you will draw on "programmatically"
The CSS size, which is the size it will be displayed, independently of the other size (and it will resize it, causing potential distortions)
Based on that, you can know an element's screen width using jquery $("#myID").width() or height(), which applies to the canvas too. Based on this you can set whatever size you want in html and/or css :
$("#myCanvas").width = 400; // The size you will draw on
$("#myCanvas").css('width', '800'); // The size it will be displayed (2x scale in X in that case)
Then for resizing you have multiple solutions :
CSS full stretching : You use your canvas with whatever size you'd like to code in, and then resize it in CSS to use the full page width, that is basically putting the css at 100% width / height
CSS stretching with aspect ratio : My prefered solution, which consists of resizing the canvas in CSS, but by keeping the original application's aspect ratio (and putting black borders on the rest of the screen, like in large-screen movies)
Pure canvas resizing : This method won't destroy graphics, but it has the big cost of making you think all your drawing with any size possible. Instead of having a fixed size canvas that is resized by the browser, you will have to multiply all your drawing sizes and positions according to the screen size, which can end up being very boring, and problematic if not thought soon in the development.
As an exemple here is my canvas manager, with CSS aspect ratio resizing. It is not documented and may not suit your need, but it can give you some ideas

Resize an image after cropping

Folks,I am working on an image component for my application and it involves image cropping and resizing.The issue we are facing is we are able to crop the image keeping the aspect ratio constant initially,but in our case the user can again resize the cropped image and here comes the problem.If we try to resize the cropped image we also get the portion of the image which is not present in the cropping area.For reference I add this link.We want to have a somewhat similar functionality.But the problem is we are not able to get the logic right.Once we crop a portion we get the height,width of that image.We have the original aspect ratio,but how can we now calculate the images new height,width when theuser resizes the cropped portion?The actual image is present and we do not crop it actually,but virtually for showing it to the user.We are using javascript/jquery for achieving this.No specific library but just the logic of aspect ratio till now
This is the actual picture.
This is the cropping area selected.And this would be the cropped area.
This is the resized image after cropping.The image resizes only for the cropped portion and not the entire one,whereas its actually present there.
Just from playing with your application the error that is generated would be similar to an error that would be created if you asked for a CSS property with Jquery after selecting multiple elements. A function can only return a singl result, so you still only obtain the property for the first matched element. Although I can not be sure because your code is 8000 lines long with no comments

irregular sizes of images in gallery

I've an gallery with different size of images. Is there any solution to crop them during display?
I've tried to set style height: xxxpx but it looks awful (with width too). This images display from another sites, so I cant just download them and crop :(
You can crop an image by putting it inside an
overflow: hidden;
div.
Heres a JSFiddle example Cropped Image, of course you wil probably want to use same javascript to centre/position the image and not simple setup magin numbers in the example I've done, but still it shows how to crop the image.
Here is a jQuery plug-in that should do the trick:
http://odyniec.net/projects/imgareaselect/
You could also just set the width to a pixel measure in the html or the css and leave the height, or vice-versa, depending on whether you need them the same height or same width. Then they will be reduced but not distorted... obviously, if you need to crop to a set height and width, this won't work, but it will give you columns or rows that match in width or height.

Categories