最近、プロジェクトで、画像にタイル状の透かしを追加する必要があるという要件に遭遇しました。
同様の効果
最初に思い浮かぶのは、この機能を完了するために 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
<canvas height=200 id=myCanvas width=200>お使いのブラウザはウォーターマークをサポートしていません。Google Chrome を使用して開いてください</canvas>
試してみましょう。エラーがあることを確認してください。
Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
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';
次に、完成品を見てみましょう
これで完了です。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。