jquery Bild-Wasserzeichen-Plug-in

Kurzes Tutorial

Img2Blob.js ist ein JQuery-Plug-in, das benutzerdefinierte Wasserzeichen zu Bildern hinzufügen kann. Dieses JQuery-Bildwasserzeichen-Plug-in kann Bilder in Blob-Objekte konvertieren und ihnen dann benutzerdefinierte Wasserzeicheneffekte hinzufügen.

Verwendungsmethode

Fügen Sie jquery- und img2blob.js-Dateien in die Seite ein.

<script src="path/to/jquery.min.js"></script>
<script src="path/to/img2blob.js"></script>

HTML-Struktur

Der Standardeffekt des benutzerdefinierten Bildwasserzeichen-Plug-ins und die HTML-Struktur des Wasserzeicheneffekts sind wie folgt:

<h3>默认图片</h3>
<img class="sample1" data-img2blob="img/1.png" />
<img class="sample1" data-img2blob="img/2.jpg" />
 
<hr>
 
<h3>添加水印之后的图片</h3>
<img class="sample2" data-img2blob="img/1.png" />
<img class="sample2" data-img2blob="img/2.jpg" />

Initialisierung Plug-in

Nachdem das Seiten-DOM-Element geladen wurde, können Sie das Bildwasserzeichen-Plugin mit der folgenden Methode initialisieren

$(function() {
 
    // default
    $(".sample1").img2blob();
     
    // with watermark
    $(".sample2").img2blob({
        watermark: '@bachors',
        fontStyle: 'Arial',
        fontSize: '30', // px
        fontColor: '#333', // default 'black'
        fontX: 50, // The x coordinate where to start painting the text
        fontY: 50 // The y coordinate where to start painting the text
    });
 
});

Die Github-Adresse des Bildwasserzeichen-Plugins Img2Blob.js -in ist: https://github.com/bachors /Img2Blob.js

Das Obige ist der Inhalt des jquery-Bildwasserzeichen-Plugins. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!