Resize an image after cropping - javascript

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

Related

How can i draw a part of an image on top of a html page depending on my mouse movement? (with or without canvas)

I want to draw an image on top of my html page depending on my mouse movement.
How can i do that? Is it a better approach to put the image below the rest of the html and scratch the html somehow away, or tu put the image above it and add it partially on top.
I found solutions on the internet with 2 images on top of each other where the top one is erased with canvas, but since i have multiple elements i want to overwrite, i have no idea how to solve it.
Assuming I've interpreted the question correctly, that the requirement is to allow the user to 'scratch away' at the page gradually revealing an image, you could do it either way.
There are libraries that will create a canvas of a page (or part thereof) such as htm2canvas. Using one of these you turn your page into an image, place it over the given image and remove (make transparent) pixels on the top canvas as the mouse moves. The drawback with this approach is that it's possible the conversion of the HTML to canvas isn't totally complete. There may be some aspects for example of CSS that aren't correctly rendered.
To be sure therefore it's probably better to do it the other way round. Lay a blank canvas over the page and copy the image to another canvas with the same dimensions but which is outside the viewport. As the mouse moves over the blank canvas copy the relevant pixels from the offscreen canvas to it.
If you could confirm that I've understood your question correctly I could go into more detail.

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

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.

when importing images dynamically in flash how can i fix all images size fixed?

when i work with flash i getting trouble when working with images
now my present project i'm uploading images dynamically, but here main problem is all the images sizes are different when i put the images into flash canvas every image looking different size means exact image size, but i need all the images should look same size in the canvas
check the image
if i change both of the height and width values that is not effecting any where, that is automatically taking fixed images size but i need all the images looks exact size, i didn't get any thing
I think I have the solution to your problem.
Basically, you need to create a container (if you haven't already done so) to 'hold' the images as they come up OR know the maximum height and width you want for the images. Then you need to make sure the aspect ratio is correct (so your picture won't be skewed. )
Code Example:
var wHRatio:Number=image.width/image.height; //this will give you the width to height ratio to make sure aspect ratio stays the same.
if (image.width>mcContainer.width){ //if not using container, enter max width
image.width=mcContainer.width;
image.height=image.width/wHRatio;
// at this point, if the height is still taller than the container, you want to shrink the image again so it's no taller than the container.
if (image.height>mcContainer.height){ //if not using container, enter max height
image.height=mcContainer.height;
image.width=image.height*wHRatio;
}
}
**** Don't forget to 'addChild' after you've completed the re-sizing.
This may not be the most efficient way of doing things, but I think it will work for your purposes.

Shrink dimensions of gif as part of animation

Trying to find out if it's possible to 'shrink' an animated gif. Not in file size but in regard to the dimensions of the image.
If not, is there any way to catch the animation with jquery/javascript so I can shrink the size my moving the image out of view with css?
Or alternately after there any libraries out there for simple image manipulation type stuff for HTML5 Canvas?
EDIT:
The first mock up of the image is at http://swmohappening.info/. It's essentially a website that I'm doing to help out a local youth group retreat.
I'm wanting to shrink the portion of the letters that run-on so it's a more manageable banner to leave on the page. I do need to maintain the dimensions of the center/main section of the image.
Take a look at the animate function in jQuery - you can change the size of an image and specify the time that takes too.
As what I've read makes it seem as though the jquery animate will simply change the dimensions of an image (which isn't what is needed at the moment). I think I'll most likely end up using animate to move the image out of view to 'shrink' it that way...

Maintaining image size in droppable as a background

How can I maintain the size of image as a background of droppable? I don't know the size of image so when I set the droppable background to an image it either crops to fit the designated area or multiplies to fit it? How can I make it to fit the area by streching while maintaining the aspect ratio?
Since I already define the size of droppable in my style, I don't want to change the size of my droppable to fit the image. Rather, I want the image to be loaded to be completely contained with proper aspect ratio to the droppable meaning without being cropped or multiplied. Can this be done through jquery or javascript?
Two possible solutions:
The first is PHP GD's imagesx() and imagesy(). That is using PHP, sure, but if you can use PHP, it can be good as then you'll perhaps learns some PHP GD too. :)
Otherwise, you could use the solution to this question.

Categories