Does anybody know how to place an image in the webpage, but both position and clipping (maybe also resizing) are interactively done by user? I need it for my registration page, I've done some clipping and resizing from css and javascript, and it's not really solve the problem. If it's can be done by php, it will be perfect.
Here is a brief summary:
Let the user browse for and upload a
photo.
Validate the photo is of correct type
and dimensions using PHP's image
functions.
Show the user the photo in the
browser, along with a draggable DIV
that they can resize and move. This
is the cropping area.
When they click "Next", you transmit
the x,y,width,height of the DIV to
the server either by AJAX or simply
as hidden fields in a form.
Again, use the PHP image functions to
crop the image, and then resize it.
Save it to a permanent location.
Post a comment for further specific answers.
No matter what you're going to need to use either JavaScript or Flash to maintain intractability for a clientside resize of you image.
The following tutorial shows you how to use jQuery's simplified AJAX and PHP to upload an image to a temporary location, resize it, and save the resized copy where you desire.
Hope it helps!
http://www.webmotionuk.co.uk/jquery-image-upload-and-crop-for-php/
Try this class
http://www.verot.net/php_class_upload_samples.htm
All images that are being uploaded by user can be edited in anyway using php
Related
I'm looking for some jQuery plugin or smth similar.
For example, I need to crop a photo on website and to save the result on server.
I know that it is better to do it in Adobe Flash, but I really need to do in using JS.
Very few browsers support selecting an image with Javascript and manipulating it without first uploading it to a server. Instead, you'll need to:
Allow user to upload image to server
When upload is complete, resize the image (with PHP) to a manageable size for the browser for preview
Show the resized preview image in the browser in something like JCrop
After the user chooses the crop area, have them click "Save"
On Save, pass the coordinates of the cropped area to the server/PHP to have it crop the original image. You'll have to scale the coordinates for the preview to coordinates for the original image.
Save the new image to disk/S3/whatever with PHP
I managed to do this without ever using my server or having the image touch my server by using http://transloadit.com/. I use transloadit's Javascript upload form to upload to their server storage (S3) and use a template that saves the original and resizes for preview. Both the original and preview are stored in transloadit's temporary S3 account, not mine. I then use JCrop to show the user the preview. Once they select the crop area I then tell transloadit to crop the original photo but with my crop coordinates (scaled from the preview image to fit the original) using a template that also makes several thumbnail sizes. Transloadit then saves all the images to my S3 account and tells me the URL where it saved it.
Check out jCrop. It's perfect for this stuff.
You are looking for JCrop
Here are some demos.
Here is an example implementing in on PHP.
Is there any way to show an image without its path. I mean not using HTML tag, I'd like to use PHP to show image. Because if I use HTML, someone can save or share that image.
Edit: I'm sorry about my question is not clear. I don't mean preventing saving image. I mean not showing the file path "/path/to/image.jpg" on URI or HTML. Because I don't want user copy and share the link which contains that image right on my website. The only way to share that image is to "Save Image As" and share it. Anyway thank you all.
This is my solution:
<?php
$image = 'new.png';
$content = file_get_contents($image);
header('Content-Type: image/jpeg');
echo $content; exit();
If the browser can view it, the user can save it. There's no way around that rule.
The only exception to this is if you recreate the image using 1x1 pixel divs of the colour of each pixel in the image, which is extremely heavy-handed and only usable in the slightest when the image is very small.
Even if you output the image with PHP, it will need to use HTML. There is no way to prevent a user from saving an image.
You could try using the image as a background-image with CSS, which will prevent non-advanced users from saving the image, but anyone who knows how to inspect the DOM or read CSS won't have any issue saving it.
Consider this - by the time a user sees the image on a page, their browser has already downloaded the file to the user's hard drive.
This is my solution:
<?php
$image = 'new.png';
$content = file_get_contents($image);
header('Content-Type: image/jpeg');
echo $content; exit();
You can give base64 of your image as src in <img> tag.
Example:
<img src="data:image/png;base64,--your 64--" alt="Red dot" />
As dtbarne explained any advanced user can get the image. However people do several things to prevent this form average users.
Disabling right click
Show in a popup with no tool bar
Set images with CSS to hide the path in as we use in <img src = "">
Load images using javascript
Generate dynamic images using PHP. It need check authentication and timestamp before generating the image.
There may be other ways too. Just for your consideration.
rendering anything in the page needs HTML in some way. this also means that it IS visible somewhere in the code - some directly visible, some require a debug tool to intercept.
you can make it impossible for people to steal the image in the following ways (some not ideal but does the job)
use flash/silverlight as a frame - though not ideal, it does help you prevent those who right-click and save. you can't view the flash source either.
use a background image - size a div enough to fit the image in it (since divs rely on explicit dimensions or children's dimensions to stretch it). the url is viewable on the CSS (unless it's dynamically placed)
use an image that has a "shield" - to do this, create a container div and place your image in it. in the same container, have a div that covers the image (absolute position, z-high z-index). this prevents the "right-click save" method. but the image path is in the source (unless it's dynamically placed as well)
you might think of canvas, but canvas is like a bitmap (therefore a picture still) so still a no-go from there.
all of which are not a fool-proof method. the only way you can avoid people from stealing owning images is to actually use a watermark. they may save but can't own it since it will have a watermark (like your name) across it.
If the client can see your image, users can save it anyway.
Image this scenario:
There is a picture locally in my server, where a sketch is displayed, and there is a "blank hole" area on it.
Then, a user can upload another picture to my server.
What i'm trying to achieve is this:
After image upload is finished, the first image (the one with the "hole") is displayed, and behind it is displayed the user's photo, so that you can see it through the "blank hole" area of the first photo.
Then the user can move his picture (drag & drop style) so he can choose which area of it is visible through the "blank hole".
Then i would like to save the result - by merging the 2 photos or keeping the position of the user's picture in a db so i can display it again later.
(Something like this more or less)
What kind of technollogy should i look for? I'd guess javascript(for the drag & drop) or html5 or php(for merging the photo)?
Are there any libraries that i can use?
I hope my explanation isn't too messy, i didn't even know how to google for it.
I don't know if there are better solutions (and I suspect there are), but I suspect all of this can be done with not too much trouble. Here's a rundown of one way to approach the problem:
Use a JavaScript-powered "upload widget" such as uploadify to enable your user to upload "his" image to the server. The server will do some processing on the image (e.g. resize and crop to suitable dimensions) and save it using e.g. PHP's gd library. It will return a URL to the "prepared" image back to the browser -- all of this through AJAX.
The browser then has a URL to the user's image, so using more Javascript you can dynamically add an element that displays it inside the page and allow the user to move it around with e.g. jQuery draggable. Compositing the draggable image behind your static content (the image with the "hole") is a detail you will have to take care of using a combination of HTML, CSS and again Javascript.
When the user is done, use an AJAX call (e.g. again jQuery) to inform the server of the image's positioning (this will be available through the facilities of the Javascipt framework you have selected). The server can then "compose" the two images together (gd or something equivalent once more) and return to the browser a URL through which the final product can be accessed.
Of course there are lots of details to take care of here, but knowing exactly what the plan is should help you get started.
Have a look at the PHP GD extension. If it's installed, it's pretty easy to have an image (with a transparent center) to be merged on top of a second image that a user would upload.
Have a look at http://php.net/manual/en/function.imagecopymerge.php
Ok to get you started, yes use a JavaScript drag and drop module for the placing of the image. You can record the x /y cordinates relative to the container. Do the image merging with a PHP image library / Class. Something like this : http://www.phpclasses.org/package/3930-PHP-Generate-an-image-from-the-combination-of-2-images.html
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 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?