I have a div that shows some content (several images, text, floating elements, etc) and I would like to add the posibility for a user to do something like "Save this content as image".
How can i do that? I read all the php docs but there's nothing good to do this, even imagegrabwindow sucks because of its high load, browser limitations, and also no X/Y or width/height control.
So basically, I want to do this:
Get #div content, click on Save as Image, then the user gets a .JPG or .PNG of that div, as if it were a printscreen (screenshot).
I don't want to pre-generate the content using GD, and neither do I want to save as .PDF.
The only thing I can really think of is to serialize the contents/placement/attributes of the content in the div, send that to the server, and have the server recreate the same elements, same positioning, same attributes with GD.
Off the top of my head, I'd see maybe inspecting the div and creating basically a form post, something like:
POST['images'][0]['file']='plane.jpg'
POST['images'][0]['position']['x']=23
POST['images'][0]['position']['y']=13
...repeat for each image
POST['text'][0]['content']='this is a plane!'
POST['text'][0]['size']='10px'
POST['text'][0]['font']='Arial'
The server could use this data to recreate what the user created in their browser.
Related
I have a WYSIWYG editor, which is used to create articles. The articles are then inserted into a database. The article is then displayed on the main page. It consists of 2 major divs/parts. The top part is a div with fixed height and is used to display an image that is submitted by the WYSIWYG(that's the plan) for the specific article. So, user(with privilege) writes article, inserts/uploads an image(which is located on the server), article gets inserted into DB and the url of the image as well.
My question is how I should display it? Right now I'm thinking of pulling all the required fields from the database and placing the image url into the div and it will render as an image. This feels really clunky, so with my limited experience I wonder if there's a more elegant way to do it.
You're on the right track. Pull the image URL from the database, then pop it into an img tag within the div, OR apply it as a background on the div itself.
For sizing the image to fit in the div, specify either the height or width of the image. The other will automatically size, keeping the proper aspect ratio. This can cause problems with it fitting in the div of a fixed height, so you will want to set the CSS overflow property on the div to hidden, so that images do not overflow outside of it.
You mean storing the image path in a DB then echoing it in an tag?
There's nothing wrong with that... better than storing the image in the DB if that's what you were wondering?
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 got a page here http://183.78.169.53/tyre2/page2.html. For now is static but I will be reading from the database and form something like this dynamically. The problem as I read position ID from the db and would like to place on each of the tyres? Any idea how to achieve it?
There are a fews ways to put labels on images in web applications.
Make an HTML element like a div or span, whose css background property is an image. You will have
to change the css dynmaically if the image is read from a database.
Generate a new image by compositing the text and background image server-side (but that is sooooo 1990s!)
Generate the whole display using <canvas>
Given what you have already, I would go with option 1.
You can put another image with the number on top of the tires. Alternatively, if all the images are the same, you can set the image as a background for the div/li/aand print the number as plain text.
If every picture is different, you can assign every div (or whatever it is) an I'd, and echo custom CSS that sets a different background image for each div.
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.