画像にタイル状の透かしを追加するためのhtml5キャンバス

var img = new Image();
// Because the business in my project is to add a watermark to Taobao images, so here's a Taobao product's main image
img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_! ! 155-0-lubanu.jpg_400x400.jpg';
img.onload = () => {
  // Prepare the canvas environment
  var canvas = document.getElementById("myCanvas");
  var ctx = canvas.getContext("2d");
  // Draw the image to the canvas first
  ctx.drawImage(img, 0, 0, 200, 200);
  // draw the watermark to the canvas
  for (let i = 0; i < 20; i++) {
 
  ctx.rotate((-45 * Math.PI) / 180); // initial watermark deflection angle
  ctx.font = "20px microsoft yahei";
  ctx.fillStyle = "rgba(0,0,0,0.5)";
  ctx.fillText("mmmmmmmmmmmmmmmmmmmmmmmmmmmm",-300,i * 25);
  ctx.rotate((45 * Math.PI) / 180); // adjust the watermark deflection angle to the original, otherwise he will keep turning
}

<canvas
  height="200"
  id="myCanvas"
  width="200"
>

var img = new Image();
// Since my business in the project is to add watermarks to Taobao images, here's the main image of a Taobao product
img.setAttribute("crossorigin", "crossorigin");// This code is to solve the cross-domain problem, if your image is your own, there is no cross-domain problem can be removed
img.src = 'https://gd4.alicdn.com/imgextra/i3/155/O1CN01XKkJqL1D11wYZbeI2_! !155-0-lubanu.jpg_400x400.jpg';