tqApp-webView/utils/watermark.js

export function createWaterMark(blobUrl,watermarks,option = {fontSize: 100,fillStyle: 'rgba(255, 0, 0, 0.5)'}) {

  const {fontSize,fillStyle} = option
  return new Promise(((resolve, reject) => {
	  
		const img = new Image();
		img.onload = function () {
		    const canvas = document.createElement('canvas');
		    const ctx = canvas.getContext('2d');
		
		    // 设置canvas尺寸与图片一致
		    canvas.width = img.width;
		    canvas.height = img.height;
		
		    // 绘制图片到canvas
		    ctx.drawImage(img, 0, 0, img.width, img.height);
		
		    //水印大小和颜色
		    ctx.font = fontSize + 'px Arial';
		    ctx.fillStyle = fillStyle;
		
		    //水印起始位置，默认左下角
		    let x = 35
		    let y = 40
		    // 添加水印
		    for (let i = 0; i < watermarks.length; i++) {
		        y = watermarkHandle(ctx, watermarks[i], canvas.width, canvas.height, fontSize, x, y)
		    }
		    // 将带有水印的canvas转换为Blob对象
		    canvas.toBlob((blob) => {
		        if (blob) {
					let newBlobUrl = createObjectURL(blob)
		            resolve(newBlobUrl);
		        } else {
		            reject(new Error('Failed to create blob from canvas'));
		        }
		    }, 'image/png');
		};
		img.src = blobUrl;
    
	}));
}

 /**
     * 写入水印，默认左下角 水印过长，换行 (x,y)=(0,0) 就是左下角的位置
     *  @param {canvas画布对象} ctx
     *  @param {单个水印} watermark
     *  @param {图片的长宽} height
     *  @param {图片的长宽} width
     *  @param {水印字体大小} fontSize
     *  @param {水印位置，默认左下角} x
     *  @param {水印位置，默认左下角} y
     */
export function  watermarkHandle(ctx, watermark, width, height, fontSize, x, y) {
  //添加水印
  let lineHeight = fontSize + 15
  let line = '';
  const list = [];
  for (let i = 0; i < watermark.length; i++) {
      const testLine = line + watermark[i];
      const metrics = ctx.measureText(testLine);
      const testWidth = metrics.width;
      if (testWidth < width - fontSize && i < watermark.length - 1) {
          line = testLine;
      } else {
          list.push(line)
          line = watermark[i];
      }
  }
  const testLine = line + list[list.length - 1];
  const metrics = ctx.measureText(testLine);
  const testWidth = metrics.width;
  if (testWidth < width - fontSize) {
      list[list.length - 1] = list[list.length - 1] + line
  } else {
      list.push(line)
  }
  for (let i = list.length - 1; i >= 0; i--) {
      ctx.fillText(list[i], x, height - y);
      y += lineHeight;
  }
  //位置
  return y;
}


/**
* blob转url临时访问地址
* @param String blob 对象
*/

function createObjectURL(blob){
	return URL.createObjectURL(blob);
}