Kürzlich bin ich in einem Projekt auf eine Anforderung gestoßen, die das Hinzufügen eines gekachelten Wasserzeichens zu einem Bild erforderte.
Ähnlicher Effekt
Das erste, was mir in den Sinn kommt, ist, Canvas zu verwenden, um diese Funktion auszuführen. Wenn ich diese Funktion ausführe, lerne ich einfach Schritt für Schritt um diese Funktionen Schritt für Schritt umzusetzen und einige Fallstricke von Canvas zu entdecken.
Da diese Funktion einige Canvas-basierte APIs erfordert und keine grundsätzlichen Probleme mit sich bringt, werde ich den js-Code hier direkt einfügen.
var img = new Image();// Da es in meinem Projekt darum geht, Wasserzeichen zu Taobao-Bildern hinzuzufügen, ist hier ein Hauptbild der Taobao-Produkte img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';img.onload = () => { // Canvas-Umgebung vorbereiten var canvas = document. getElementById(myCanvas); var ctx = canvas.getContext(2d); // Zeichne zuerst das Bild auf die Leinwand ctx.drawImage(img, 0, 0, 200, 200); // Zeichne das Wasserzeichen auf die Leinwand for (let i = 0; i < 20; i++ ) { ctx.rotate((-45 * Math.PI) / 180); // Anfänglicher Ablenkungswinkel des Wasserzeichens ctx.font = 20px Microsoft yahei; ctx.fillStyle = rgba(0,0,0,0.5); ctx.fillText(mmmmmmmmmmmmmmmmmm,-300,i * 25); ctx.rotate((45 * Math.PI) / 180); Wasserzeichen Passen Sie den Ablenkwinkel an das Original an, sonst dreht es sich weiter}html
<canvas height=200 id=myCanvas width=200>
Ihr Browser unterstützt keine Wasserzeichen. Bitte verwenden Sie Google Chrome, um es zu öffnen.</canvas>
Versuchen wir es jetzt und stellen Sie fest, dass ein Fehler vorliegt.
Fehler beim Ausführen von „toDataURL“ für „HTMLCanvasElement“: Befleckte Leinwände können möglicherweise nicht exportiert werden.
Nachdem ich Google durchsucht hatte, stellte ich fest, dass dies durch ein domänenübergreifendes Bildproblem verursacht wurde. Wie kann ich es lösen?
Fügen Sie einfach ein Attribut zu unserem neuen Bild hinzu.
img.setAttribute(crossorigin, crossorigin);
Daher wird der Code des neuen IMG im js-Teil
var img = new Image();// Da das Geschäft in meinem Projekt darin besteht, Wasserzeichen zu Taobao-Bildern hinzuzufügen, ist hier ein Hauptbild der Taobao-Produkte img.setAttribute(crossorigin, crossorigin);// Dieser Code Es ist zu lösen das domänenübergreifende Problem Wenn Ihr Bild Ihr eigenes ist und kein domänenübergreifendes Problem vorliegt, können Sie img.src = entfernen 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';
Schauen wir uns als Nächstes unser fertiges Produkt an
ZusammenfassenDas Obige ist die vom Herausgeber eingeführte HTML5-Canvas-Implementierung zum Hinzufügen von gekachelten Wasserzeichen zu Bildern. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten.