レンタルサーバーに置いている画像にウォーターマークを入れてみる【Javascript 編】

画像にウォーターマークを入れることができるか、まずはJavascriptを使ってやってみることにしました。細かくいうと「jquery」です。

↓こちらを参考にして、コーディングしてみました。

jQuery Watermark Plugin Examples

sample.html

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Watermark Plugin Examples</title>
</head>
<body>
<img class="watermark" src="img/sample1.png">
<img class="watermark" src="img/sample2.png">
<img class="watermark" src="img/sample3.png">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="dist/jquery.watermark.min.js" type="text/javascript"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>

script.js

//文字を入れる
$('.watermark').watermark({
text: 'TEST watermark',
textWidth: 200,
gravity: 'w',
opacity: 1,
margin: 12
});
//画像を入れる
$('.watermark2').watermark({
path: './sample_watermark.jpg',
margin: 0,
gravity: 'nw',
opacity: 0.5,
outputWidth: 400
});

自分が契約しているレンタルサーバーで試してみたところ、簡単にウォーターマークを入れることができました。

しかも、ソースコードを見た時も「<img src="?????????"」と勝手に文字化けの文字になってくれるので、これはとても便利です。

が、しかし!、これをはてなブログで使おうかなと思ったら、

画像が外部サーバーにあると、

...has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin....

なんたらかんたらと、こんな感じでセキュリティ的に読み込む時にエラーになってしまいました。

htacessなどで、許可してあげれば使えるようなのですが、はてなのサーバーにはファイルが置けませんし。

レンタルサーバーでWordPressを展開してて、画像もそのサーバーにあるという時は役立つかもしれません。

PHP編に続く・・・

返信を残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA