Here's a scenario (with PHP and jQuery):
Have a drag and drop interface, lets say a square in the center of the screen
Generate an image from that area's coordinates
Is this possible?
You mean selecting cropping area with http://deepliquid.com/content/Jcrop.html and then doing the actual crop with imagemagick or php/GD?
Related
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 this image:
I would like to automatically crop anything outside the blue rectangle.
Why?
I plan on using this image w/ some gps gear we have out in the field. I have instructions not to use google maps/earth. Using a div with dimensions equal to the pixels of the image, I will set the background image of the div to the picture. Then using gps data from our database, draw a point and label within the div.
The corner of the blue boxes indicate the exact coordinates labeled. So everything outside the blue box is not needed and would through off my points to draw.
Wondering if there is something I can add to me image upload script to auto crop the image.
Or if in reading this anyone decides that I'm being stupid and taking a difficult route, please call me out.
Thank you in advance.
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 need to create an application which user enter radius of the curve or circle and choose the selected images (PNG Images with transparent background) will transform over the curve.
ex. here are the images:
and user enter the radis of 100px in the textfield and submit, then the result will be:
the images position in the center of the curve or circle. any idea and sample code will be helpful,(in javascript and svg or in php)
Take a look at this previous StackOverflow question: Align objects to curve with canvas
It links to a JavaScript library for help with the math.
There's jQuery Roundrr, http://www.addyosmani.com/resources/roundrr/
You can build something that users can select the parameters (like radius, etc), select the images, order ... and than pass the data to the PHP and generate the final image.
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..