// 获取到文档的距离 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') }