vue background image and background solid color watermarked

1, background images

In main.js write

Vue.prototype.drawAndShareImage = async (width, height, url, text, callback) => {
  var canvas = document.createElement('canvas')
  canvas.width = width
  canvas.height = height
  var context = canvas.getContext('2d')

  context.rect(0, 0, canvas.width, canvas.height)

  var myImage = new Image()
  myImage.src = url.replace(/ /g, '').replace(/"/g, '')
  myImage.crossOrigin = 'Anonymous'

  myImage.onload = () => {
    context.drawImage(myImage, 0, 0, width, height)
    let text1 = ''
    for (let i = 0; i < 30; i++) {
      text1 += (' ' + text)
    }
    for (let i = 0; i < 2000; i++) {
      context.rotate ((- 45 * Math.PI) / 180) // watermark initial deflection angle
      = context.font 'Microsoft YaHei 20px' 
      context.fillStyle = 'RGBA (255,255,255,0.15)' 
      context.fillText (text1, -1000, I * 90) 
      context.rotate ((Math.PI * 45) / 180 [) // the watermark deflection angle adjustment to the original, or else he would have been transferred 
    } 
    // varbase64 = 
    // dom.style.backgroundImage = 'url (\' '+ Base64 +' \ ')' 
    callback (canvas.toDataURL ( 'Image / PNG ')) 
  } 
}

Calls in assembly

let img = document.getElementsByClassName('className')[0]
let style = img.currentStyle || window.getComputedStyle(img, false)
let bi = style.backgroundImage.replace('url(', '').replace(')', '')
this.drawAndShareImage(img.offsetWidth, img.offsetHeight, bi, '文字内容', (url) => {
  img.setAttribute('style', 'background:url("' + url + '")')
})

2, a solid color background watermark

= Vue.prototype.watchCanvs (width, height, text, className) => { 
  the let Canvas = document.createElement ( 'Canvas') 
  canvas.width = width 
  canvas.height = height 
  the let canvas.getContext context = ( '2D') 
  the let text1 = '' 
  for (the let I = 0; I <30; I ++) { 
    text1 + = ( '' + text) 
  } 
  for (the let I = 0; I <2000; I ++) { 
    context.rotate ((- 45 * Math.PI) / 180) // watermark initial deflection angle 
    context.font = '20px Microsoft YaHei' 
    context.fillStyle = 'RGBA (0,0,0,0.1)' 
    context.fillText (text1, -1000, I * 90) 
    context.rotate ((45 * Math.PI) / 180) // watermark deflection angle adjustment to the original, or else he would have been transferred 
  } 

  // base64 format images generated path 
  let curl = canvas.toDataURL('image/png')
  // insert the picture as a background pattern 
  classname.style.background = 
    '#FFFFFF URL (' + + curl ')' 
}

Calls in assembly

let div = document.getElementsByClassName('className')[0]
this.watchCanvs(div.offsetWidth, div.offsetHeight, '文字内容', div)