I have a div with overflow:hidden and an image inside that div.Also I have some buttons for zoom in zoom out and for moving the image to all directions via change of margin.How do I crop only the visible part of the image and save it ? Is it possible to do it with only javascript?
You can't save an image with javascript. You should do it with PHP.
http://www.php.net/manual/en/function.imagecrop.php
You can do it in combination with Jcrop.
Related
I was wondering, is it possible to place a div on top of a specific part of an image without the div moving when the window size changes?
Example: Placing an image inside of the "PLACE IMAGE HERE", and the image should stay inside of that area when resizing the screen:
I tried to use position: absolute but obviously that doesn't work when the window size changes.
You need to define both width and height for both image - the outer one and the screen one. Or you can give relative width and height in %, vh, vw or some other relative values in css. But again, it will crop the image in some device, you need to be careful while giving proper sizes using media queries also.
please is there any js framework or code that will let me resize an uploaded logo inside an picture,
like this example on picture
A :image to resize
B : tool to use
Thanks
i cane't upload image
the link below at vk
https://vk.com/id181761990?z=photo181761990_456239019%2Fphotos181761990
You can use jQueryUI to create the slider for 1-100% size, and on slider change value, resize the image pointing at it with an unique id.
I'd use an empty div with two backgrounds (shirt and image on it) to easily keep the image always in the middle of the shirt without using text aligns and calculated values.
I need to rotate a image that I capture from the camera or gallery. The steps are:
You capture the image from the camera or gallery You have the
possibility to rotate the image for after crop the image.
I try to rotate the image with CSS properties, the image is rotated well, but the original properties from the image don't change so the problem is that when I call to crop, the crop option choose from the original image, not from the rotate image.
Thanks
use "correctOrientation" property and set the height and width of the image . This will help you
Does Facebook in its gallery put image width and height in database?
Using JavaScript, they can not be sure about image width and height until image fully loads. But on FB, image is been loaded while its displaying and image is properly centered horizontally and vertically.
Facebook use display:inline-block for the image and text-align:center for parent div to center image in theater images.
Check out their blog post that explained how they did it. It's a nice CSS code but not all CSS. They use JS to set line-height of one of divs based on window.height.
I need an image slider which resizes the images only if its needed (the size of the image is bigger than the div containing the slider).
I've tried with AnythingSlider, but when I set the width and height to the div containing the slider, the images that are smaller than the div are stretched. I don't want them to be stretched.
You could just do a check in javascript/jquery to see what the size of the image is. If it's bigger than the desired dimension you can just scale it down.
play with this . add condition for styling
http://webdesignledger.com/tutorials/create-a-resizable-image-grid-with-jquery
http://demos.webdesignledger.com/jquery_image_grid/example2.htm