I'm considering writing my own image file format for my site. Why? Well, the site is going to include comics that only subscribers can read, and I want to make it a little difficult for someone to drag and drop the image and spread it around. Is there a better way of doing this, or is this a way I should investigate further? If so, how would one go about doing this?
I've read there could be a way in PHP with doing this, but unsure how to go about it if this is a good solution.
It's impossible to completely prevent your images from being stolen, but you can make the process harder.
The following method will make the real image unreachable unless checked from the source. You can use the original image as a background & put a transparent-blank file over it that matches the size of the real image.
Example:
<div id="image1" style="background-image: url(originalImage.jpg);">
<img src="blank.gif" height="250px" width="300px">
</div>
So, when the image is right-clicked, it will be the blank.gif that can be reached.
View this post for some other ideas.
An alternative solution would be to use PHP's GD Library. Using this method, you can add a watermark on all your images.
Hope this helps!
Related
So I am learning HTML , CSS and basic Javascript at school but i'm also trying to learn PHP in my spare time. I made a meme website as a joke but it got pretty big in my school. A friend suggested I make it so people cant steal the memes. I learnt the no-right-click thing in javascript but they can still see the images in the code. so after some research PHP seemed to be the answer. I successfully used this on it's own here
code used:
> <?php
> header('Content-type: image/png');
> readfile("pepe.png");
> ?>
but i found out you can't use the PHP inline with the HTML.
So this didn't work on the full meme page. I turned it into a .php and inserted the code on top in the function called meme1. The line full of "A"s is where I need the image to appear(by calling the function "meme1"). The test meme page php is here and a snippet of the source code is here:
<?php
function meme1(){
header('Content-type: image/png');
readfile("pepe.png");
}
?>
<div class="meme-tile">
<h2 class="exotic-title">EXOTIC TEST</h2>
<!--AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA-->
<div class="meme-classification exotic"><strong>Classification:</strong> Exotic</div>
</div>
<div class="meme-tile">
<h2 class="exotic-title">EXOTIC: COMING SOON</h2>
<img class="meme-image" src="images/soon.png" alt="image unavailable" />
<div class="meme-classification exotic"><strong>Classification:</strong> Exotic</div>
</div>
You can't avoid the possibility of having your images stolen. Once the image is seen by a user, it exists on his computer, there, he can theoretically manipulate the information in absolutely every way he thinks about.
The most simple way to steal your image is to make a screenshot and then simply cut the meme. So, as long as you show the image, that can be borrowed.
One solution would be to add a watermark to the image with some text to point to your site, the way that stock photo sites are trying to protect their images
It's impossible to do that.
There will be always a way to steal your content. I know this isn't not the answer you want, but it's the truth.
I doubt that this would provide any actual prevention of downloads, as you are running into a logical problem here - you want your users browsers to be able to view (thus download) the image, but you want to make it difficult for the users to reupload the images elsewhere. After all - they could always just do a screenshot.
But to answer your question, what you want to do is to have an HTML img-tag that loads your image as so:
<img src="http://cgscomputing.com/40955/home/meme/test.php" />
You could consider specifying the src as a relative URL, leaving out the domain name and path for simplicity:
<img src="test.php" />
An alternative to this - which will also make the stealing of images a little trickier, but in no way impossible is the use of data URIs (see https://www.nczonline.net/blog/2009/10/27/data-uris-explained/) - here you basically embed the image in the HTML, which means that the image has no URL that someone could download the image from.
I would highly encourage you to consider publishing your works under a creative commons license instead of trying to prevent them from being shared: https://creativecommons.org/choose/ .. this way you can give people permission to share the works, if they remember to tell that you made them.
I'm using Galleria.js to create a background slideshow in a site I'm working on, and I'd like to be able to serve different resolutions to different devices. I'm using adaptive-images.php which is generating the needed files, but it seems as though galleria is still pulling the original full resolution ones no matter what. Is there a way to make this work, or perhaps an alternative solution like picturefill.js?
Thanks!
I'd love to see this, too. Unfortunately this could only be done in Javascript - not in PHP. Probably it would be possible to use picturefill.js as a Galleria plugin but unfortunately I don't know enough Javascript to do this.
Explanation: Galleria dynamically looks for the image referenced and shows that one. Something is needed to tell Galleria to use a different image source (depending on the screen size e.g.). To do this the method that picturefill.js uses (replacing src by srcset) would be perfect but it has to be integrated as a function in Galleria.
It's probably not too hard for someone with a good knowledge of Javascript - anybody?
This recently has also been asked at Galleria's support: http://support.galleria.io/discussions/questions/18040-compatible-with-picturefilljs
However Galleria provides a somewhat useful functionality out of the box: You can use three different sizes of an image by serving markup like this:
<div class="galleria">
<img src="/img/thumb1.jpg" data-big="/img/big1.jpg" data-title="My title" data-description="My description">
<img src="/img/thumb2.jpg" data-big="/img/big2.jpg" data-title="Another title" data-description="My description">
</div>
The 'data-big' size will be shown in fullscreen mode out of the box - not depending on screen size.
Perhaps it's a workaround until something more useful comes up.
Everything truly adaptive needs a Javascript plugin for Galleria.
I am developing a web application using php and I need to process thousands of images which are watermarked. How do I remove the watermarked text programmatically from the image and save them?
You can't, this is impossible. That's the point of watermarks.
Visual recognition - as in the case of differentiating a watermark from the rest of an image - is in the domain of artificial intelligence, and it requires A LOT of neural network training.
If you can write a perfect algorithm for this one, you can break any CAPTCHA too. So good luck if you manage to do it! That said, you might be way over your head on this one.
Images with watermarks got them for a reason (Often due to copyright).
Removing them can lead their author to sue you.
That said, you can't do it automatically or/and programaticaly. If you really need to remove them, do it manually and buy Photoshop©
If anyone can remove the watermark of the image by just putting a simple code, then what is the use of firstly putting them on the images? It is of no use if anyone can easily remove it.
It can be removed by image editing by tools like Photoshop etc. But that will make you violate the copyrights law of the image owner. If you really need that image, request the owner via email or something.
Don't try to remove. Try to guess the link without watermark
Ex:
watermarked
http://domain.com/36436/34fdhfh_wtm.jpg
no watermark
http://domain.com/36436/34fdhfh_nwm.jpg
:) of course it is not that simple (depends on the website owner) but somehow there might be a rule though
I'm a beginner at this. And I tried to search on the internet about this. And almost all that I found requires frameworks and libraries. And I don't really know how to use frameworks.
Can you recommend something that could help me go about image manipulation in php. Something for beginners like me.
All I want to do for now is to output a thumbnail of 700 x 468 image. Without having the need to save the resized image.
$width=700;
$height=468;
$image=imagecreatefromstring(file_get_contents($file));
$thumb=imagecreatetruecolor($width,$height);
imagecopyresampled($thumb,$image,0,0,0,0,$width/4,$height/4,$width,$height);
header('Content-Type: image/png');
imagepng($thumb);
This creates a thumbnail that's 1/4 the size of the original, without destroying image proportions. Although you don't need to save any thumbnail image, image manipulation gobbles up huge amounts of RAM. Make sure you always have enough.
It's usually a good practice to save the thumbnail on the disk, for caching purpose, but if you really don't want it, just generate the thumbnail on the fly as explained by stillstanding, with the HTML img pointing to a php script like this:
<img src="resizeimg.php?img=original.jpg" width="700px" height="468px"/>
Additionnaly, you can make it invisible, with a bit of URL rewriting like this:
HTML
<img src="thumbnail-original.jpg" width="700px" height="468px"/>
.htaccess
RewriteRule ^thumbnail-(.*)$ resizeimg.php?img=$1 [L]
I have been looking at the YouTube Insight function and want to learn how their chart PNGs are created.
If you have a video and look at the statistics, you get a bunch of PNG-images that in many ways can be considered interactive. Look at the image below.
As far as I can tell, everything consist of PNG images. I expected to see flash elements, but I do not.
For example: The slider where you chose date range can be dragged, clicked and the image updates dynamically without the page reloading. I am thinking, maybe ajax-style calls are made that replaces the image? It is totally seamless as far as I can see.
Another example: You can chose country by clicking the world map. The images are instantly updated to display the demography chosen. Are something simple as image maps used to catch the clicks?
Google/YouTube Insight screenshot http://www.mattis.st/images/google_insight.png
My questions are:
1). How do you create PNG images with information from a database? I prefer to use PHP so if you like tweak your answers in that direction. I am not looking for any third part "plugins", other than perhaps jQuery.
2). How are they creating the "interactivity" on their PNGs?
The PNGs are only clickeable and interactive when you check Google Insight on your own videos. Checking normal statistics for a video only loads static PNGs.
I know about Open Flash Chart and the likes, however I want to create my own code to learn as much as possible and be able to tailor the code for my use.
I truly appreciate any answers. Please ask for clarification if I am unclear.
EDIT: I examined the Google/YouTube source code further and found one of the images to be:
<img src="http://chart.apis.google.com/chart?chs=422x110&cht=lc&chco=808080&chd=s:At9j0jSUPJKMM&chls=1&chm=B,F7F7F7,0,0,0%7Ch,CCCCCC,0,-0.5,1" class="GDYWU0EBBG">
Which looks like this (saved from my valid session):
Image from source http://www.mattis.st/images/google_insight2.png
As you can see, this is the background PNG image without the bars and the range selection overlay.
<div id="GEOMAP_map" style="">
<embed type="application/x-shockwave-flash"
src="/insights/search/resources/544738731-geomap.swf"
width="500" height="310" style="undefined" id="geomap"
name="geomap" bgcolor="#FFFFFF" quality="high"
allowscriptaccess="always" wmode="opaque" flashvars="(...)"></div>
Looks like flash to me.
AFAIK you will always need a plugin to generate images from PHP (be it GD or ImageMagick). I don't have any experience with ImageMagick, but I know GD isn't the quickest of cats.. I wouldn't count on it to generate your charts on-the-fly!
And as suggested by justkt, you could use any js library to create interactivity. No fancy flash required :)
After thinking about it, examining the source even more, and considering the replies you guys have made I have come to the following conclusions:
1). The PNG's are generated with the Google Charts API (thanks Tom!).
2). The interactivity is created with nifty javascript programming. The seamlessness of it is hugely impressive, and I will try to implement something alike in my project.
Thank you for your replies and your time.