'Copyright' balk onder afbeeldingen.
Ik ben bezig met een site en die bevat heel wat afbeeldingen. Nu wil ik graag onder elke afbeelding een balkje met de naam van de site waar het vandaan komt. Maar dat moet pas zichtbaar worden als je een afbeelding ergens anders naar toe kopieert.
Voorbeeld, 9gag, op de site zelf staat er niks onder/op de afbeelding. Maar als je hem bijvoorbeeld op een forum zet komt er een balkje onder te staan:
Ik hoop dat jullie mij verder kunnen helpen.
Elke afbeelding die op internet staat is te downloaden/op te slaan op de harde schijf.
Daarbij is het, voor zover mij bekend, niet mogelijk om alleen op het moment van kopiëren (/downloaden/opslaan) een (C) toe te voegen.
Ene truc die ik kan bedenken is dat je het (C) toevoegt aan de afbeelding maar, m.b.v. css, 'verbergt'.
Bedenk wel: een (copyright)melding zoals hierboven, is heel eenvoudig te omzeilen door de afbeelding wat bij te werken.
De enige manier om een afbeelding niet overal tegen te (kunnen) komen op internet is om die afbeelding niet op internet te zetten ;-)
Gewijzigd op 14/08/2012 13:43:47 door Obelix Idefix
Als je op 9gag de afbeelding versleept zie je die onderste balk er dan wel weer bij:
Vraag me dus af hoe ze dat doen.
Gewijzigd op 14/08/2012 14:14:40 door Jee vb
http://safalra.com/programming/php/prevent-hotlinking/
Daarmee (met zo'n principe) kan je ook plaatjes opnieuw renderen waardoor er tekst wordt toegevoegd.
Succes.
Edit:
Werkt natuurlijk niet als mensen iets willen downloaden.
Anders zou ik inderdaad met css bepaalde dingen 'hidden' maken als je het eigen site is.
Gewijzigd op 14/08/2012 14:18:03 door Remco nvt
Toevoeging op 14/08/2012 14:25:17:
kijk naar mijn voorbeeld: http://195.241.208.60/mobile/test.html
en sleep de afbeelding.
Toevoeging op 14/08/2012 14:31:59:
je kan als het goed is het ook zo doen:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
css:
.img {
overflow: hidden;
margin-bottom: -40px;
}
.img {
overflow: hidden;
margin-bottom: -40px;
}
als de reclame banner 40px is
Het punt is: een afbeelding wordt altijd asynchroon geladen. De html wacht niet tot de images geladen zijn om verder te werken (en php al zeker niet). Het <img> element wordt eerst blanco op het scherm gezet en dat element zal dan een eigen contact maken met de server.
Dus als je ergens een <img> hebt in je site, resulteert dat in twee verzoeken naar de server. Dat geeft je de mogelijkheid om te spelen met sessions (er zullen nog andere methodes zijn...)
Wat je met dit voorbeeld moet testen:
- run deze pagina bv. in Firefox.
- copy/paste de url van de image (dat wordt dan iets als http://localhost/watermerk/index.php?image=1) in een ander tabblad. Dit zal werken.
- Plak de url in een andere (merk van) browser, bv. Chrome. Hier zal je een wit blad zien.
De image wordt dus pas getoond als je op de site zelf bent geweest.
In plaats van een wit blad wil jij de zelfde afbeelding, maar dan met watermerk.
Dat watermerk moet je zelf eens bekijken; ik geef je een link in het commentaar.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<?PHP
session_start();
$file = 'jfk_anniversary_300.jpg'; // maar zoek vooral zelf een afbeelding. Plaats die in de zelfde map als index.php
if (isset($_GET['image'])) {
if (isset($_SESSION['visited_site'])) {
// de <img> staat op de eigen site.
forceFile($file);
}
else {
// de <img> staat niet op de eigen site, maar bv. op een forum
// hier is een goede plek om de afbeelding te tonen met een watermerk
// zie http://php.net/manual/en/image.examples.merged-watermark.php
}
}
else {
$_SESSION['visited_site'] = true;
echo '<img src="index.php?image=1">';
}
/**
* example of a way to force the download of a file
*/
function forceFile($file) {
// @see http://www.ryboe.com/tutorials/php-headers-force-download
if(!$file) {
// File doesn't exist, output error
die('file not found'); // or do something more useful
}
else {
// Set headers
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=$file");
header("Content-Transfer-Encoding: binary");
// Read the file from disk
readfile($file);
}
}
?>
session_start();
$file = 'jfk_anniversary_300.jpg'; // maar zoek vooral zelf een afbeelding. Plaats die in de zelfde map als index.php
if (isset($_GET['image'])) {
if (isset($_SESSION['visited_site'])) {
// de <img> staat op de eigen site.
forceFile($file);
}
else {
// de <img> staat niet op de eigen site, maar bv. op een forum
// hier is een goede plek om de afbeelding te tonen met een watermerk
// zie http://php.net/manual/en/image.examples.merged-watermark.php
}
}
else {
$_SESSION['visited_site'] = true;
echo '<img src="index.php?image=1">';
}
/**
* example of a way to force the download of a file
*/
function forceFile($file) {
// @see http://www.ryboe.com/tutorials/php-headers-force-download
if(!$file) {
// File doesn't exist, output error
die('file not found'); // or do something more useful
}
else {
// Set headers
header("Cache-Control: public");
header("Content-Description: File Transfer");
header("Content-Disposition: attachment; filename=$file");
header("Content-Transfer-Encoding: binary");
// Read the file from disk
readfile($file);
}
}
?>
Gewijzigd op 14/08/2012 14:57:07 door Kris Peeters
@Kris, ik wil graag geen watermerk door de afbeelding zelf.
@Lex, mijn afbeeldingen zijn niet allemaal even hoog. Dus de eerste optie valt dan al af aangezien het teveel afbeeldingen zijn om één voor één te doen. Áls de tweede optie werkt word het waarschijnlijk die.
Dan het volgende probleem, ik weet niet of ik deze vraag hier mag stellen. Hoe voeg ik zo'n balk toe aan zo'n 1000 afbeeldingen..?
Splits even het probleem in de aparte onderdelen.
- detecteren van hotlinking (zie de link hotlinking, of mijn code)
- het watermerk effectief maken (spelen in GD library. height bepalen, daar een strook extra bij doen, merge de afbeelding boven, het watermerk beneden)
- beslissen of je het watermerk zet bij het uploaden van de image <-> on the fly, bij het verzoek (Dat is een open vraag ivm je laatste vraag)
Gewijzigd op 14/08/2012 15:18:04 door Kris Peeters
Wat het hot linken betreft: het is niet 100% waterdicht, maar met bijv. de http://www.cyberciti.biz/faq/apache-mod_rewrite-hot-linking-images-leeching-howto/ kom je een heel eind.
Wat je kunt downloaden kun je nu eenmaal downloaden :) Als iemand een script schrijft om de 'goede afbeeldingen' te downloaden dan kun je hier weinig tegen doen.
De sessie check is een bekende manier, maar iets geavanceerdere scripts kunnen eenvoudig zien dat ze ook een sessiecookie moeten meesturen in het 'kwaadwillende' script, en deze dus eerst moeten binnenhalen (via een ander request).
Gewijzigd op 14/08/2012 18:35:07 door Robert B
Er is niets wat je tegenhoudt om dat al te doen, en je zal het toch ooit moeten maken.
GD heb ik al eerder naar gekeken maar lijkt mij te ingewikkeld voor het doel, niet?
Je kan met GD eenmalig een watermerk toevoegen bij het uploaden van de afbeelding (Dat belast de server het minste) of elke keer bij het bekijken van de afbeelding (Dit zal de server veel meer doen werken).
Of dacht je om dit zelf te doen met photoshop?
kun je niet op al de foto's een watermerk toepassen en dat op de foto weg doen met css
oeps een beetje verstrooit
Gewijzigd op 21/08/2012 14:14:34 door php knipper
Php knipper op 21/08/2012 10:23:51:
kun je niet op al de foto's geen watermerk toepassen en dat op de foto weg doen
Geen watermerk toepassen en op de foto weg doen?!??! :s
Obelix en Idefix op 21/08/2012 11:05:51:
Geen watermerk toepassen en op de foto weg doen?!??! :s
Php knipper op 21/08/2012 10:23:51:
kun je niet op al de foto's geen watermerk toepassen en dat op de foto weg doen
Geen watermerk toepassen en op de foto weg doen?!??! :s
Haha egt geen logica ;)
Op elke foto een watermerk toepassen. (eigenlijk niet echt een watermerk, maar onderaan dus een extra balkje) Op zijn eigen site dan de afbeelding 'snijden' zodanig dat het watermerk niet zichtbaar is.
Lijkt me prima doenbaar. Enige nadeel aan deze optie is dat je toch altijd paar kb extra laadt, onnodig.
Write Down op 21/08/2012 11:33:16:
Ik denk dat hij het volgende bedoelde:
Op elke foto een watermerk toepassen. (eigenlijk niet echt een watermerk, maar onderaan dus een extra balkje) Op zijn eigen site dan de afbeelding 'snijden' zodanig dat het watermerk niet zichtbaar is.
Lijkt me prima doenbaar. Enige nadeel aan deze optie is dat je toch altijd paar kb extra laadt, onnodig.
Op elke foto een watermerk toepassen. (eigenlijk niet echt een watermerk, maar onderaan dus een extra balkje) Op zijn eigen site dan de afbeelding 'snijden' zodanig dat het watermerk niet zichtbaar is.
Lijkt me prima doenbaar. Enige nadeel aan deze optie is dat je toch altijd paar kb extra laadt, onnodig.
dat heb ik in een eerdere comment all beschreven ;)
Gewijzigd op 21/08/2012 11:38:52 door lex van der poel
Danku,
Ger van Steenderen op 22/08/2012 18:12:21:
Daar heb je geen programma(tje) voor nodig dat kan je gewoon met PHP (via gd lib)
Dat is eigenlijk niet wat ik vroeg maar oke, blijkbaar is GD Library toch echt de beste keus. Maar waar staat precies op deze pagina hetgeen wat ik nodig heb. Dus een balk onder de afbeelding plaatsen.