/**
 * 圖片添加水印
 * */

// 讀取圖像文件渲染到IMG標(biāo)簽
function URLToBase64(url) {
  return new Promise((resolve, reject) => {
    let image = new Image()
    image.setAttribute("crossOrigin", "Anonymous")
    image.src = url;
    image.onload = () => {
      let imageCanvas = imgToCanvas(image)
      let obj = {
        imageCanvas,
        image
      }
      return resolve(obj)
    }
  })
}

// 將IMG標(biāo)簽內(nèi)容繪制到CANVAS畫布
function imgToCanvas(img) {
  let canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  let ctx = canvas.getContext('2d')
  ctx.drawImage(img, 0, 0)
  return canvas
}

// canvas繪制水印內(nèi)容
function textCanvas(text, image) {
  return new Promise((resolve, reject) => {
    try {
      let canvas = document.createElement('canvas')
      canvas.width = parseInt(image.width / 3)
      canvas.height = parseInt(image.width / 4)
      let ctx = canvas.getContext('2d')
      ctx.fillStyle = 'rgba(255,255,255,0)';
      ctx.fillRect(0, 0, canvas.width, canvas.height)
      // 水印旋轉(zhuǎn)角度
      ctx.rotate(20 * Math.PI / 180) // 水印旋轉(zhuǎn)角度
      // 設(shè)置填充字號和字體，樣式
      ctx.font = '24px "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif'
      // 水印顏色
      ctx.fillStyle = 'rgba(102, 102, 102, 0.4)' // rgba(102, 102, 102, 0.4)
      // 水印水平對齊方式
      // ctx.textAlign = 'center'
      // 水印垂直對齊方式
      // ctx.textBaseline = 'Middle'
      text.forEach((item, index) => {
        item && ctx.fillText(item, canvas.width / 8, canvas.height / 4 + index * 16) // 水印在畫布的位置x，y軸
      })
      resolve(canvas)
    } catch (error) {
      reject(error)
    }
  })
}

// CANVAS畫布上繪制repeat水印并轉(zhuǎn)換為BLOB對象
function watermark(canvas, img) {
  let ctx = canvas.getContext('2d')
  // 創(chuàng)建CanvasPattern對象
  let pattern = ctx.createPattern(img, "repeat")
  // 將新創(chuàng)建的CanvasPattern對象賦值給fillStyle屬性
  ctx.fillStyle = pattern
  // 繪制圖案
  ctx.fillRect(0, 0, canvas.width, canvas.height)

  return canvas.toDataURL('image/png')
}

// 圖片添加水印完整接口
async function imgWatermark(text, imgUrl) {
  let { imageCanvas, image } = await URLToBase64(imgUrl)
  let textImage = await textCanvas(text, image)
  let newBase = await watermark(imageCanvas, textImage)
  return newBase
}

export default imgWatermark

imgWatermark(text, url).then(newImage => {
    console.log(newImage)
})