簡短教學
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: '@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 }); });
Img2Blob.js圖片浮水印插件的github位址為:https://github.com/bachors/Img2Blob.js
以上就是jquery圖片浮水印插件的內容,更多相關內容請關注PHP中文網(www .php.cn)!