HTML5 キャンバスは画像にタイル状の透かしを追加する機能を実装します

最近、プロジェクトで、画像にタイル状の透かしを追加する必要があるという要件に遭遇しました。

同様の効果

最初に思い浮かぶのは、この機能を完了するために Canvas を使用することです。これまで Canvas を使用したことがなかったので、この機能を実行するときは、ステップバイステップで学習するだけです。この関数を段階的に実装し、キャンバスのいくつかの落とし穴を発見します。

この関数にはいくつかのキャンバスベースの API が必要であり、原則的な問題は含まれないため、ここに js コードを直接貼り付けます。

 var img = new Image();// 私のプロジェクトの仕事は淘宝網の写真に透かしを追加することなので、ここに淘宝網商品のメイン画像があります img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';img.onload = () => { // キャンバス環境を準備します var Canvas = document. getElementById(myCanvas); Canvas.getContext(2d); // 最初に画像をキャンバスに描画します ctx.drawImage(img, 0, 0, 200, 200); // 透かしをキャンバスに描画します for (let i = 0; i < 20; i++ ) { ctx.rotate((-45 * Math.PI) / 180); // ウォーターマークの初期偏角 ctx.font = 20px yahei; ctx.fillStyle = rgba(0,0,0,0.5); ctx.fillText(mmmmmmmmmmmmmmmmmmm,-300,i * 25); // を入れます。ウォーターマーク 偏向角を元の角度に調整します。そうしないと回転し続けます}

html

 <キャンバスの高さ=200 id=myCanvasの幅=200>

お使いのブラウザはウォーターマークをサポートしていません。Google Chrome を使用して開いてください。</canvas>

試してみましょう。エラーがあることを確認してください。

「HTMLCanvasElement」で「toDataURL」を実行できませんでした。汚染されたキャンバスはエクスポートできない可能性があります。

Google で検索したところ、これはクロスドメイン画像の問題が原因であることがわかりました。では、どうすれば解決できるでしょうか。

新しい画像に属性を追加するだけです。

img.setAttribute(crossorigin, crossorigin);

したがって、js部分のnew imgのコードは次のようになります。

 var img = new Image();// 私のプロジェクトの仕事は淘宝網の写真に透かしを追加することなので、ここに淘宝網製品のメイン画像があります img.setAttribute(crossorigin,crossorigin);// このコードは解決するためのものですクロスドメインの問題 画像が自分のもので、クロスドメインの問題がない場合は、img.src = を削除できます。 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_!!155-0-lubanu.jpg_400x400.jpg';

次に、完成品を見てみましょう

上記は、画像にタイル状の透かしを追加するためにエディターによって導入された HTML5 キャンバスの実装です。ご質問があれば、メッセージを残してください。エディターがすぐに返信します。