is it possible to create this image in PHP using GD ? i know i need to use GD and imagecreate, imagecolorallocate, imagedestroy etc... but i have no idea how to do the curve
i need to create multiple arrows with these patterns
different type of arrows
different inclination of the curve
different colors
different length
edit: this way i don't have to look on the internet for arrows (based on a user/client specs). and then later i will add text to the image (for example: click next or follow the arrow). since im not a graphic designer, creating these iamges using gd will be easier for me.
eg:
http://kennebecvalleycoaching.com/red_arrow_curve.JPG
http://s3.amazonaws.com/satisfaction-production/s3_images/13664/curved_inline.png
thanks
Instead of doing it server side, you could investigate things like canvas, or raphael, and create the graphical elements clientside. It will be much more flexible, and less hassle.
Related
I want to draw a dynamically generated line that bends around n points in php, depending on input. I know I could use image arc and painstakingly get the curves to overlap at the proper angles so that multiple curves give the illusion of a single bendy line. But is there is an easier/cleaner way?
I basically want to do this:
If you wish the client side to render this I recommend using the canvas tag
See reference here: http://www.html5canvastutorials.com/tutorials/html5-canvas-bezier-curves/
Or use imagemagick backend if you with the server side to do it
look up Bezier Primitive on page http://www.imagemagick.org/Usage/draw/#bezier
You could use ImageMagick to create an image of the output you want. I've always found it pretty straightforward.
eg
http://imagemagick.org/Usage/draw/#bezier
http://php.net/manual/en/imagickdraw.bezier.php
I want to have a map (which is image-mapped) show green in areas where some criteria applies, yellow in some other areas and red in other areas.
The goal is to display a clickable image which will will colour certain states which match certain criteria. I was previously considering flash but the owner simply doesn't want flash. One possible alternative would be to display 'clickable' coloured labels on the map but I don't know how to do this either. Does anyone know how I can solve this? Any help will be much appreciated. Thanks!
Check out Raphael: http://raphaeljs.com/
So this is what I finally did.
I found an svg map of Nigeria on wikipedia (which has the svg maps of
almost every country).
I downloaded InkScape and cut out the parts I didn't need from
the map.
I used the Raphael SVG to HTML Converter tool to convert it to
code usable by raphael.
From here it was quite very easy, I could use path.fill to 'colorify'
the image and it was easy to set different functions for clicking any
part. Scaling was also not an issue as the image could be scaled
dynamically based on the container.
Thanks to everyone especially Olle for pointing me in the right direction!
jQuery Vector Map http://jqvmap.com/
or
JVectorMap
JVectorMap comes with more pre-generated maps than jqvmap. But you should be able to generate your own.
Take a look at jQuery. PHP is not where you will do this, its going to be client side Javascript to manipulate an html image map using either overlay images or a change in CSS via the Javascript.
For what its worth, this can be done in php using the gd extensions. Essentially what you do is load an all white version of the image, and then using coordinates on the image, fill the image with a given color using imagefilltoborder (http://www.php.net/manual/en/function.imagefilltoborder.php) .
However, to make it clickable, you would need to use an image map or javascript on the clientside anyway.
I was wondering if it was possible if I had an image like:
I would be able to change certain parts of the images colors. For example if I wanted the bow green and the present red with yellow stripes, would I have to make a new image that had that or is there a way to program something (elegantly) along the lines of that? I'm just asking to see if its possible and if it is, what language would be best to do this?
Keep in mind this would be a feature on a website.
That's not going to be easy the way the image is. You have no way to tell the computer which part is the bow, which part is the stripes, and which part is the box. However, if you pre-colored them, you could do a color replace using GD library or imagemagick pretty easily. You'd do this in PHP. Here are some examples of how you could do it, I'd personally go the imagemagick route.
How can I replace one color with another in a png 24 alpha transparent image with GD
http://www.imagemagick.org/Usage/color_basics/#replace
(this example even has a similar gift box as the usage case, hehe)
Try leaving the parts you want changable transparent. Then, give the div it's in a hover state with the second background color.
You could:
Use an indexed-color image and change the colors in the palette.
Use #MT's suggestion, though it kinda gets out of hand with multiple colors and jagged regions.
Pick control points and fill ("floodfill") the image through them - programmatic version of using the bucket tool.
Use #profitphp's suggestion, which is really better my last one.
Abandon compatibility and use the new canvas element while it still has the "cool" factor :)
i presume this is a web-based painting application; you'll require a human to tell you what the parts are, and where they want the coloring to be.
The issue then becomes how to perform a flood fill at the user's request.
The best i can suggest is perform the flood fill server-side, using an image processing library - handing back the image to the user:
There is no javascript ability to access pixel data of an image.
Edit: Performing flood fill with HTML Canvas
I'm working on a web application that need to allow the user to drag and drop as well as rotate an image.
Drag and drop is solved with the jQuery UI Draggable.
But how am I suppose to rotate an image on the page? My images are mostly one colored rectangles. I used divs to draw them on the page but how to rotate them?
It is okay if they only rotate 22, 5-45-67, 5-90 degrees
So I think of 3 solutions
Using Canvas
Problem: IE support
Using divs
Problem: it also needs canvas to rotate
PHP GD
This solution is the only hope that left.
How it might work: The application will prerender (22,5*x) rotated versions of original image. So they will be ready whenever user wants to rotate an image.
Please help. Any suggestions appreciated
One possible solution is to use a JavaScript graphic vector library that can use automatically an alternative to canvas when used on IE.
Raphael is a really good one, give it a try:
http://raphaeljs.com/
You can find more informations about rotation with raphael here:
How do I rotate a div with Raphael.js?
take a look:
http://www.dyn-web.com/code/rotate_images/
Rotate image clockwise or anticlockwise inside a div using javascript
The server side method sounds a bit wasteful (all versions of the image need to be downloaded), dare I say you should try using Flash for a cross-browser and client side solution.
You cannot manipulate image directly with Javascript other than resizing them (and this is technivally done with CSS, not Javascript...). The best solution would be to use Raphaël; it will allow you to ratate, but also drag and drop, and it is also built using JQuery.
Of course you could alternately use different image states and use them as "sprites" for your rotated rectangles, however you will not play extensibility there. (GD is a bad design, don't use that.)
I have a whole bunch of images of illustrations that I would like to crop to a smaller preview size.
The problem is that I want to crop them to show an "interesting" part of the illustration (ie avoid areas of whitespace).
The images typically have a flat color or a subtle gradient for the background. They are mostly vector style artwork with fairly distinct shapes.
Here are some examples: link ;-)
I've been thinking about using some sort of image feature detection algorithm with a sliding window to find the area with the greatest number of features.
I'm implementing this in PHP, but I don't mind implementing it myself if there isn't a library or extension available.
Ideas?
ImageMagick has a trim operation. It's available as a library but I don't know how hard it is to use from PHP. There are some PHP interfaces.
OK, so here's what I would've done, after looking at the examples:
Sum all rows and all columns of each image. You'll get two arrays, both looking like this:
/-----\ /--\
_/ -- |
___- \_________
By looking at these arrays for a few images, find a suitable threshold (probably something just above zero). Then the leftmost and the rightmost crossing of this threshold is where you have to crop. I hope I've managed to make it clear enough, if not -- ask!
Here's a fairly simple approach using an edge-detection filter, and then cropping around the center-of-edginess of the image to generate a thumbnail. It works pretty well on most images, but not if there are more than one subject. I'm open to suggestions on other ways of identifying the "interesting" points in a source image.
Well, you might want to consider just using an edge detection algorithm. Pick the area with the largest number of edges. Give higher weight to edges that are not blurry (as they may be from the background).
ImageMagick for PHP has automated generation of thumbnails. This SO question has a link to an ImageMagick auto-crop operator, and I'm not sure, but I think this is the PHP interface to it.
From the link:
bool Imagick::trimImage ( float
$fuzz )
Remove edges that are
the background color from the image.
For more general "interestingness", maybe try an inverse of seam carving (to find the highest energy, rather than lowest energy areas).
A CLI program using http://pecl.php.net/package/imagick:
<?php
dl('imagick.so');
$img = new Imagick();
$img->readImage($argv[1]);
# (* 0.0: exact match; * 1.0: crop entire image)
$fuzz = current($img->getQuantumRange()) * 0.25;
$img->trimImage($fuzz);
$img->writeImage($argv[2]);
?>
It should work good enough, as long as the image doesn't have a frame around its border.
Drupal has a project called smartcrop, which has PHP code to find highest entropy and "interesting" areas in images. See the output examples.
You should be able to use the functions in the module and the library in none-Drupal projects too.