Pickupニュース

Watermark
jQueryプラグイン

Watermark

画像にウォーターマークやテキストを合成するjQueryプラグイン
指定した画像に、ロゴマーク等のウォーターマークや、任意のテキストを合成して入れ替えるjQueryプラグインです。

Watermarkのリンク

リンク先のDownload.zipをクリックして、ファイルをダウンロードします。

Webサイト

Watermarkの準備

Watermarkという名前のフォルダを新規作成し、そこにダウンロード・解凍後の baivong-watermark-******dist フォルダの中からjquery.watermark.js(またはjquery.watermark.min.js)を移動します。

HTMLマークアップ

サーバーにWatermarkフォルダをアップロードし、<head>タグ内にjquery.watermark.js(またはjquery.watermark.min.js)とjQueryまでのスクリプトパスへリンクする記述を追加します。
HTMLCopy
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="path/Watermark/jquery.jquery.watermark.js"></script>

基本的な使い方

Watermarkは指定した画像要素に対して実行します。

ウォーターマークを合成

予め用意しておいたウォーターマーク用の画像パスを指定して、合成します。

HTMLマークアップ

HTMLCopy
<img src="../images/photo01-s.jpg" class="watermark">

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.watermark').watermark({ path: 'path/watermark.png', opacity: 1 });

デモ


        <img src="../images/photo01-s.jpg" class="watermark">
    

        $(function () {
            $('.watermark').watermark({
                path: 'watermark.png',
                opacity: 1
            });
        });
    

テキストを合成

任意のテキストを入力して、合成します。日本語でも大丈夫です。

JavaScriptの記述

JavaScriptに以下のような記述を追加します。
JavaScriptCopy
$('.watermark').watermark({ text: 'Web技術指南書', textWidth: 360, textSize: 26, gravity: 'n', margin: 0, textBg: 'rgba(0, 0, 0, 0.75)' });

デモ


        <img src="../images/photo01-s.jpg" class="watermark">
    

        $(function () {
            $('.watermark').watermark({
                text: 'Web技術指南書',
                textWidth: 200,
                textSize: 26,
                gravity: 'n',
                margin: 0,
                textBg: 'rgba(0, 0, 0, 0.75)'
            });
        });
    

基本オプション

プロパティ 内容 初期値 パラメータ
path ウォーターマークまでの画像パス ‘watermark.png’ 画像パス
text ウォーターマークとして使用するテキスト 文字列
textWidth テキストの表示幅(ピクセル単位) ※1 130 数値
textSize テキストの文字サイズ(ピクセル単位) ※1 12 数値
textColor テキストの文字色 ‘white’ Hexコード / RGBAコード
textBg テキストの背景色 ‘rgba(0, 0, 0, 0.4)’ Hexコード / RGBAコード
gravity ウォーターマークの位置 ※2 ‘se’ nw / n / ne / w / e / sw / s / se
opacity ウォーターマークの透明度 0.7 数値
margin ウォーターマークの端からの距離 10 数値
※1 テキストの幅や文字サイズは、オリジナルの画像サイズに対してのものです。
※2 ウォーターマークの位置は以下をご参照下さい。

ウォーターマークの位置

左上


        <img src="../images/photo01-s.jpg" class="watermark">
    

        $(function () {
            $('.watermark').watermark({
                path: 'watermark.png',
                opacity: 1,
                gravity: 'nw'
            });
        });
    

中央上


        <img src="../images/photo01-s.jpg" class="watermark">
    

        $(function () {
            $('.watermark').watermark({
                path: 'watermark.png',
                opacity: 1,
                gravity: 'n'
            });
        });
    

右上


        <img src="../images/photo01-s.jpg" class="watermark">
    

        $(function () {
            $('.watermark').watermark({
                path: 'watermark.png',
                opacity: 1,
                gravity: 'ne'
            });
        });
    

左側面


        <img src="../images/photo01-s.jpg" class="watermark">
    

        $(function () {
            $('.watermark').watermark({
                path: 'watermark.png',
                opacity: 1,
                gravity: 'w'
            });
        });
    

右側面


        <img src="../images/photo01-s.jpg" class="watermark">
    

        $(function () {
            $('.watermark').watermark({
                path: 'watermark.png',
                opacity: 1,
                gravity: 'e'
            });
        });
    

左下


        <img src="../images/photo01-s.jpg" class="watermark">
    

        $(function () {
            $('.watermark').watermark({
                path: 'watermark.png',
                opacity: 1,
                gravity: 'sw'
            });
        });
    

中央下


        <img src="../images/photo01-s.jpg" class="watermark">
    

        $(function () {
            $('.watermark').watermark({
                path: 'watermark.png',
                opacity: 1,
                gravity: 's'
            });
        });
    

右下


        <img src="../images/photo01-s.jpg" class="watermark">
    

        $(function () {
            $('.watermark').watermark({
                path: 'watermark.png',
                opacity: 1,
                gravity: 'se'
            });
        });
    

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください