手で触ってcanvasで画像に平らな透かしを追加することを教えます

最近のプロジェクトでは、画像に平らな透かしを付ける必要があります.
このような効果はまずcanvasでこの機能を完成させることを考えています.私はcanvasに触れたことがありませんから、この機能をするときは、一歩一歩模索して勉強します.過程はniceです.次は私と一緒にこの機能を実現し、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 = () => {
  //   canvas  
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  //        canvas 
  ctx.drawImage(img, 0, 0, 200, 200);
      //      canvas 
      for (let i = 0; i < 20; i++) {
      ctx.rotate((-45 * Math.PI) / 180); //         
      ctx.font = "20px microsoft yahei";
      ctx.fillStyle = "rgba(0,0,0,0.5)";
      ctx.fillText("mmmmmmmmmmmmmmmmmmmmmmm",-300,i * 25);
      ctx.rotate((45 * Math.PI) / 180); //              ，       
    }

html

          ，         

その時にやってみたら、間違いがあった.Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
Googleの後、これが画像のドメイン間問題によるものであることに気づきましたが、どうやって解決しますか?
newから出てきたimgに属性を追加すればいいだけ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';

次に完成品を見てみましょう
大功を成し遂げる.
もし私の文章があなたの問題を解決したら、手当たり次第にいいねを押してください.ありがとうございます.