画像にウォーターマークを入れることができるか、まずはJavascriptを使ってやってみることにしました。細かくいうと「jquery」です。
↓こちらを参考にして、コーディングしてみました。
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編に続く・・・