読者です 読者をやめる 読者になる 読者になる

レンタルサーバーに置いている画像にウォーターマークを入れてみる【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編に続く・・・