I am trying to build a "demo" website for a client who wishes to show the template to their customers. One feature they are really looking for is to allow the user to upload their logo (jpg, png) and have that replace the placeholder logo image in real-time. It should also only be temporary until the site is refreshed.
The sample site is going to be be only the homepage, and its a complete PHP/HTML site with no database.
Is this possible? I've spent the better part of the morning looking over Google and haven't really found anything.
Any help is appreciated. Thanks.
If it's one page only, you can save the page's output as HTML with all javascript/css/images statically linked.
You could then define a region inside the HTML which can can be replaced (e.g. with HTML comments <!-- edit:start -->...<!-- edit:end --> or CSS comments /* edit:start */.../* edit:end */) that can be dynamically changed, for example with the temporary image (-URL).
But your question is quite broad and there can be numerous ways on how to do that, so this is just one idea or probably only one aspect of it.
You could allow the user to upload an image, then after the image is uploaded, load it into a $_SESSION variable. When outputting the logo image, check for the existence of the $_SESSION variable you created on upload and if it exists, change the source of the logo to an output script that reads the $_SESSION variable and outputs its contents with the proper headers.
<?php
session_start();
if (isset($_FILES['logo_upload'])) {
$handle = fopen($_FILES['logo_upload']['tmp_name'], "r");
$cntnts = fread($handle, filesize($_FILES['logo_upload']['tmp_name']));
fclose($handle);
$_SESSION['logo_data'] = $cntnts;
}
?>
OK, so I've got it figured out, at least the basic concept of what I'm looking for.
So I used the ajaxupload.js from Valums for the uploader, then included the My Image Scale jQuery from Hermits to auto scale the image to the containing div.
I currently have the image being loaded into a li that the script creates, and then being moved using .replaceWith to replace the original logo. This works perfectly.
Now I am going to adjust the code to not require the creation of the li element before moving.
For anyone else looking to do this, here's a Pastebin link
Thanks to everyone for all your help and suggestions.
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 have a question to ask you. So I have on my webpage a showcase that has some images that keep playing. I used JCarousel to build it. The thing is that when i first enter on the page i can't see the image or I see only a part of it. I suspect that this is because the site a few seconds while it loads all the images it has. My question is: how can I make certain images be the first ones to be loaded? Or how can I prioritise the way the images load on the page? By the way I'm doing this in html,php using javascript and ajax and the images are taken from a database.
Thank you very much!
If you Base64 encode them, you can put them in the CSS, or HTML. It will really increase the side of a page, so perhaps encode a low resolution picture, and then replace it with highres when it loads. That is, a preview image.
Try this tool/guide.
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.
I have a photo website which gathers images from a folder with PHP, displays their thumbnails on a page and, when clicked, opens a fancybox (fancybox.net) to display the full image. I am pretty satisfied with the result but as users start posting, they start asking for new features, and problems come out since I'm not a programmer. What I would like to do is a photo commenting/rating system (like the one on facebook to get the idea, but obviously not as complex): I've been trying to add a Disqus code to each picture, but it won't get displayed in my fancyboxes...So the question is, can you give me any (easy-to-implement) ideas on how to achieve this? I don't mind using already existing softwares like disqus for comments and polldaddy for ratings, since I guess it would require me to setup a mysql database to do it on my own...
To brief it again:
I have a "thumbs" folder which are gathered on a page.
I have an "originals" folder with the full size images that are called back by the fancybox.
I would like to have comments+rating in the fancybox.
Thanks in advance for any advice you can give me.
For your fancybox implementation I'm assuming that it's just pulling the image into the lightbox, not other content (i.e. a html page). What you'd need to do is set up a page which would grab an image, and output it along with your comments + rating code, then set up your script to use that page as the fancybox URL instead of a direct link to the image.
Without more information to go on I can't really help more than that.
ps for comments the Facebook Comments plugin might be easier for a non programmer to implement than Disqus.
i uploaded files into my server image folder.
after upload want to display the uploaded files as thumbnails in the grid view or anything(like windows explorer), also want to select multi files from grid view and download it.. any help to be appreciated.. im using php...
thank you so much...
Here some pointers to get you started:
Loop through the images and simply output them all, then use some CSS padding and width setting to get them into a grid. Alternatively, output them in a table, inserting a </tr><tr> every n loop iterations.
Add a checkbox input using some uniquely identifying value to each image to make it "selectable".
Use some Javascript to spice up the selection process and make it more "Explorer-like".
Try it and come back with more specific questions as you encounter them (after trying to solve them yourself first).
I think you need a PHP Photo Gallery instead. There is an awesome gallery Plogger that you can use.
Otherwise, here are more PHP galleries.
That would be a rather large project to undertake. Try a premade package like:
http://www.gerd-tentler.de/tools/filemanager/ (simple and free)
or
http://www.filerun.com/ (looks good, but requires license)
with the help of <table><tr><td>... you can make a grid view and with using the php code collect all uploaded files into an array then show the file in the grid view by inserting php code in between. In that you can give check boxes and place php code in between to generate an array while user cliks each check box correspondin to that file a link should be passed to the array and then post the values on the download button clik, in the next step you can use the php zip function to ip these file in the array and send it to user as download link