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.
Related
I use maphilight jquery plugin with hover and onclick features. Which works fine.
Is there a way to draw a rectangle by default on the areamap image at a predefined position and size? So without to hover or click on it, just draw a rectangle right after the page is loaded.
I would like to use this solution with PHP+mySQL search. So when someone searches and finds the desired objec on a page (as a part on an areamap, and I know the position of it), clicking on the result link, I would like to load the page that has this shape and would like to be highlighted or drawn around with a rectangle as long as the person click/hover on another area on the same page. Or if this is not possible, then just drawing the rectangle on the desired position.
Is there a way to accomplish this?
The searching and lauching mechanism is not an issue now... I'll do it somehow. I just need the solution to draw the rectangle on areamap.
I tried using CSS "z-index", canvas and even SVG but the rectangle was always drawn after the area map, so at the bottom of my page and not on the areamap :(
Can anyone help me? Thank you.
your rectangle also needs to have position:absolute css style, e.g.,
$('div.map').append('<div style="position:absolute;left:100px;top:100px;
height:10px;width:10px;background-color:#f00;z-index:1;"></div>');
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 user registration form (php) with image upload capability and I would like to know if it's possible to detect if the user-uploaded image has a border. If it has, I would like the form to deny the submission.
PHP, JQuery or Javascript may do. Thank you so much!
You can write a PHP-GD script to check if the given image contains border. You can implement following steps to check for one-pixel border with same color:
Get height (h) and width (w) of the image
First scan horizontally, loop through (0,0) to (w,0) check if all pixels have same color
Then scan vertically, loop through (0,0) to (0,h) check if all pixels have same color
If pixels have same color, we can assume the picture has border. If we find complete one-pixel border using above steps, we can run it again on inner pixels to be sure.
See this question.
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.