There is on internet. Such script that, "jumps" before an another image.
So... for example, if I found an image, and I click on "Save as..." I get a 1x1 pixel image in place of the one I wanted to safe.
For example of it is
http://www.youtube.com/watch?v=9bZkp7q19f0
Next to views counter (1'167'974'545) there is an animation. But if I try to copy link or save it, it "push" into my hands useless picture. This script could be very useful on my website. How to do it?
As far as I can see from the code of the youtube page they use the following lines as the html elemnt for that image:
<img class="watch-dancing-psy" src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif">
So normally the image referred to in the src attribute is the 1x1 pixel image.
They use CSS to put the real image like this (when defining the CSS class watch-dancing-psy):
background-image: url(https://s.ytimg.com/yts/img/logo_dancing_psy-vflsJl9hC.gif);
In case of your example URL img src is a 1x1px transparent gif and the "actual" image and its dimensions are defined in CSS as background, width and height properties.
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.
This may be hard to describe...but...
I created some simple PHP forums and I have the ability for users to post image links and I want the image to appear on the page. BUT...my forum posts are inside an iframe and if the width of the post is too wide it would cut off the side so I want images to only be so wide. Any concepts for getting the image to fit? I wonder if there's some auto resizing option in HTML or a way for PHP to get the file width/height remotely and generate the HTML for it?
you can use the max-width attribute in css eg:
iframe img{max-width: 500px;}/*or whatever your max wants to be*/
and in php you can use
<?php
list($width, $height) = getimagesize($yourfilename);
you might need to wrap getimagesize in a if because it will cause it to return false on failure
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'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'm trying to make a script that zooms into an image. This is the page:
http://vermilionsite.com/phone/?id=1
Click the first option, then choose a colour, then mouseover the image. It uses the original image. How can I make it so that the zoom uses the new coloured image?
The jQuery function you have just adds a div with a background over the image, while the original mouse overlay function that zooms your image moves the 'bg-iphone.png' background around in an overlay, so the logic is somewhat flawed as you would also need another background image with the same color on the original div so a bg-iphone.png modified with the same color. I guess you could modify the script that returns your color overlay to also return a modified image and change the background of the image from bg-iphone.png to a png with the same color as the overlay.
Or you could have three modified pngs with the same colors you need that would change the background image in the select function.
Hope this helps.
use this http://www.userdot.net/files/jquery/jquery.loupe/demo/