import dataUtil from '../core/utils/data-util'; import eventUtil from '../core/utils/event-util'; import { determineDirection, calcImageOffset, calcImageScale, calcImageSize, calcPythagoreanTheorem, clipTouchMoveOfCalculate, imageTouchMoveOfCalcOffset } from './calculate'; const detail = true; // 模拟enum const IMAGE_TYPE = { base64: 'base64', url: 'url' }; Component({ externalClasses: ['l-class'], relations: { '../image-clipper-tools/index': { type: 'child' } }, options: { pureDataPattern: /^_/ }, /** * 组件的属性列表 */ properties: { // 组件显示隐藏 show: { type: Boolean, value: false }, // 组件层级 zIndex: { type: Number, value: 99 }, // 图片url imageUrl: { type: String }, // 生成的图片类型 type: { type: String, options: ['url', 'base64'], value: 'url' }, // 生成的图片质量 quality: { type: Number, value: 1 }, // 裁剪框宽度 width: { type: Number, value: 400 }, // 裁剪框高度 height: { type: Number, value: 400 }, // 裁剪框最小宽度 minWidth: { type: Number, value: 200 }, // 裁剪框最大宽度 maxWidth: { type: Number, value: 600 }, // 裁剪框最小高度 minHeight: { type: Number, value: 200 }, // 裁剪框最大高度 maxHeight: { type: Number, value: 600 }, // 是否锁定裁剪框宽度 lockWidth: { type: Boolean, value: false }, // 是否锁定裁剪框高度 lockHeight: { type: Boolean, value: false }, // 是否锁定裁剪框比例 lockRatio: { type: Boolean, value: true }, // 生成图片相对于裁剪框的比例 scaleRatio: { type: Number, value: 1 }, // 图片最小缩放比 minRatio: { type: Number, value: 0.5 }, // 图片最大缩放比 maxRatio: { type: Number, value: 2 }, // 是否禁止缩放 disableScale: { type: Number, value: false }, // 是否禁止旋转 disableRotate: { type: Number, value: false }, // 是否限制移动范围 limitMove: { type: Boolean, value: false }, // 是否显示选择图片按钮 checkImage: { type: Boolean, value: true }, checkImageIcon: { type: String, value: './images/photo.png' }, // 是否显示顺时针旋转按钮 rotateAlong: { type: Boolean, value: true }, rotateAlongIcon: { type: String, value: './images/rotate-along.png' }, // 是否显示逆时针旋转按钮 rotateInverse: { type: Boolean, value: true }, rotateInverseIcon: { type: String, value: './images/rotate-inverse.png' }, // 是否显示确定按钮 sure: { type: Boolean, value: true }, sureIcon: { type: String, value: './images/sure.png' }, // 是否显示关闭按钮 close: { type: Boolean, value: true }, closeIcon: { type: String, value: './images/close.png' }, // 旋转按钮每次旋转的角度 rotateAngle: { type: Number, value: 90 }, }, /** * 组件的初始数据 */ data: { CANVAS_WIDTH: 0, CANVAS_HEIGHT: 0, cutX: 0, // 裁剪框x轴起点，可用于裁剪框left区域宽度 cutY: 0, // 裁剪框y轴起点，可用于裁剪框top区域高度 clipWidth: 0, // 裁剪框宽度 clipHeight: 0, // 裁剪框高度 cutAnimation: false, //是否开启图片和裁剪框过渡 imageWidth: 0, // 图片宽度 imageHeight: 0, // 图片高度 imageTop: 0, // 图片上边距 imageLeft: 0, // 图片左边距 scale: 1, // 图片缩放比 angle: 0, // 图片旋转角度 _SYS_INFO: {}, _MOVE_THROTTLE: null, // 触摸移动节流setTimeout _MOVE_THROTTLE_FLAG: true, // 节流标识 _TIME_CUT_CENTER: null, // 自动居中节流函数 _flagCutTouch: false, // 是否开始拖动裁剪框 _flagEndTouch: false, // 是否结束拖动裁剪框 _CUT_START: {}, // 拖动裁剪框所需数据 _cutAnimationTime: null, _touchRelative: [{ x: 0, y: 0 }], // 手指或鼠标和图片中心的相对位置 _hypotenuseLength: 0, // 双指触摸时斜边长度 _ctx: null, // canvas上下文 }, /** * 组件监听器 */ observers: { // 监听图片url改变，获取图片信息 'imageUrl'(url) { if (!url) return; this.imageReset(); wx.showLoading({ title: '请稍候...', mask: true }); wx.getImageInfo({ src: url, success: res => { // 计算图片尺寸 this.imgComputeSize(res.width, res.height); if (this.properties.limitMove) { // 限制移动，不留空白处理 this.imgMarginDetectionScale(); eventUtil.emit(this, 'linimageready', res); } }, fail: () => { this.imgComputeSize(); if (this.properties.limitMove) { this.imgMarginDetectionScale(); } } }); }, 'clipWidth, clipHeight'(widthVal, heightVal) { let { minWidth, minHeight } = this.data; minWidth = minWidth / 2; minHeight = minHeight / 2; if (widthVal < minWidth) { dataUtil.setDiffData(this, { clipWidth: minWidth }); } if (heightVal < minHeight) { dataUtil.setDiffData(this, { clipHeight: minHeight }); } this.computeCutSize(); }, 'rotateAngle'(val) { dataUtil.setDiffData(this, { cutAnimation: true, angle: val }); }, 'angle'(val) { this.moveStop(); const { limitMove } = this.properties; if (limitMove && val % 90) { dataUtil.setDiffData(this, { angle: Math.round(val / 90) * 90 }); } this.imgMarginDetectionScale(); }, 'cutAnimation'(val) { // 开启过渡260毫秒之后自动关闭 clearTimeout(this.data._cutAnimationTime); if (val) { let _cutAnimationTime = setTimeout(() => { dataUtil.setDiffData(this, { cutAnimation: false }); }, 260); dataUtil.setDiffData(this, { _cutAnimationTime }); } }, 'limitMove'(val) { if (val) { if (this.data.angle % 90) { dataUtil.setDiffData(this, { angle: Math.round(this.data.angle / 90) * 90 }); } this.imgMarginDetectionScale(); } }, 'cutY, cutX'() { this.cutDetectionPosition(); }, 'width, height'(width, height) { if(width !== this.width) { dataUtil.setDiffData(this, {clipWidth: width / 2}); } if(height !== this.height) { dataUtil.setDiffData(this, {clipHeight: height / 2}); } } }, /** * 组件的方法列表 */ methods: { /** * 设置裁剪框的一些信息 */ setCutInfo() { const { width, height } = this.properties; const { _SYS_INFO } = this.data; // 本组件动态style默认单位为px，需将用户传入值/2 const clipWidth = width / 2; const clipHeight = height / 2; const cutY = (_SYS_INFO.windowHeight - clipHeight) / 2; const cutX = (_SYS_INFO.windowWidth - clipWidth) / 2; const imageLeft = _SYS_INFO.windowWidth / 2; const imageTop = _SYS_INFO.windowHeight / 2; const _ctx = wx.createCanvasContext('image-clipper', this); this.setData({ clipWidth, clipHeight, cutX, cutY, CANVAS_HEIGHT: clipHeight, CANVAS_WIDTH: clipWidth, _ctx, imageLeft, imageTop }); }, /** * 裁剪框居中 */ setCutCenter() { const { sysInfo, clipHeight, clipWidth, imageTop, imageLeft } = this.data; let sys = sysInfo || wx.getSystemInfoSync(); let cutY = (sys.windowHeight - clipHeight) * 0.5; let cutX = (sys.windowWidth - clipWidth) * 0.5; this.setData({ imageTop: imageTop - this.data.cutY + cutY, imageLeft: imageLeft - this.data.cutX + cutX, cutY, cutX }); }, /** * 开始拖动裁剪框 * 需在此处查找到是否拖动的裁剪框四角 */ clipTouchStart(event) { if (!this.properties.imageUrl) { wx.showToast({ title: '请选择图片', icon: 'none' }); return; } const currentX = event.touches[0].clientX; const currentY = event.touches[0].clientY; const { cutX, cutY, clipWidth, clipHeight } = this.data; const corner = determineDirection(cutX, cutY, clipWidth, clipHeight, currentX, currentY); this.moveDuring(); const _CUT_START = { width: clipWidth, height: clipHeight, x: currentX, y: currentY, cutY, cutX, corner }; this.setData({ _flagCutTouch: true, _flagEndTouch: true, _CUT_START }); }, /** * 拖动裁剪框 * 当拖动的裁剪框区域时处理数据 */ clipTouchMove(event) { if (!this.properties.imageUrl) { wx.showToast({ title: '请选择图片', icon: 'none' }); return; } // fix & optimize #1129 // 只针对单指点击做处理 if (event.touches.length !== 1) { return; } const { _flagCutTouch, _MOVE_THROTTLE_FLAG } = this.data; if (_flagCutTouch && _MOVE_THROTTLE_FLAG) { const { lockRatio, lockHeight, lockWidth } = this.properties; if (lockRatio && (lockWidth || lockHeight)) return; dataUtil.setDiffData(this, { _MOVE_THROTTLE_FLAG: false }); this.moveThrottle(); const clipData = clipTouchMoveOfCalculate(this.data, event); // fix #1129 // 原因：未做 clipTouchMoveOfCalculate 方法返回 undefined 值处理 if(clipData) { const { width, height, cutX, cutY } = clipData; if (!lockWidth && !lockHeight) { dataUtil.setDiffData(this, { clipWidth: width, clipHeight: height, cutX, cutY }); } else if (!lockWidth) { dataUtil.setDiffData(this, { clipWidth: width, cutX }); } else if (!lockHeight) { dataUtil.setDiffData(this, { clipHeight: height, cutY }); } this.imgMarginDetectionScale(); } } }, /** * 拖动裁剪框结束 * 当拖动的裁剪框区域时处理数据 */ clipTouchEnd() { this.moveStop(); this.setData({ _flagCutTouch: false }); }, /** * 清空之前的自动居中延迟函数 */ moveDuring() { clearTimeout(this.data._TIME_CUT_CENTER); }, /** * 停止移动时需要做的操作 * 清空之前的自动居中延迟函数并添加最新的 */ moveStop() { clearTimeout(this.data._TIME_CUT_CENTER); const _TIME_CUT_CENTER = setTimeout(() => { //动画启动 if (!this.data.cutAnimation) { dataUtil.setDiffData(this, { cutAnimation: true }); } this.setCutCenter(); }, 800); dataUtil.setDiffData(this, { _TIME_CUT_CENTER }); }, /** * 重置延迟函数 */ moveThrottle() { if (this.data._SYS_INFO.platform === 'android') { clearTimeout(this.data._MOVE_THROTTLE); const _MOVE_THROTTLE = setTimeout(() => { dataUtil.setDiffData(this, { _MOVE_THROTTLE_FLAG: true }); }, 800 / 40); dataUtil.setDiffData(this, { _MOVE_THROTTLE }); } else { dataUtil.setDiffData(this, { _MOVE_THROTTLE_FLAG: true }); } }, /** * 图片初始化 */ imageReset() { const sys = this.data._SYS_INFO || wx.getSystemInfoSync(); this.setData({ scale: 1, angle: 0, imageTop: sys.windowHeight / 2, imageLeft: sys.windowWidth / 2 }); }, /** * 图片加载完成 */ imageLoad() { this.imageReset(); wx.hideLoading(); eventUtil.emit(this, 'linimageload', detail); }, /** * 计算图片尺寸 */ imgComputeSize(width, height) { const { imageWidth, imageHeight } = calcImageSize(width, height, this.data); this.setData({ imageWidth, imageHeight }); }, /** * 图片边缘检测-缩放 */ imgMarginDetectionScale(scale) { if (!this.properties.limitMove) return; const currentScale = calcImageScale(this.data, scale); this.imgMarginDetectionPosition(currentScale); }, /** * 图片边缘检测-位置 */ imgMarginDetectionPosition(scale) { if (!this.properties.limitMove) return; const { scale: currentScale, left, top } = calcImageOffset(this.data, scale); dataUtil.setDiffData(this, { imageLeft: left, imageTop: top, scale: currentScale }); }, /** * 开始图片触摸 */ imageTouchStart(e) { this.setData({ _flagEndTouch: false }); const { imageLeft, imageTop } = this.data; // 双指左指坐标 const clientXForLeft = e.touches[0].clientX; const clientYForLeft = e.touches[0].clientY; let _touchRelative = []; if (e.touches.length === 1) { // 单指拖动 _touchRelative[0] = { x: clientXForLeft - imageLeft, y: clientYForLeft - imageTop }; this.setData({ _touchRelative }); } else { // 双指右指坐标 const clientXForRight = e.touches[1].clientX; const clientYForRight = e.touches[1].clientY; // 双指放大 let width = Math.abs(clientXForLeft - clientXForRight); let height = Math.abs(clientYForLeft - clientYForRight); // 勾股定理求出斜边长度 const _hypotenuseLength = calcPythagoreanTheorem(width, height); _touchRelative = [{ x: clientXForLeft - imageLeft, y: clientYForLeft - imageTop }, { x: clientXForRight - imageLeft, y: clientYForRight - imageTop } ]; this.setData({_touchRelative, _hypotenuseLength}); } }, /** * 图片放大旋转等操作 */ imageTouchMove(e) { const { _flagEndTouch, _MOVE_THROTTLE_FLAG } = this.data; if (_flagEndTouch || !_MOVE_THROTTLE_FLAG) return; // 双指左指坐标 const clientXForLeft = e.touches[0].clientX; const clientYForLeft = e.touches[0].clientY; dataUtil.setDiffData(this, { _MOVE_THROTTLE_FLAG: false }); this.moveThrottle(); this.moveDuring(); if (e.touches.length === 1) { //单指拖动 const { left, top } = imageTouchMoveOfCalcOffset(this.data, clientXForLeft, clientYForLeft); dataUtil.setDiffData(this, { imageLeft: left, imageTop: top}); // 图像边缘检测,防止截取到空白 this.imgMarginDetectionPosition(); } else { // 双指右指坐标 const clientXForRight = e.touches[1].clientX; const clientYForRight = e.touches[1].clientY; // 双指放大 let width = Math.abs(clientXForLeft - clientXForRight), height = Math.abs(clientYForLeft - clientYForRight), // 勾股定理求出斜边长度 hypotenuse = calcPythagoreanTheorem(width, height), // 斜边 scale = this.data.scale * (hypotenuse / this.data._hypotenuseLength); // 计算出真实缩放倍率 // 如果禁止缩放则倍率一直为1 if (this.properties.disableScale) { scale = 1; } else { scale = scale <= this.properties.minRatio ? this.properties.minRatio : scale; scale = scale >= this.properties.maxRatio ? this.properties.maxRatio : scale; eventUtil.emit(this, 'linsizechange', { imageWidth: this.data.imageWidth * scale, imageHeight: this.data.imageHeight * scale }); } this.imgMarginDetectionScale(scale); dataUtil.setDiffData(this, { _hypotenuseLength: Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)), scale }); } }, /** * 图片手指触摸结束 */ imageTouchEnd() { dataUtil.setDiffData(this, { _flagEndTouch: true }); this.moveStop(); }, /** * 检测剪裁框位置是否在允许的范围内(屏幕内) */ cutDetectionPosition() { const { cutX, cutY, _SYS_INFO, clipHeight, clipWidth } = this.data; let cutDetectionPositionTop = () => { //检测上边距是否在范围内 if (cutY < 0) { dataUtil.setDiffData(this, { cutY: 0 }); } if (cutY > _SYS_INFO.windowHeight - clipHeight) { dataUtil.setDiffData(this, { cutY: _SYS_INFO.windowHeight - clipHeight }); } }, cutDetectionPositionLeft = () => { //检测左边距是否在范围内 if (cutX < 0) { dataUtil.setDiffData(this, { cutX: 0 }); } if (cutX > _SYS_INFO.windowWidth - clipWidth) { dataUtil.setDiffData(this, { cutX: _SYS_INFO.windowWidth - clipWidth }); } }; //裁剪框坐标处理（如果只写一个参数则另一个默认为0，都不写默认居中） if (cutY === null && cutX === null) { let newCutY = (_SYS_INFO.windowHeight - clipHeight) * 0.5; let newCutX = (_SYS_INFO.windowWidth - clipWidth) * 0.5; dataUtil.setDiffData(this, { cutX: newCutX, // 截取的框上边距 cutY: newCutY // 截取的框左边距 }); } else if (cutY !== null && cutX !== null) { cutDetectionPositionTop(); cutDetectionPositionLeft(); } else if (cutY !== null && cutX === null) { cutDetectionPositionTop(); dataUtil.setDiffData(this, { cutX: (_SYS_INFO.windowWidth - clipWidth) / 2 }); } else if (cutY === null && cutX !== null) { cutDetectionPositionLeft(); dataUtil.setDiffData(this, { cutY: (_SYS_INFO.windowHeight - clipHeight) / 2 }); } }, /** * 改变截取框大小 */ computeCutSize() { const { clipHeight, clipWidth, _SYS_INFO, cutX, cutY } = this.data; if (clipWidth > _SYS_INFO.windowWidth) { // 设置裁剪框宽度 dataUtil.setDiffData(this, { clipWidth: _SYS_INFO.windowWidth }); } else if (clipWidth + cutX > _SYS_INFO.windowWidth) { dataUtil.setDiffData(this, { cutX: _SYS_INFO.windowWidth - cutX }); } if (clipHeight > _SYS_INFO.windowHeight) { // 设置裁剪框高度 dataUtil.setDiffData(this, { clipHeight: _SYS_INFO.windowHeight }); } else if (clipHeight + cutY > _SYS_INFO.windowHeight) { dataUtil.setDiffData(this, { cutY: _SYS_INFO.windowHeight - cutY }); } }, /** * 获取图片数据 */ getImageData() { if (!this.properties.imageUrl) { wx.showToast({ title: '请选择图片', icon: 'none' }); return; } wx.showLoading({ title: '加载中' }); const { clipHeight, clipWidth, _ctx, scale, imageLeft, imageTop, cutX, cutY, angle } = this.data; let { CANVAS_HEIGHT, CANVAS_WIDTH } = this.data; const { scaleRatio, imageUrl, quality, type: imageType } = this.properties; // 绘制函数 const draw = () => { // 图片真实大小 const imageWidth = this.data.imageWidth * scale * scaleRatio; const imageHeight = this.data.imageHeight * scale * scaleRatio; // canvas和图片的相对距离 const xpos = imageLeft - cutX; const ypos = imageTop - cutY; // 旋转画布 _ctx.translate(xpos * scaleRatio, ypos * scaleRatio); _ctx.rotate((angle * Math.PI) / 180); _ctx.drawImage(imageUrl, -imageWidth / 2, -imageHeight / 2, imageWidth, imageHeight); _ctx.draw(false, () => { let params = { width: clipWidth * scaleRatio, height: Math.round(clipHeight * scaleRatio), destWidth: clipWidth * scaleRatio, destHeight: Math.round(clipHeight) * scaleRatio, fileType: 'png', quality }; let data = { url: '', base64: '', width: clipWidth * scaleRatio, height: clipHeight * scaleRatio }; if (IMAGE_TYPE.base64 === imageType) { wx.canvasGetImageData({ canvasId: 'image-clipper', x: 0, y: 0, width: clipWidth * scaleRatio, height: Math.round(clipHeight * scaleRatio), success: res => { const arrayBuffer = new Uint8Array(res.data); const base64 = wx.arrayBufferToBase64(arrayBuffer); data.url = base64; data.base64 = base64; wx.hideLoading(); eventUtil.emit(this, 'linclip', data); } }); } else { wx.canvasToTempFilePath({ ...params, canvasId: 'image-clipper', success: res => { data.url = res.tempFilePath; data.base64 = res.tempFilePath; wx.hideLoading(); eventUtil.emit(this, 'linclip', data); }, fail(res) { throw res; } }, this ); } }); }; if (CANVAS_WIDTH !== clipWidth || CANVAS_HEIGHT !== clipHeight) { CANVAS_WIDTH = clipWidth; CANVAS_HEIGHT = clipHeight; _ctx.draw(); setTimeout(() => { draw(); }, 100); } else { draw(); } }, /** * 上传图片 */ uploadImage() { wx.chooseImage({ count: 1, sizeType: ['original', 'compressed'], sourceType: ['album', 'camera'], success: (res) => { const tempFilePaths = res.tempFilePaths; this.setData({ imageUrl: tempFilePaths }); } }); }, /** * 工具栏旋转 */ rotate(event) { if (this.properties.disableRotate) return; if (!this.properties.imageUrl) { wx.showToast({ title: '请选择图片', icon: 'none' }); return; } const { rotateAngle } = this.properties; const originAngle = this.data.angle; const type = event.currentTarget.dataset.type; if (type === 'along') { this.setData({ angle: originAngle + rotateAngle }); } else { this.setData({ angle: originAngle - rotateAngle}); } eventUtil.emit(this, 'linrotate', { currentDeg: this.data.angle }); }, /** * 关闭 */ close() { this.setData({ show: false }); }, /** * 空方法，占位用 */ doNothing() {} }, /** * 组件的生命周期 */ lifetimes: { ready() { const _SYS_INFO = wx.getSystemInfoSync(); this.setData({ _SYS_INFO }); this.setCutInfo(); this.setCutCenter(); this.computeCutSize(); this.cutDetectionPosition(); } } });