Newer
Older
xc-business-system / src / components / canvas / signCanvas / index.ts
// 获取到文档的距离
export function getToPageXY(e: MouseEvent | TouchEvent) {
  const touchE = e as TouchEvent
  const mouseE = e as MouseEvent
  if (touchE.changedTouches) {
    // 移动端
    return {
      x: touchE.changedTouches[0].pageX,
      y: touchE.changedTouches[0].pageY,
    }
  }
  else {
    return {
      x: mouseE.x || mouseE.pageX,
      y: mouseE.y || mouseE.pageY,
    }
  }
}

// 当前是否pc版本
export function IsPC() {
  const userAgentInfo = navigator.userAgent
  const Agents = [
    'Android',
    'iPhone',
    'SymbianOS',
    'Windows Phone',
    'iPad',
    'iPod',
  ]
  let flag = true
  for (let v = 0; v < Agents.length; v++) {
    if (userAgentInfo.indexOf(Agents[v]) > 0) {
      flag = false
      break
    }
  }
  return flag
}

/**
 * canvas 是否为空
 * @param canvas
 * @returns boolean
 */
export function isCanvasBlank(canvas: HTMLCanvasElement) {
  var blank = document.createElement('canvas') // 系统获取一个空canvas对象
  blank.width = canvas.width
  blank.height = canvas.height
  return canvas.toDataURL() === blank.toDataURL() // 比较值相等则为空
}

/**
 * 校验签名图片是不是太小
 * @param imgSrc
 * @param size
 * @returns
 */
export function validateImageSize(imgSrc: string, size = 10) {
  const img = new Image()
  img.src = imgSrc
  return new Promise((resolve, reject) => {
    img.onload = (e) => {
      const target = (e.target || e.srcElement) as any
      const width = target.width
      const height = target.height
      if (width < size && height < size) {
        reject(
          // new Error({
          //   description: '签字太小了'
          // })
          new Error('签字太小'),
        )
      }
      else {
        resolve(true)
      }
    }
  })
}

interface IcropCanvasParams {
  canvas: HTMLCanvasElement // 需要裁剪的canvas
  sx: number // 裁剪开始点的x
  sy: number // 裁剪开始点的y
  sw: number // 裁剪宽
  sh: number // 裁剪高
}
//
/**
 * 裁剪 canvas 的指定区域
 * @param param0
 * @returns
 */
export function cropCanvas({
  canvas, // 需要裁剪的canvas
  sx, // 裁剪开始点的x
  sy, // 裁剪开始点的y
  sw, // 裁剪宽
  sh, // 裁剪高
}: IcropCanvasParams) {
  if (!canvas) {
    return null
  }
  const newCanvas = document.createElement('canvas')
  const newCxt = newCanvas.getContext('2d')
  const gap = 4 // 签字留空隙
  newCanvas.width = sw + 2 * gap
  newCanvas.height = sh + 2 * gap
  const imgData = canvas
    .getContext('2d')!
    .getImageData(sx - gap, sy - gap, newCanvas.width, newCanvas.height)
  newCxt?.putImageData(imgData, 0, 0)
  return newCanvas
}

export function getSignImgPngSrc({
  canvas, // 需要裁剪的canvas
  sx, // 裁剪开始点的x
  sy, // 裁剪开始点的y
  sw, // 裁剪宽
  sh, // 裁剪高
}: IcropCanvasParams) {
  const newCanvas = cropCanvas({
    canvas, // 需要裁剪的canvas
    sx, // 裁剪开始点的x
    sy, // 裁剪开始点的y
    sw, // 裁剪宽
    sh, // 裁剪高
  })
  if (!newCanvas) {
    return null
  }
  // if (this.isMobile && this.height > this.width) {
  //   let canvas1 = document.createElement('canvas'), cxt1 = canvas1.getContext('2d');
  //   canvas1.width = canvas.height;
  //   canvas1.height = canvas.width;
  //   let xpos = canvas1.width / 2, ypos = canvas1.height / 2;
  //   cxt1.translate(xpos, ypos);
  //   cxt1.rotate(-90 * Math.PI / 180);
  //   cxt1.translate(-xpos, -ypos);
  //   cxt1.drawImage(canvas, xpos - canvas.width / 2, ypos - canvas.height / 2);
  //
  //   return this.isCanvasBlank(canvas1) ? null : canvas1.toDataURL('image/png');
  // }
  return isCanvasBlank(newCanvas) ? null : newCanvas.toDataURL('image/png')
}