I'm looking for a jQuery script, for more than one crop mean different cropping on a single image. Each crop box properties (width,height,x,y) should be displayed in textbox.
Dividing single image into different parts by user's selection.
Use Jquery JCrop Plugin to get coordinates from user for the cropped image, you can save multiple coordinates as hidden fields while the process, and transfer it to backend to get different thumbnails for the image..
Related
I have an ecommerce site in which i have to display some products i.e 40-50 products per page.Every product has an image which displays the image of the product.
The main thing is that in the database i have a meduim/high quality image of the product whose dimensions would be around 720px-1024 px , these can vary and every image has dimensions in between these two.
Now, i have two different ways of displaying these images for product, i could use a php script to generate thumbnails from these pics whose dimensions would be 290X290 or i could use the style tag and set the width and height as 290X290 and source as the real image.
Let me explain this by an example.
Original Image
I could do this to display the image
<img src="/imagethumbnail.php?product_id=34"/>
<img style="height:290px;width:290px" src="productimg.png"/>
finall image
one calls a php script and generate a thumbnail image of size 290X290 while the other one simply uses the style tag.
Both of them are working fine but i think when i use the style tags i see a trade off in image quality.While when i use the script to generate the image i see a trade off in image generation like they take sometime to show up on the page.
What would be the better method to do this and what would be the perfect solution towards it?
I think the standard method is to generate the thumbnails in advance. And you should probably set the width and height in the markup as attributes on the img element, rather than under the style attribute.
I have a map image and I want to crop a selected areas of this map using ONLY php.I find ways of cropping but all are in rectangles shape.but I want a polygon shape of my source image,and I have no Idea where to start.
here is my img
I want to save pieces of this map(whiting area borders) as a seperate image.
after ages of searching.I finally create polygons I want in photoshop.and use them as overlays.
I place my overlay images on original image and then save the new image generated witch is the croped image I wanted to be .(this procejure is done by php not photoshop).
I have a div with overflow:hidden which contains image (.draggable()) that is usually larger then the div and I need to get only visible part of the image and send it to server side script and save as new file. So my question is, how to get only that visible part?
Thanks!
The solution is by getting the x,y position of the draggable. You can get that data by using .top() and .left() on your div. Then you should send the whole image to your server with the top, left, width, height data and crop it on your server-side.
Please note that I think that it would be possible to crop it to the Client side by using a Canvas HTML5 element and some tricky javascript.
You have two options, depending on the method that your are moving your image in the div, save the parameters in inputs using javascript and pass them using POST method when submitting.
For example you pass the TOP and LEFT of image and you already know the WIDTH and HEIGHT of div, so if the left is -375px, you know that you should crop the image from 375px to (375px + div's WIDTH) and same goes for top.
Better option is to use this nice jQuery plugin:
http://deepliquid.com/content/Jcrop.html
You should look at the absolute top and left values of the image and compare it with same top and left of the div, take the differences along with the div width and send all this data to server side where you can crop the image via some other programs /library.
I am not sure if this is possible or not, but I am trying to create an effect where when you mouse over an image that is the creation of multiple images overlapped with each other (images would be set with some opacity), I display that section of the image clearer than the other.
Hard to explain, but here a few examples
This image:
is the creation of all those images overlapped (each image is on top of the previous)
When I mouse over the final image I want to be able to "highlight" the part of the image that corresponds to that section of the image in the image itself
Something I was thinking to do is to just show the main image with opaque set, when the user mouse over it, grab the coords, check against all of the images (that cannot be more than 25) see if those coordinates are matching with a non "transparent" pixel and display such image on top of the main to give an "highlighted" effect, but the final images are about 400x200 and create an array of all the pixels on the fly when displaying the page is not realistic for a server that have thousands of hits per hour/minutes. Save this array in a database is not realistic as well as the size of the image might change depending on the page and we currently have 1.3milions final images each one being on average circa 10 broken down images
A possible solution is to create custom SVG overlays for each sub-image. Upon an onmouseover event, you'd decrease the opacity of the SVG element, making the below image more visible.
Checkout this tool for creating SVGs.
$("img").css("opacity","0.8");
$("img").mouseover(function()
{
$(this).css("opacity","1.0");
});
$("img").mouseout(function()
{
$(this).css("opacity","0.8");
});
For the effect of segmenting the image, try using an image map:
http://www.javascriptkit.com/howto/imagemap.shtml
Opacity of image maps is supported:
http://www.thehelper.net/threads/can-i-use-opacity-on-imagemap.57999/
Edit:
To achieve the hovering effect, try loading them into a canvas using Fabric JS, here is a demo:
http://fabricjs.com/hovering/
Abandoned the project, the ony solution is SVG but it nos possible at this stage as some browsers/OS do not support fully them
I'm looking for some jQuery plugin or smth similar.
For example, I need to crop a photo on website and to save the result on server.
I know that it is better to do it in Adobe Flash, but I really need to do in using JS.
Very few browsers support selecting an image with Javascript and manipulating it without first uploading it to a server. Instead, you'll need to:
Allow user to upload image to server
When upload is complete, resize the image (with PHP) to a manageable size for the browser for preview
Show the resized preview image in the browser in something like JCrop
After the user chooses the crop area, have them click "Save"
On Save, pass the coordinates of the cropped area to the server/PHP to have it crop the original image. You'll have to scale the coordinates for the preview to coordinates for the original image.
Save the new image to disk/S3/whatever with PHP
I managed to do this without ever using my server or having the image touch my server by using http://transloadit.com/. I use transloadit's Javascript upload form to upload to their server storage (S3) and use a template that saves the original and resizes for preview. Both the original and preview are stored in transloadit's temporary S3 account, not mine. I then use JCrop to show the user the preview. Once they select the crop area I then tell transloadit to crop the original photo but with my crop coordinates (scaled from the preview image to fit the original) using a template that also makes several thumbnail sizes. Transloadit then saves all the images to my S3 account and tells me the URL where it saved it.
Check out jCrop. It's perfect for this stuff.
You are looking for JCrop
Here are some demos.
Here is an example implementing in on PHP.