$(function() { $('SELECTOR').watermark({ // ここにオプション path: 'https://i.imgur.com/LcpZHu5.png', }); });
オプション名 | 型 | デフォルト | 設 定 値 | 備 考 | *1
path | String | 'Watermark-big-sample-moji.png' | 透かしとして使用される画像のURLで、base64画像も使用できます。
【画像サンプル】 wartermark-1-2095735.png wartermark-2-2095933.png wartermark-2-2095933-2.png wartermark-sample.png Watermark-big-sample-moji.png | *1 |
text | String | '' | 透かしとして使用される任意のテキスト。 | *1 |
textWidth | Number | 130 | フレームを囲むテキストの幅、単位: px。 | |
textSize | Number | 12 | テキストのフォント サイズ、単位: px。 | |
textColor | String | 'white' | テキストの色は、16進数またはRGBAカラーコードを使用できます。 | |
textBg | String | 'rgba(0, 0, 0, 0.4)' | 背景色は、16進数またはRGBAカラーコードを使用できます。 | |
gravity | String | 'se' ・透かしの表示位置 | 画像上の透かしの表示位置 (nw、n、ne、w、e、sw、s、se、c)。 nw:Northwest、n:North、ne:Northeast、 w:West、e:East、sw:Southwest、s:South、 se:Southeast、c:Central 【注】w および e の表示の向きに注意、また並びは縦並びになります。 | |
opacity | Number | 0.7 | 透かしの透明度、0 ~ 1 の値。 | |
margin | Number | 10 | 透かしから画像の端までの距離。 | |
outputWidth | Number | 'auto' | 透かしを追加した後の画像の幅、単位:pxまたは「auto」を使用します。 | |
outputHeight | Number | 'auto' | 透かしを追加した後の画像の高さ、単位:pxまたは「auto」を使用します。 | |
outputType | String | 'jpeg' | 透かしを追加した後の画像形式は、3つのタイプ(jpeg、png、webp)のいずれかを使用できます。 | *2 |
done | Function | function(imgURL){this.src=imgURL;} | 透かし付きのイメージが作成された後に呼び出されます。 | |
fail | Function | function(){} | イメージのエラーが発生した後に呼び出されます。 | |
always | Function | function(){} | 処理の終了時に呼び出されます (完了して失敗します)。 | |
注 記 |
*1. このtextパラメーターを使用すると、pathパラメーターは無効になります。 透かしは、textパラメータに入力したテキストから作成されます。 *2. このoutputTypeパラメータでは、webpフォーマットはChromeブラウザでのみ機能します。 他のブラウザでは、pngフォーマットを返します。画質はそれほど高くないため、 pngフォーマットの使用を避けるべきですが、出力画像サイズはかなり大きいです。 |