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
Related
I Googled a lot but no sufficient ans was found.
I need to place an image (900 X 5200 px) in one of my pages. As the image is sensitive, I need to prevent users from copying the image. I have an idea that can do this:
I will divide the image into pieces. Then the image grid will be loaded into some divs. So user won't be able to save the image. Or he/she will save only 1 square cm part of the whole image.
But this plan will not work if some small parts of the grid fails to load. So, I want to do another thing. I want to load the full image then cut the image into parts. Then show the parts altogether in divs.
This requires javascript. But I am confused how to start and need your help.
Now you know the matter, if you have better idea please share.
Thanks in advance.
The trick is simple. Create a div with the background being the image you want to display. Layer a div with a transparent image over it. When user goes to save the image, they get a blank. Program your server to not return "direct" requests for the image (so some clever chap can't just look at the css and retrieve the URL to the image).
Granted the image will still be in their cache but so would the sliced image so it won't make it impossible just more difficult for a determined person to retrieve the picture.
TL;DR Don't over engineer a solution, print screen will get around anything you do.
You are not going to be able to prevent people from copying this image. Plain and simple. Regardless of your best efforts, a simple PRT SCRN and paste into Paint will be enough.
Your best bet will be to not over engineer this and simply place a watermark and copyright notice on the page. Other options can include placing a transparent <div> over the top of the image so it cannot be right-click'ed and saved, but it still will not prevent the image from being stored in the user's cache. Or stop them from using developer tools or Firebug to find the source image.
You can do this with:
http://www.pixastic.com/lib/docs/actions/crop/
Yet you need to develop your logic around that library.
I have made example, you can see it on this link:
http://simplestudio.rs/yard/crop_img/
Basically you can get URL to your image via php and using my code or code similar to it crop your image into pieces and display them on canvas.
This way image is not accessible via browser or inspect element or what so ever. User can save the pieces individually but you can configure my code for piece to be 5px, I set it to 20x20px.
* test saving image piece by doing right click anywhere on image and do a "Save image as.." option.
Also you need to think of way how to hide src to image provided by php, if you need help on that I can help you.
I want to build an application in which an image is presented. When one click area in the image then it can result with different outcomes, depends on the area in which he/she clicked. The outcome is always replacement of the image with another one-sometimes similar image with only small area if it different from the original picture.
My question is whether this can be done when the images are stored on external server so it would be smooth enough and wouldn't feel like the computer have to download the other picture (meaning that it would feel more like in game when action lead to immediate outcome).
You could preload all images before starting your game.
Check this jquery solution for instance http://www.farinspace.com/jquery-image-preload-plugin/
This way you will get a smooth result on user interaction
I am creating facebook app in which I have user image as background image and have a default cap image which user can move around. After user has placed the overlayed image(a hat) over the right place he clicks save
This is where I am struck and like to know how can I save the background + where user placed hat as single image, if this makes sense. I donot know how to approach this whether these image can be saved as one or do i get positions where the other image was placed
If someone can suggest
You can simply place the hat image using the GD libraries which are available on most web hosts. The specific method that will be interesting to you is imagecopymerge.
Alternatively, you might consider simply storing the coordinates in your database and then reassembling the image in HTML, assuming you don't need to send the image anywhere.
if you use jquery, check out position(). This will get the hat position (top, left values) in relation to the parent (which should be the backgroun image).
On dragging the hat, update some hidden inputs with the values from position(). Now when you submit the form you have top/left positions which you can use as X/Y positions in GD or imagick to make one single image, or store in a database so you can render the hat in the correct place next time it loads the page up
You need to extract the placement coordinates using javascript, and then transfer them to PHP. Since i don't have any specifics about your code i can only give you hints:
1) Get the hat image placement coordinates
2) Compute the OFFSET of the hat vs the head
3) Send that to PHP with all info you might need to process the request
4) Use GD to imagecopy the hat onto the head's picture and save it
5) Show or output a link to the image...
Does that help?
Check out ImageMagick
For reference Check how Imagemagick Overlay of image onto another image is done
My app is posting to users' Facebook walls, and linking to a page they have created. The page is in html. I'd like to be able to put a thumbnail of the page as the image on the wall post. I'm not sure whether this is possible or not. Anyone have any ideas?
If it helps, the page itself is stored as a series of 'elements'... for each one, I know the size and position of the element, and the content (which may be text or an image). So I can pull all that in from the database.
I guess it would be sufficient to create a thumbnail using php at the point when the user clicks 'Publish This to my wall', if that's easier than doing it on the fly - I can save the image and then link to it.
Any ideas?
I create thumbnails for my site using CutyCapt, which works very well indeed on both Windows and Linux. You can use exec to invoke this from php.
There are also web services that allow you a quota of free thumbnail snapshots, that are easy to integrate into your website. e.g.
http://www.websnapr.com/
or
http://webthumb.bluga.net/home
I figured out how to do this. I used the PHP gd library, which allows you to create a base image and then add images and text. Works pretty well.
This question is a bit open at the moment as I'm not sure the idea is even possible.
So far I've loaded an image from a url, and then used jQuery UI draggable feature to allow the user to drag html text (which has been replaced using cufon font replacement) over the top of the image.
The major step (which is what my question relates to) is being able to take the image and text layered over the top of the image, and save the result, either to the server, or potentially offer the option to save the altered image to the user's HD, or what would also be useful is to upload to facebook using the facebook API, but this is something I know is possible.
It all hangs on whether it's even possible to achieve the first step, which is to save the image and layered text as a combined image?
I wonder if there is a PHP/jQuery solution that would allow me to do this?
My suggestion would be to have an internal URL that outputs the final image using jQuery and PHP, then take a screenshot using webkit2png of that page. You should know the dimensions etc., so you'll be able to crop down the resulting screenshot to just the region you're looking for.