首頁  >  文章  >  web前端  >  jquery圖片浮水印插件

jquery圖片浮水印插件

黄舟
黄舟原創
2017-01-19 14:56:462333瀏覽

簡短教學

Img2Blob.js是一款可以為圖片添加自訂浮水印的jquery插件。此jquery圖片浮水印插件可以將圖片轉換為blob對象,然後為其添加自訂浮水印效果。

使用方法

在頁面中引入jquery和img2blob.js檔案。

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

HTML結構

該自訂圖片浮水印插件的預設效果和浮水印效果的HTML結構分別如下:

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

初始化插件

在頁面DOM元素載入完畢之後,可以透過下面的方法來初始化該圖片外掛程式

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

Img2Blob.js圖片浮水印插件的github位址為:https://github.com/bachors/Img2Blob.js

以上就是jquery圖片浮水印插件的內容,更多相關內容請關注PHP中文網(www .php.cn)!


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn