ホームページ  >  記事  >  ウェブフロントエンド  >  jquery画像透かしプラグイン

jquery画像透かしプラグイン

黄舟
黄舟オリジナル
2017-01-19 14:56:462303ブラウズ

簡単なチュートリアル

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 中国語 Web サイト (www .php.cn) に注目してください。


声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。