3

jqueryを使用してクライアント側でアニメーションgifに透かし(テキストまたは画像)を追加することは可能ですか?

この場合、すべての処理はクライアント側です。

私はそれをjsfiddleで動作させることができません。しかし、それは非常に単純で、透かしがメイン画像に追加されます。

私が抱えている問題は、アニメーション gif で動作するためにこれが必要なことです。したがって、透かしは右下隅に表示されます。

マスター js コードは次のとおりです。http://www.patrick-wied.at/static/watermarkjs/jq/

ページ上のスクリプト:

var config = {
    "path": "watermark.png"
};
$(document).ready(function() {
    $(document).watermark(config);
});

私の唯一の問題は、通常は imagemagik gd や php などを使用してこれを処理できることですが、これはクライアント側で機能する必要があります。ですから、何か提案をお願いします。

4

1 に答える 1

4

元の画像ファイル自体を物理的に変更するために使用できるクライアント側の JavaScript はありません。ただし、canvas 要素を使用すると、画像データをいじることができます。

リンク先の watermark.js スクリプトは、キャンバス要素に画像を描画し、その上に透かし画像を書き込むことで機能します。のようなものを使用して、元の画像ソースをキャンバス データに置き換えると思いimg.src = canvas.toDataURL();ます。

アニメーション gif でこのようなことを行うには、もう少し作業が必要です。特に、生のバイナリとして gif を取得し、各フレームを解析して上記のようなことを行う必要があります。ブラウザがレンダリングしなくなったので、GIF を自分でアニメーション化する必要もあります。

この質問に投稿された回答は、開始するのに適した場所です。gif 形式自体も調べる必要があります。

以上のことから、透かしで画像を保護したい場合は、サーバー側で行う必要があります。JavaScript を無効にしたり、ソースを表示して元の画像の URL を取得したりするだけで、クライアント側で行われたすべての操作を無効にすることができます。watermark.js スクリプトも同様に脆弱です。これは興味深い演習であり、カジュアルな訪問者が画像を盗むのを思いとどまらせるかもしれないと思います. しかし、十分に決心した人なら誰でもこれを簡単に打ち負かすことができます.

于 2012-06-01T14:33:30.293 に答える