plug-in de filigrane d'image jquery

Bref tutoriel

Img2Blob.js est un plug-in jquery qui peut ajouter des filigranes personnalisés aux images. Ce plug-in de filigrane d'image jquery peut convertir des images en objets blob, puis leur ajouter des effets de filigrane personnalisés.

Méthode d'utilisation

Introduisez les fichiers jquery et img2blob.js dans la page.

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

Structure HTML

L'effet par défaut du plug-in de filigrane d'image personnalisé et la structure HTML de l'effet de filigrane sont les suivants :

<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" />

Initialiser le plug-in

Une fois l'élément DOM de la page chargé, vous pouvez initialiser le plug-in de filigrane d'image via la méthode suivante

$(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
    });
 
});

L'adresse github du filigrane d'image Img2Blob.js Le plug-in est : https://github.com/bachors /Img2Blob.js

Ce qui précède est le contenu du plug-in de filigrane d'image jquery. Pour plus de contenu connexe, veuillez faire attention au chinois PHP. site Web (www.php.cn) !