h5-colexiu/src/views/music/music-detail/imageFunction.ts

import imgList from './images/logoWatermark.png'
export const imgToCanvas = async (url: string) => {
  console.log('imgToCanvas', url)
  const img = document.createElement('img')
  img.setAttribute('crossOrigin', 'anonymous')
  img.src = url + `?${new Date().getTime()}`

  // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
  await new Promise(resolve => (img.onload = resolve))
  // 创建canvas DOM元素，并设置其宽高和图片一样

  const canvas = document.createElement('canvas')
  canvas.width = img.width
  canvas.height = img.height
  // 坐标(0,0) 表示从此处开始绘制，相当于偏移。
  const ctx = canvas.getContext('2d') as CanvasRenderingContext2D

  ctx.fillStyle = 'rgb(255, 255, 255)'
  ctx.fillStyle = '#fff'
  ctx.fillRect(0, 0, img.width, img.height)
  ctx.drawImage(img, 0, 0)
  return canvas
}

/* canvas添加水印

* @param {canvas对象} canvas

* @param {水印文字} text

*/

export const addWatermark = async (canvas, text) => {
  console.log('addWatermark')
  try {
    const ctx = canvas.getContext('2d')
    // ctx.fillStyle = '#fff'
    const img = document.createElement('img')
    img.setAttribute('crossOrigin', 'anonymous')
    img.src = imgList + `?${new Date().getTime()}`
    // 防止跨域引起的 Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.
    await new Promise(resolve => (img.onload = resolve))
    // 创建canvas DOM元素，并设置其宽高和图片一样
    const water = document.createElement('canvas')
    water.width = 600
    water.height = 500

    // 第一层
    const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
    waterCtx.clearRect(0, 0, water.width, water.height)
    // 小水印中文字偏转角度
    waterCtx.rotate((-30 * Math.PI) / 180)
    waterCtx.drawImage(img, 0, 300)
    const pat = ctx.createPattern(water, 'repeat')
    ctx.fillStyle = pat
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    return canvas
  } catch (e) {
    console.log(e)
  }
}

export const addMusicTitle = (canvas, info) => {
  canvas.getContext('2d')
  const water = document.createElement('canvas')

  // 小水印画布大小
  water.width = canvas.width
  water.height = canvas.height + 30
  const waterCtx = water.getContext('2d') as CanvasRenderingContext2D
  waterCtx.fillStyle = '#fff'
  waterCtx.fillRect(0, 0, canvas.width, canvas.height + 70)
  waterCtx.font = `40pt Calibri`
  waterCtx.fillStyle = '#000'
  waterCtx.textAlign = 'center'
  waterCtx.drawImage(canvas, 0, 70)
  waterCtx.fillText(info.title, canvas.width / 2, 120)
  return water
}

export const convasToImg = canvas => {
  return canvas.toDataURL('image/png')
}