Wie füge ich clientseitig mit JavaScript ein Wasserzeichen zu einem Bild hinzu?

Question

Ist es möglich, ein Wasserzeichen (Text oder Bild) zu einem animierten GIF hinzuzufügen, clientside mit jquery?

In diesem Fall erfolgt die gesamte Verarbeitung auf der Client-Seite.

Ich kann es nicht auf jsfiddle zum Laufen bringen. Aber es ist sehr einfach, das Wasserzeichen wird zum Hauptbild hinzugefügt.

Das Problem, das ich habe, ist, dass ich möchte, dass dies bei animierten GIFs funktioniert. Also wird das Wasserzeichen unten rechts angezeigt.

Der Master-JS-Code ist: http://www.patrick-wied.at/static/watermarkjs/jq/

Das Skript auf der Seite:

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

Mein einziges Problem ist, normalerweise könnten wir dies mit Imagemagik GD und PHP usw. verarbeiten, aber dies muss clientside funktionieren. Also irgendwelche Vorschläge bitte.

Answer 1

Es gibt keinen clientseitigen JavaScript-Code, den Sie verwenden können, um die ursprüngliche Bilddatei physisch zu verändern. Mit dem canvas-Element können Sie jedoch mit den Bilddaten spielen.

Das watermark.js-Skript, auf das Sie verlinken, funktioniert, indem es das Bild auf ein canvas-Element zeichnet und dann das Wasserzeichenbild darüber schreibt. Ich glaube, es ersetzt dann die ursprüngliche Bildquelle durch die canvas-Daten, indem es etwas wie img.src = canvas.toDataURL(); verwendet.

Um so etwas mit einem animierten GIF zu machen, müssen Sie etwas mehr Arbeit leisten. Insbesondere müssen Sie das GIF als Rohbinärdatei erhalten und jedes Frame analysieren und ähnlich wie oben vorgehen. Sie müssen auch das GIF selbst animieren, da der Browser es nicht mehr rendert, sondern Sie.

Die Antworten zu dieser Frage, die unter diesem Link gepostet wurden, sind ein guter Ausgangspunkt. Sie müssen auch das GIF-Format selbst untersuchen.

All dies gesagt, wenn Sie Ihr Bild mit einem Wasserzeichen schützen möchten, müssen Sie dies auf Serverseite tun. Alles, was auf der Clientseite gemacht wird, kann einfach durch Deaktivieren von JavaScript und/oder Anzeigen des Quellcodes, um die ursprüngliche Bild-URL zu erhalten, umgangen werden. Das watermark.js-Skript ist auch anfällig für dasselbe. Ich denke, es ist eine interessante Übung und könnte einen zufälligen Besucher davon abhalten, ein Bild zu kopieren. Jeder, der jedoch entschlossen genug ist, könnte dies leicht umgehen.