Hi i just went on a site, when you press "upload image" a lightbox comes up, and then it says upload image, you browse find a image and then you press submit. After that, it shows your image with a square that you can move around and make bigger smaller /width/height.. so you like cutting. After that you can save, and you now have a new avatar.
What have they done for doing that?
Is there any library or so to do this? Would like to have that on my webpage.
Look at PHP GD library imagecopy on how to crop images via PHP.
They are likely using a Jquery + the GDLibrary or Imagick Library for PHP.
They used something called jCrop in jQuery.
http://deepliquid.com/content/Jcrop_Manual.html
Related
I would like to do the following:
I have an existing .jpg picture from a Webcam.
Now I would like to overlay this Picture with the following Widget:
<div style="width:250px">Wetter in Eglisau<br /><script src="http://wetter.webmart.de/e/782303"></script></div>
Then the picture should be saved under a new name in the same folder.
Can I do this with a PHP Script?
I have searched tutorials, but the are all for only text or Image over Image etc.
Unfortunately, php can't help you with this. If you need to produce just one single picture, then image editor will do.
But I guess, you need to automate this process with fresh webcam images and weather updates. I would recommend to create a web page with two image as #MilanG suggested using css tricks. After that you can use some headless browser to capture the screen, e.g. PhantomJS http://phantomjs.org/ will do.
Again, as I wrote in the beginning, php cannot help you with this task.
You have image manipulation libraries for PHP. i.e.:
http://php.net/manual/en/book.imagick.php
http://php.net/manual/en/book.image.php
if you want that overlay to be part of the image.
Other way use absolute positioning for overlay block, give it higher Z-index and place it over the image.
I've searched for ages for a solution, but I can't really find the solution to fit my needs.
So here's the story. Im creating a website and I really want to add watermarks to the downloaded images.
Yesterday I was browsing in a website called 9gag. If you haven't heard this website before, its a comic based website, and I found out that when you download an image, or access an image from anywhere else except their website, there's a 'watermark/banner' at the bottom of the image.
For example take this image:
link , notice no banner at the bottom of the image.
If you right-click, 'Copy image URL' , you get this link: image . See the banner now?
Im very confused on how they do it, and it would be great if we could use this on our websites.
Anyone with any ideas? Is it using any type of CGI?
P.S: I Wasn't sure what tags to add, So if anyone knows a better tag combination, please do edit it.
This effect is just a css trick. The image itself actually contains the watermark at the bottom, but the image tag is wrapped in a block that hides (overflow:hidden) the bottom 42 pixels of the image when it's being displayed in the page.
There are other things you can do that are more sophisticated (for instance, have the image served via a php script and comparing the http referer
header("content-type: image/jpeg");
if (!isset($_SERVER['HTTP_REFERER'])){die("alert('Restricted Access!');");};
$_u=parse_url($_SERVER['HTTP_REFERER']);
$_u=preg_replace("/(www.)/i","",strtolower($_u['host']));
$_i=$_SERVER['HTTP_HOST'];
$_i=preg_replace("/(www.)/i","",strtolower($_i));
if ($_u != $_i){
//handle this with gd or redirect
}
) but this will only work if someone tries to load the image from a different website or if they go to the image url... generally save-as will save the image from the browser's cache, so the css trick might be the best option you have (or a combination of these options). Fundamentally keep in mind that anything you show on the web can be captured (the code above isn't foolproof, and you can always prtsc).
GD library of php will help you doing that.
You'll need to create a new image using imagecreate function but adding some more "space" to the original size. Example: if I have an image of 200x200 (which you can retrieve using gd functions too) you'll need to create a 200x220px image using that function
Fill the new image with that gray color using imagefilledrectangle function
Copy the original image into the new one using imagecopy
Set the header's content type to image/type png gif etc..
Output to the image using imagepng or any other function that has the format you want.
I've had success with JQuery Watermark:
Jquery Watermark
I am using a jQuery plugin http://odyniec.net/projects/imgareaselect/ that allows cropping of an image.
I have search high and low for a tutorial that allows me to over write the file on the server with the cropped version...but found nothing of use.
I am using the basic integration of the plugin inside Facebox. This is working fine.
I have a button on the page which says 'Save', when that is clicked I would like to store the new image (cropped) on the server.
Any suggestions or need further information?
Check out this awesome tutorial
I use Jcrop for my projects works great!
http://deepliquid.com/content/Jcrop.html
http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop <--
Have you taken a look at the links at the very bottom of the plugin page? There are some useful links including this one. It should help you get started with the php side of things
Turned out the that image I was uploading was bigger than the area size of the cropping tool.
Image was 1024x768 however I resized the image to fit within 500x500 overlay.
I will need to resize and save new sized image during the upload.
Thanks for all your suggestions.
I am trying to build a system that allows a user to select an image from their own computer, and crop it using the jCrop tool from jQuery. My question is can I show the image the user has selected from their system without uploading it to a system, I dont really want to do two uploads, unless I can do the first upload silently? Any help would be great.
Thank you.
You don't have to upload twice. Just upload the image at first time
Use jCrop and send image Thumbnail's coordinates(x,y), width and height.
Resize Image according to them
AFAIK, not using JavaScript and HTML (4) at the moment.
Flash can do image processing before upload - SWFUpload for example can resize images before uploading (doesn't support cropping though), but I don't know an Open Source implementation of a Cropping tool in Flash.
It will probably also be possible using HTML 5.
However, I don't see how you would need two uploads to do this? Isn't it 1. Upload 2. Show with Cropper 3. send Crop info to PHP script that processes the uploaded file?
Any recommendations for how to resize & crop images in a PHP web app? Ideally will integrate into the UI to allow user to upload, preview, then optionally resize and crop.
Thanks,
Graham
Here is a jquery cropping plug-in.
http://deepliquid.com/content/Jcrop.html
and here's a php code to crop an image (you'll find code to upload an image there as well)...
it even provides for a rough gui to select the cropped area by clicking on the image.
Here's a PHP + JQuery script that looks promising
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/