Se vuoi aggiungere una filigrana a una foto senza preoccuparti degli editor di immagini o aggiungerla durante il caricamento delle foto sul server, allora questa lezione è per te.
In questo tutorial, ti mostrerò come aggiungere una filigrana a un'immagine al volo senza modificare effettivamente l'immagine originale. Prima di tutto, avrai bisogno di un'immagine che utilizzerai come filigrana.
Quindi formiamo l'intestazione del file:
// questa riga dirà al browser che stiamo passando un'immagine jpg header("content-type: image/jpeg");
Quindi formiamo immagine png e ricavarne le dimensioni:
// crea una filigrana png $watermark = imagecreatefrompng("watermark.png"); // ottieni larghezza e altezza $watermark_width = imagesx($watermark); $watermark_height = immagini ($watermark);
Faremo lo stesso con l'immagine originale, ma solo in formato jpg. Questo è comune per le foto caricate tramite un modulo. Agiamo come segue:
// creazione jpg immagini $image_path = "originale.jpg"; $image = imagecreatefromjpeg($image_path); // ottieni la dimensione dell'immagine $size = getimagesize($image_path);
Ora dobbiamo inserire una filigrana sull'immagine:
// metti la filigrana in basso a destra. 5px padding $dest_x = $size - $watermark_width - 5; $dest_y = $size - $watermark_height - 5;
Quindi imposteremo le opzioni di fusione per entrambe le immagini:
imagealphablending($immagine, true); imagealphablending($watermark, true);
Alla fine, creiamo una nuova immagine usando i parametri:
// crea una nuova immagine imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height); immaginejpeg($immagine);
È importante portare via:
// memoria libera imagedestroy($image); imagedestroy($filigrana);
Puoi usare Photoshop per regolare la trasparenza della filigrana.
Questo è tutto con la teoria. Ora applicheremo le nostre conoscenze in un progetto reale. Tutto questo deve essere salvato in un file. Ad esempio chiamato watermark.php
Header("tipo di contenuto: immagine/jpeg"); // ottieni il nome dell'immagine tramite GET $image = $_GET["image"]; // crea una filigrana $watermark = imagecreatefrompng("watermark.png"); // ottieni l'altezza e la larghezza della filigrana $watermark_width = imagesx($watermark); $watermark_height = immagini ($watermark); // crea jpg dall'immagine originale $image_path = "/path/to/image/folder/" . $immagine; $image = imagecreatefromjpeg($image_path); //se qualcosa va storto if ($image === false) ( return false; ) $size = getimagesize($image_path); // metti una filigrana sull'immagine $dest_x = $size - $watermark_width - 5; $dest_y = $size - $watermark_height - 5; imagealphablending($immagine, true); imagealphablending($watermark, true); // crea una nuova immagine imagecopy($image, $watermark, $dest_x, $dest_y, 0, 0, $watermark_width, $watermark_height); immaginejpeg($immagine); // memoria libera imagedestroy($image); imagedestroy($filigrana);
Ora, per mostrare una foto che avrà una filigrana senza cambiare l'immagine originale, usa il seguente codice.
I proprietari di siti (forum, bacheche, ecc.) spesso affrontano il problema della filigrana di tutte le immagini di siti di grandi dimensioni.
Ovviamente questo problema può essere risolto creando manualmente una filigrana su ciascuna immagine, tuttavia, in primo luogo, ci vuole molto tempo e, in secondo luogo, diventa necessario memorizzare due versioni dell'immagine, con e senza filigrana.
La soluzione a questo problema può essere quella di applicare dinamicamente una filigrana all'immagine prima di trasferirla al visitatore del sito.
Esiste una soluzione a questo problema su Internet sotto forma di due file, il cui contenuto è riportato di seguito.
Codice sorgente del file ".htaccess".
DirectoryIndex index.php RewriteEngine On RewriteCond %(REQUEST_FILENAME) -f RewriteRule ^(.*)$ /watermark/_watermark.php
Il codice sorgente del file "_watermark.php"
250) && ($info_o > 250)) ( // Per le immagini senza canale alfa // L'ultimo parametro della funzione è il grado di opacità della filigrana imageCopyMerge($out, $watermark, ($info_o-$info_w)/ 2, ($info_o -$info_w)/2, 0, 0, $info_w, $info_w, 25); // Per immagini con canale alfa // In questo caso la trasparenza è controllata dal canale alfa dell'immagine stessa // imageCopy($out, $watermark, ($info_o-$info_w)/2, ($info_o-$info_w)/2, 0, 0, $info_w, $info_w); ) switch ($info_o) (caso 1 : imageGIF($out); break; caso 2: imageJPEG($out); break; caso 3: imagePNG($out); break; default: return false; ) imageDestroy($out); imageDestroy($originale); imageDestroy($filigrana); restituisce vero; ) ?>
La soluzione si riduce a quanto segue, il file ".htaccess" viene inserito nella directory con i file di immagine. Inoltre, sul server viene creata la cartella "watermark", che contiene il file di script "_watermark.php" e il file di filigrana vero e proprio "watermark.png".
Allo stesso tempo, rispetto alla versione originale trovata su Internet, ho apportato piccole modifiche a entrambi i file di testo.
Nel file ".htaccess", in espressione regolare ricerca di file immagine, viene aggiunta l'estensione "jpeg", poiché è anche comune.
Lo script "_watermark.php" è stato ridisegnato per posizionare la filigrana al centro dell'immagine (questo era richiesto dal compito specifico da risolvere) ed è stata aggiunta la possibilità di regolare la trasparenza della filigrana creata (commenti nello script body ti aiuterà a impostare tu stesso questo parametro).
Dovresti anche prestare attenzione al fatto che inserire la cartella "filigrana" nella cartella delle immagini, come consigliano le fonti originali, non otterrà il risultato desiderato, perché. in questo caso dovremo avere in ogni cartella il proprio file ".htaccess" e la cartella "watermark". Ciò è dovuto al fatto che il file ".htaccess" contiene percorsi assoluti dalla directory principale del sito al file "_watermark.php". Pertanto, avendo una sottocartella "filigrana" separata in ogni cartella con immagini, se dobbiamo cambiare la filigrana (o lo script che la sovrappone all'immagine), dovremo apportare modifiche in tutte le cartelle.
Per evitare questo problema, consiglio di creare una cartella "watermark" nella directory principale del sito e di inserire un file ".htaccess" nelle directory delle immagini senza doverlo cambiare ogni volta. In questo caso, per modificare la filigrana o lo script, dovremo apportare modifiche in un solo punto del sito. Crea filigrane diverse per cartelle diverse con le immagini in questo caso, puoi fare riferimento da file diversi".htaccess" a diversi script come "_watermark-1.php", "_watermark-2.php" ecc.
Quindi, riassumendo, possiamo dire che per applicare filigrane a tutte le immagini del sito, è necessario scaricare l'archivio allegato di seguito, decomprimerlo, posizionare la cartella "filigrana" nella directory principale del sito, sostituire il file filigrana " watermark.png" in esso con il tuo e posiziona il file ".htaccess" in quelle directory del sito, le cui immagini dovrebbero essere contrassegnate con una filigrana.
È possibile scaricare un archivio contenente tutti i file necessari da questo
In alcuni casi, l'aggiunta di filigrane alle immagini che inserisci sul tuo sito lo è l'unico modo in qualche modo proteggerli dal furto. Inoltre, affermano che tali filigrane attirano traffico aggiuntivo.
Ci sono molti modi per filigranare un'immagine con utilizzando PHP, ma il mio cliente aveva bisogno di un metodo di applicazione che consentisse di cambiare la filigrana con una nuova in qualsiasi momento.
A quanto pare, esiste una soluzione del genere.
Di solito viene utilizzato da persone che sviluppano siti con contenuti prevalentemente grafici.
Il problema di attuare tutta questa disgrazia sta nella scelta di come applicare una filigrana tra prestazioni e flessibilità. Soluzione ideale, che andrebbe bene a tutti semplicemente non esiste. Ecco perché ci sono molte implementazioni.
Nel mio caso, il cliente si riserva il diritto di cambiare il marchio in qualsiasi momento e invece di "Corna e zoccoli" scrivere "Zoccoli e corna". Anche il metodo selezionato di watermarking deve tollerare questo.
L'essenza della tecnologia di watermarking qui descritta consiste nell'aggiungere lo stesso marchio ogni volta che viene caricata un'immagine. Sì, questo metodo comporta una serie di limitazioni che possono influire in modo significativo sulle prestazioni, ma come si suol dire, il cliente ha sempre ragione, e quindi se quelli. Poiché l'attività richiede l'applicazione dinamica di una filigrana, questo è esattamente ciò che devi fare.
Se qualcuno ha un modo più semplice, allora sei il benvenuto nei commenti. Sarà interessante ascoltare.
Prima di portare del codice, vorrei descrivere i vantaggi, oltre a fornire un esempio funzionante.
Conclusioni: per ospitare un numero limitato di immagini con filigrane, questo metodo è il migliore, ma se hai intenzione di aprire una galleria fotografica, sarà più corretto cercare qualcosa di meno carico.
Come promesso, per questo non è necessario avere conoscenze particolari, è necessario:
È tutto. Tutti sono contenti, sia tu che il cliente.
Corri un grosso rischio quando pubblichi le tue immagini e i tuoi video su Internet, poiché i tuoi contenuti possono essere facilmente copiati su centinaia di altri siti. Non sarebbe bello trovare la tua foto per le notizie, ad esempio, su cui hai lavorato molto, su un altro sito senza indicare la fonte, cioè il tuo sito, giusto? Sarai sconvolto, per usare un eufemismo, ma se non lo fosse immagine semplice alle notizie e al lavoro difficile in Photoshop, dire che ti arrabbierai è non dire nulla! Quindi cosa puoi fare per proteggere la tua grafica?
Per proteggere il copyright di immagini o video su Internet, viene solitamente utilizzata una filigrana digitale o una filigrana digitale per comodità. Allega una filigrana a ogni immagine caricata per proteggerla. CEH può essere il logo del tuo sito o della tua azienda, posizionato in modo bello ed estetico sulle immagini caricate.
Creiamo prima un file contenente le impostazioni necessarie sotto forma di costanti - /config.php:
Define("WATERMARK_OVERLAY_IMAGE", "/develop/images/watermark.png"); // Percorso della filigrana define("WATERMARK_OUTPUT_QUALITY", 100); // La qualità dell'immagine ricevuta dalla filigrana. Ricorda che la qualità influisce direttamente sulla dimensione del file. define("UPLOADED_IMAGE_DESTINATION", "/sviluppo/cartella1/"); // Percorso alla posizione delle immagini iniziali caricate define("WATERMARK_IMAGE_DESTINATION", "/develop/folder2/"); // Percorso delle immagini con filigrana sovrapposta
Raccogliamo i file creati sopra nel file che esegue il download /upload.php
include("config.php"); include("funzioni.php"); $result = ImageUpload($_FILES["userfile"]["tmp_name"], $_FILES["userfile"]["name"]); if ($result === false)( echo "Caricamento fallito!"; )
Ad esempio, se l'immagine caricata era:
Quindi, dopo aver caricato e applicato una filigrana, ottieni la seguente immagine: 
IN questo esempio l'immagine caricata viene salvata in una cartella e l'immagine che è stata filigranata digitalmente in un'altra, in modo da avere sempre accesso alle immagini originali, ma, naturalmente, è necessario inserire le immagini dal CEH sul sito.
(178,4 KiB, 989 hit)
Una delle cose interessanti che puoi fare con la libreria grafica GD di PHP è una classe che filigrana un'immagine. In breve, la filigrana è una tecnologia per proteggere le immagini digitali dall'uso non autorizzato mediante filigrana o didascalie. Di conseguenza, può essere utilizzato (e principalmente lo è) per determinare il proprietario del copyright di un'immagine. Quindi andiamo avanti.
In questa fase del suo sviluppo, PHP offre ai programmatori un'ampia gamma di funzioni per generare dinamicamente e lavorare con le immagini. In questo articolo, ti mostrerò come creare una classe che filigrana queste stesse immagini. Questa classe lavorerà con due immagini: originale e filigrana. In aggiunta, è stato introdotto un terzo parametro: la nostra classe conterrà una variabile alfa. Questo ci consentirà di utilizzare un canale alfa per la nostra filigrana.
Per riferimento
canale alfa (canale alfa): parte dell'immagine che memorizza informazioni sulla trasparenza delle singole sezioni dell'immagine, mentre i canali di colore memorizzano informazioni sul colore dell'immagine. IN redattori grafici utilizzato per mascherare (proteggere dalla modifica) alcune aree dell'immagine. In alcune applicazioni, sono chiamate maschere trasparenti.
Le informazioni trovate nel canale alfa rappresentano più spesso i punti salienti, una forma o una disposizione delle aree colorate. Mantenere il canale alfa nell'immagine aumenta la dimensione del file di 1/3. Le immagini RGB possono avere fino a 24 canali alfa. Le bitmap e le immagini indicizzate non possono contenere canali alfa.
Prima di iniziare a scrivere la classe stessa, diamo un'occhiata alle funzioni che verranno utilizzate al suo interno. Ecco la loro lista:
# restituisce la larghezza e l'altezza dell'immagine imagesx() imagesy() # crea una nuova immagine true-color imagecreatetruecolor # restituisce un array associativo con le chiavi red, green e blue (+alpha channel) contenente i valori corrispondenti per il indice di colore specificato imagecolorsforindex() # restituisce l'indice di colore di un pixel in una posizione specificata in un'immagine imagecolorat() # disegna un singolo pixel del colore dato imagesetpixel() # restituisce l'indice dell'indice di colore della tavolozza dell'immagine, l'id del colore (composto da componenti RGB) e l'indice di colore della tavolozza dell'immagine che è "più vicino" al valore RGB rispettivamente (questi dati sono necessari per la funzione imagesetpixel()) imagecolorexact() imagecolorallocate() imagecolorclosest()
Come puoi vedere, php ha abbastanza funzioni per lavorare con la grafica. Sebbene lo scopo di alcuni di essi non sia del tutto chiaro in teoria, in pratica tutto è molto più semplice. Pertanto, per capire come lavorare con loro, li applicheremo nella nostra classe.
Ora che abbiamo già deciso l'obiettivo del nostro "mini-progetto", torniamo un po' indietro e parliamo dei modi per realizzarlo.
Innanzitutto, la nostra applicazione riceve due immagini: l'immagine originale e la filigrana stessa. Successivamente, dobbiamo determinare le dimensioni di queste immagini (larghezza-larghezza e altezza-altezza). Abbiamo bisogno di questi dati per posizionare la filigrana al centro dell'immagine (supponendo che la dimensione della filigrana sia inferiore all'immagine stessa).
Quindi dovremo sovrapporre la nostra filigrana all'immagine originale. Per fare questo, dobbiamo aggiungere i colori (matematicamente) delle immagini sovrapposte per ottenere la terza.
E alla fine, dovremo visualizzare l'immagine risultante nel browser. IN questo caso l'immagine si aprirà direttamente dalla fonte specificata nel tag " "
Penso che la teoria sia già sufficiente: i punti chiave in essa contenuti sono divulgati in modo sufficientemente dettagliato. Ora passiamo alla scrittura della sceneggiatura.
Iniziamo con il più semplice: scriviamo una classe che crei un file con una filigrana. Chiamiamolo "watermark" e scriviamo il suo codice nel file "api.watermark.php". Lo "scheletro" della classe saranno tre funzioni:
Il passo successivo è scrivere il codice per le funzioni della classe "watermark". Integriamo il file "api.watermark.php" con le seguenti righe di codice:
# una funzione che unisce due immagini sorgente in un'unica funzione create_watermark($main_img_obj, $watermark_img_obj, $alpha_level = 100) ( # converte il valore di trasparenza del canale alfa da % a decine $alpha_level/= 100; # calcola le dimensioni dell'immagine (larghezza e altezza ) $ main_img_obj_w = imagesx ($ main_img_obj); $ main_img_obj_h = immagini ($ main_img_obj); $ watermark_img_obj_w = imagesx ($ watermark_img_obj); $ watermark_img_hh = imagesy ($ watermark_obj) ($ main _img_obj_w /2)-($watermark_img_obj_w/2)); $main_img_obj_max_x=ceil(($main_img_obj_w/2)+($watermark_img_obj_w/2)); $main_img_obj_min_y=floor(($main_img_obj_h/2)-($watermark_img_obj_h/2 ) ); $main_img_obj_max_y=ceil(($main_img_obj_h/2)+($watermark_img_obj_h/2)); # crea una nuova immagine $return_img = imagecreatetruecolor($main_img_obj_w, $main_img_obj_h); # passa attraverso l'immagine originale # "un po' di codice " # visualizza l'immagine con filigrana return $return_img; ) # fine della funzione create_watermark()
Ora diamo un'occhiata più da vicino alla funzione create_watermark().
Prima di tutto, gli passiamo tre parametri:
# immagine sorgente da aggiungere alla filigrana $main_img_obj # la filigrana stessa deve contenere il canale alfa $watermark_img_obj # valore di trasparenza del canale alfa della filigrana, (0-100, default = 100) $alpha_level
(È importante notare che la nostra funzione accetta le immagini come oggetti, non solo come percorsi per esse, ma ne parleremo più avanti)
Il passaggio successivo consiste nel creare una nuova immagine a colori reali con le stesse dimensioni dell'immagine originale. Questa immagine (variabile $return_img) verrà utilizzata per combinare le informazioni dalle immagini originali (immagine e filigrana).
Ma prima, devi ancora "camminare" attraverso ciascuna delle due immagini originali e "unirle" in una sola. È semplicemente troppo presto per farlo, non siamo ancora pronti per questo. Invece, inseriremo un commento "alcuni codici", quindi aggiungeremo un pezzo di codice a quello spazio.
Il passaggio finale consiste nel visualizzare la nostra immagine modificata sulla pagina Web che la richiede. Successivamente, considera le restanti due funzioni ausiliarie.
Oltre alla funzione create_watermark, la nostra classe watermark ha altre due funzioni. Continuiamo fonte classe con le seguenti righe:
# media di due colori, tenendo conto della trasparenza della funzione canale alfa _get_ave_color($color_a, $color_b, $alpha_level) ( return round((($color_a*(1-$alpha_level))+($color_b*$alpha_level) )); ) # restituisce i valori delle componenti RGB più vicine della nuova funzione immagine _get_image_color($im, $r, $g, $b) ( $c=imagecolorexact($im, $r, $g, $ b); if ($c!=- 1) return $c; $c=imagecolorallocate($im, $r, $g, $b); if ($c!=-1) return $c; return imagecolorclosest( $im, $r, $g, $b); )
E ora in modo più dettagliato. La nostra prima funzione "_get_ave_color" prende i valori numerici di due colori e un canale alfa. Restituisce il loro valore medio. Abbiamo bisogno di questa funzione per determinare il colore che si otterrà quando si sovrappongono i pixel di due disegni.
La seconda funzione "_get_image_color" divide l'immagine in componenti rosso (rosso), verde (verde) e blu (blu) (tavolozza rgb). Con incorporato funzioni php per lavorare con la grafica (la loro descrizione era all'inizio dell'articolo), otteniamo il valore di colore più vicino per la nuova immagine.
Inoltre, vengono controllati alcuni altri punti. Innanzitutto, se è stato possibile ottenere il valore esatto (variabile $c), allora viene restituito dalla funzione (return $c). In caso contrario, viene effettuato un tentativo di corrispondenza del colore utilizzando la funzione imagecolorallocate(). Se ciò non aiuta a ottenere il risultato, utilizzando la funzione imagecolorclosest (), viene semplicemente restituito il valore del colore più vicino (il più impreciso).
Bene, la nostra classe è quasi pronta. Resta solo da sostituire il commento "qualche codice" nella funzione "create_watermark" con le seguenti righe:
# scorri l'immagine for($y = 0; $y< $main_img_obj_h; $y++) { for ($x = 0; $x < $main_img_obj_w; $x++) { $return_color = NULL; # определение истинного расположения пикселя в пределах # нашего водяного знака $watermark_x = $x - $main_img_obj_min_x; $watermark_y = $y - $main_img_obj_min_y; # выбор информации о цвете для наших изображений $main_rgb = imagecolorsforindex($main_img_obj, imagecolorat($main_img_obj, $x, $y)); # если наш пиксель водяного знака непрозрачный if ($watermark_x >= 0 && $filigrana_x< $watermark_img_obj_w && $watermark_y >= 0 && $filigrana_y< $watermark_img_obj_h) { $watermark_rbg = imagecolorsforindex($watermark_img_obj, imagecolorat($watermark_img_obj, $watermark_x, $watermark_y)); # использование значения прозрачности альфа-канала $watermark_alpha = round(((127-$watermark_rbg["alpha"])/127),2); $watermark_alpha = $watermark_alpha * $alpha_level; # расчет цвета в месте наложения картинок $avg_red = $this->_get_ave_color($main_rgb["rosso"], $watermark_rbg["rosso"], $watermark_alpha); $avg_green = $this->_get_ave_color($main_rgb["green"], $watermark_rbg["green"], $watermark_alpha); $avg_blue = $this->_get_ave_color($main_rgb["blue"], $watermark_rbg["blue"], $watermark_alpha); # utilizzando i dati ricevuti, calcola l'indice dei colori $return_color = $this->_get_image_color($return_img, $avg_red, $avg_green, $avg_blue); # se non puoi scegliere un colore, prendi # una copia del pixel originale ) else ( $return_color = imagecolorat($main_img_obj, $x, $y); ) # disegna una nuova immagine dai pixel ricevuti imagesetpixel( $ritorno_img, $x, $y, $ritorno_colore); ) )
Dopo aver scritto una parte così significativa del codice, puoi fermarti e soffermarti sulla sua analisi in modo più dettagliato.
Il nostro script prima attraversa l'immagine usando due cicli "for". Parallelamente vengono calcolate anche le coordinate di ogni pixel della filigrana.
Successivamente, le informazioni RGB vengono cercate per ciascun pixel. Se il pixel corrente non si trova nell'area in cui l'immagine originale e la filigrana si intersecano, la nostra classe duplica solo il pixel per la nuova immagine. Se il pixel si trova nell'area di intersezione, dobbiamo determinarne il colore come risultato della sovrapposizione dell'immagine originale e della filigrana.
Per determinare il colore dell'area di intersezione, dobbiamo prima ottenere il valore della variabile RGB della filigrana utilizzando le informazioni ottenute nei cicli "for". Quindi, utilizzando la funzione "_get_ave_color", viene determinato il valore medio del colore per la nuova immagine. Segue la funzione "_get_image_color" per determinare lo schema di colori che verrà utilizzato dalla funzione "return_img".
Di conseguenza, dopo il completamento dei cicli "for", abbiamo un'immagine finita con una filigrana.
E ora controlliamo la nostra classe in azione.
Per iniziare, abbiamo bisogno di due file. Chiamiamo il primo "watermark_test.php" e inseriamo il seguente codice:
Lo scopo di questo file è molto semplice: visualizza le immagini originali (main.jpg) e quelle risultanti (watermark.png, watermarked) nel browser.
Come puoi vedere, la nostra seconda immagine (watermark.png) si riferisce al file php image.php, non al file immagine. Questo collegamento sembra una richiesta GET, in cui i valori di due variabili vengono passati al file php: $main e $watermark.
Chiamiamo il secondo file "image.php" e inseriamo il seguente codice in esso:
create_watermark($main_img_obj, $watermark_img_obj, 66); # mostra l'immagine risultante nel browser - # ma prima fagli sapere che si tratta di un file jpeg header("Content-Type: image/jpeg"); header("Content-Disposition: inline; filename=" . $_GET["src"]); imagejpeg($return_img_obj, "", 50); ?>
Bene, arriviamo alla finale. (CAP, 47,6Kb)
