ホームページ > 記事 > ウェブフロントエンド > jquery画像透かしプラグイン
簡単なチュートリアル
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 中国語 Web サイト (www .php.cn) に注目してください。