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.)
Related
I'm working on a website that has many tiled images using JQuery's Masonry plugin. The tiles are all uniform in size, but the images contained within them can be a number of sizes.
I was wondering if there's a good recommendation for a PHP plugin / script that can take an incoming image of any size, and do whatever is required to fit in a certain sized box (have automatically resize, crop, insert black space, etc.)
EDIT:
Thanks for the Php options. is there anything in the JQuery realm too?
This script would fit your need as well :
http://www.phpcodester.com/2011/01/php-function-to-resize-image-to-fit-in-a-standard-box-without-distortion/
If you need to modify something, php's image functions are always named imagesomething($resource,x,y,etc.)
Hope this helps.
You should have a look at TimThumb: http://www.binarymoon.co.uk/projects/timthumb/
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'd like to know which up-and-crop tools you suggest to me. I tried couple of scripts like JCrop but I always get stack with some type of format like bmp. I either can't upload or I can upload but can't crop. If you use (or know) one that works well with different formats, then please just give me its name and I'll be strongly appreciated!
Well, i dont know much about JCrop but you can build it up with several tools.
I think image processing kind of works should be done on server side.
There is a good OOP Library called Imagine. It's mostly based on Python's Imaging Library which is awesome and has decent documentation. And this is its crop functions documentation.
On client side you can use some kind of image area selection tool to let the user determine desired area to crop. imgAreaSelect is good to go. Then you can send crop area to php by JQuery's post function or any other way.
It's amassing that in all this time this haven't got any other answers, I hope this helps.
Like stated in the other answer you should combine a few tools to solve each part of the problem.
To let the user select the cropping area:
If you don't like jCrop you can try Guillotine. It's very lightweight, easy to set up and allows to crop, zoom and rotate images. It has touch support and it's responsive (fluid).
Keep in mind that you can't display image types that the browser doesn't support, but you can convert them in step 3.
To upload the images:
For most cases, once you have the cropping area, with a simple file input will suffice.
Now, if you want to upload files asynchronously check out
this
for a quick and easy set up or this
for a more complex solution.
To actually crop and process the image:
Once uploaded you can crop, convert and process the images on the server, ImageMagick is a great tool for this. It's Open Source and many languages have wrappers for it.
You've tagged the question with PHP so here is a PHP wrapper for ImageMagick.
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 am working on a website in which the client wishes to have users upload background images to a printable design, crop to size, add text. Do this to multiple pages then generate a pdf of the 'book'
I am running into the following issues/questions and just need to see where I can start
Are there any PHP developer packages that can do something similar. I have seen jquery crop tools but something also for adding text to an image?
How would I keep the resolution up? If the final cropped with text image needs to be 150dpi, when cropping I am guessing I would have them working on a 72dpi image, then somehow apply the crop and changes to the large image?
If the resolution issue wasn't a big deal I would go about it this way:
Simple image upload
Use jquery to crop photo to correct dimensions
Mess around with gdlibrary and imagettftext() to get the text onto an image (page)
Use something like FPDF to create a pdf from each 'page'
Is this the right way to go about it and any thoughts on the resolution issue. Thank you for any help!
Your primary tool should be ImageMagick. ImageMagick can do the cropping, resizing, scaling, overlay text or graphics, combining images, and apply special effects. A big advantage of using a separate tool instead of PHP's image manipulation tools is that you can do the same transforms in batch through other mechanisms, or even hand the work over to another server to keep the website more responsive. And if you do want to integrate it tightly into the website, you can use the MagickWand For PHP interface.
Cropping does not change DPI, only the dimensions of the image. Scaling, on the other hand, changed both.
You should take a look at Gallery, a GPLed program with some of the functionality you're looking for, and written in PHP.
domPDF is a good tool for converting HTML to a PDF. this way you can use the image they upload as a background image, then put the text over it in any standard HTML tag.
As far as the resolution/dpi issue goes, I'm not sure if there is much you can do outside of changing the size of the image. I would recommend looking into This PHP Library, which has a lot of good tools for manipulating images.
I think with a combination of these tools, you'll be able to create HTML that can make a PDF that's fit to print, and use that.