图片加水印

// 加水印--全屏覆盖

export function getImgUrl( { // 1

  url = '',

  content = '请勿外传',

  callback = null,

} = {} ) {

  // 创建所需要添加水印的img图片

  let textAlign = 'left'

  let font = "30px Microsoft Yahei"

  let fillStyle = 'rgba(171,39,37, 0.8)'

  const img = new Image();

  img.src = url;

  img.crossOrigin = "anonymous";

  return new Promise( ( resolve ) => {

    img.onload = function () {

      const canvas = document.createElement( 'canvas' );

      canvas.width = img.width; // 4

      canvas.height = img.height;

      const ctx = canvas.getContext( '2d' );

      let wmConfig = {

        font: 'microsoft yahei',

        textArray: [ content ],

        density: 2.5

      }

      let fontSize = 30;

      ctx.drawImage( img, 0, 0, img.width, img.height );

      ctx.textAlign = textAlign; // 5

      ctx.font = font;

      ctx.fillStyle = fillStyle;

      // ctx.fillText( content, 10, 20 );

      // //文字坐标

      let imgWidth = canvas.width;

      let imgHeight = canvas.height;

      const maxPx = Math.max( imgWidth, imgHeight );

      const stepPx = Math.floor( maxPx / wmConfig.density );

      let arrayX = [ 0 ]; //初始水印位置 canvas坐标 0 0 点

      while ( arrayX[ arrayX.length - 1 ] < maxPx / 2 ) {

        arrayX.push( arrayX[ arrayX.length - 1 ] + stepPx );

      }

      arrayX.push( ...arrayX.slice( 1, arrayX.length ).map( ( el ) => {

        return -el;

      } ) );

      for ( let i = 0; i < arrayX.length; i++ ) {

        for ( let j = 0; j < arrayX.length; j++ ) {

          ctx.save();

          ctx.translate( 300 / 2, 200 / 2 ); ///画布旋转原点 移到 图片中心

          ctx.rotate( -Math.PI / 5 );

          if ( wmConfig.textArray.length > 3 ) { //最多显示三行水印，也可以根据需要自定义

            wmConfig.textArray = wmConfig.textArray.slice( 0, 3 );

          }

          wmConfig.textArray.forEach( ( el, index ) => {

            let offsetY = fontSize * index + 2;

            ctx.fillText( el, arrayX[ i ], arrayX[ j ] + offsetY );

          } );

          ctx.restore();

        }

      }

      let base64Url = '';

      base64Url = canvas.toDataURL( "image/jpeg", 0.5 ); // 6

      resolve( base64Url )

    }

  } );

}