image-cropper.js 47 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117
  1. Component({
  2. properties: {
  3. /**
  4. * 图片路径
  5. */
  6. 'imgSrc': {
  7. type: String
  8. },
  9. /**
  10. * 裁剪框高度
  11. */
  12. 'height': {
  13. type: Number,
  14. value: 200
  15. },
  16. /**
  17. * 裁剪框宽度
  18. */
  19. 'width': {
  20. type: Number,
  21. value: 200
  22. },
  23. /**
  24. * 裁剪框最小尺寸
  25. */
  26. 'min_width': {
  27. type: Number,
  28. value: 100
  29. },
  30. 'min_height': {
  31. type: Number,
  32. value: 100
  33. },
  34. /**
  35. * 裁剪框最大尺寸
  36. */
  37. 'max_width': {
  38. type: Number,
  39. value: 300
  40. },
  41. 'max_height': {
  42. type: Number,
  43. value: 300
  44. },
  45. /**
  46. * 裁剪框禁止拖动
  47. */
  48. 'disable_width': {
  49. type: Boolean,
  50. value: false
  51. },
  52. 'disable_height': {
  53. type: Boolean,
  54. value: false
  55. },
  56. /**
  57. * 锁定裁剪框比例
  58. */
  59. 'disable_ratio': {
  60. type: Boolean,
  61. value: false
  62. },
  63. /**
  64. * 生成的图片尺寸相对剪裁框的比例
  65. */
  66. 'export_scale': {
  67. type: Number,
  68. value: 3
  69. },
  70. /**
  71. * 生成的图片质量0-1
  72. */
  73. 'quality': {
  74. type: Number,
  75. value: 1
  76. },
  77. 'cut_top': {
  78. type: Number,
  79. value: null
  80. },
  81. 'cut_left': {
  82. type: Number,
  83. value: null
  84. },
  85. /**
  86. * canvas上边距(不设置默认不显示)
  87. */
  88. 'canvas_top': {
  89. type: Number,
  90. value: null
  91. },
  92. /**
  93. * canvas左边距(不设置默认不显示)
  94. */
  95. 'canvas_left': {
  96. type: Number,
  97. value: null
  98. },
  99. /**
  100. * 图片宽度
  101. */
  102. 'img_width': {
  103. type: null,
  104. value: null
  105. },
  106. /**
  107. * 图片高度
  108. */
  109. 'img_height': {
  110. type: null,
  111. value: null
  112. },
  113. /**
  114. * 图片缩放比
  115. */
  116. 'scale': {
  117. type: Number,
  118. value: 1
  119. },
  120. /**
  121. * 图片旋转角度
  122. */
  123. 'angle': {
  124. type: Number,
  125. value: 0
  126. },
  127. /**
  128. * 最小缩放比
  129. */
  130. 'min_scale': {
  131. type: Number,
  132. value: 0.5
  133. },
  134. /**
  135. * 最大缩放比
  136. */
  137. 'max_scale': {
  138. type: Number,
  139. value: 2
  140. },
  141. /**
  142. * 是否禁用旋转
  143. */
  144. 'disable_rotate': {
  145. type: Boolean,
  146. value: false
  147. },
  148. /**
  149. * 是否限制移动范围(剪裁框只能在图片内)
  150. */
  151. 'limit_move': {
  152. type: Boolean,
  153. value: false
  154. }
  155. },
  156. data: {
  157. el: 'image-cropper', //暂时无用
  158. info: wx.getSystemInfoSync(),
  159. MOVE_THROTTLE: null, //触摸移动节流settimeout
  160. MOVE_THROTTLE_FLAG: true, //节流标识
  161. INIT_IMGWIDTH: 0, //图片设置尺寸,此值不变(记录最初设定的尺寸)
  162. INIT_IMGHEIGHT: 0, //图片设置尺寸,此值不变(记录最初设定的尺寸)
  163. TIME_BG: null, //背景变暗延时函数
  164. TIME_CUT_CENTER: null,
  165. _touch_img_relative: [{
  166. x: 0,
  167. y: 0
  168. }], //鼠标和图片中心的相对位置
  169. _flag_cut_touch: false, //是否是拖动裁剪框
  170. _hypotenuse_length: 0, //双指触摸时斜边长度
  171. _flag_img_endtouch: false, //是否结束触摸
  172. _flag_bright: true, //背景是否亮
  173. _canvas_overflow: true, //canvas缩略图是否在屏幕外面
  174. _canvas_width: 200,
  175. _canvas_height: 200,
  176. origin_x: 0.5, //图片旋转中心
  177. origin_y: 0.5, //图片旋转中心
  178. _cut_animation: false, //是否开启图片和裁剪框过渡
  179. _img_top: wx.getSystemInfoSync().windowHeight / 2, //图片上边距
  180. _img_left: wx.getSystemInfoSync().windowWidth / 2, //图片左边距
  181. watch: {
  182. //监听截取框宽高变化
  183. width(value, that) {
  184. if (value < that.data.min_width) {
  185. that.setData({
  186. width: that.data.min_width
  187. });
  188. }
  189. that._computeCutSize();
  190. },
  191. height(value, that) {
  192. if (value < that.data.min_height) {
  193. that.setData({
  194. height: that.data.min_height
  195. });
  196. }
  197. that._computeCutSize();
  198. },
  199. angle(value, that) {
  200. //停止居中裁剪框,继续修改图片位置
  201. that._moveStop();
  202. if (that.data.limit_move) {
  203. if (that.data.angle % 90) {
  204. that.setData({
  205. angle: Math.round(that.data.angle / 90) * 90
  206. });
  207. return;
  208. }
  209. }
  210. },
  211. _cut_animation(value, that) {
  212. //开启过渡300毫秒之后自动关闭
  213. clearTimeout(that.data._cut_animation_time);
  214. if (value) {
  215. that.data._cut_animation_time = setTimeout(() => {
  216. that.setData({
  217. _cut_animation: false
  218. });
  219. }, 300)
  220. }
  221. },
  222. limit_move(value, that) {
  223. if (value) {
  224. if (that.data.angle % 90) {
  225. that.setData({
  226. angle: Math.round(that.data.angle / 90) * 90
  227. });
  228. }
  229. that._imgMarginDetectionScale();
  230. !that.data._canvas_overflow && that._draw();
  231. }
  232. },
  233. canvas_top(value, that) {
  234. that._canvasDetectionPosition();
  235. },
  236. canvas_left(value, that) {
  237. that._canvasDetectionPosition();
  238. },
  239. imgSrc(value, that) {
  240. that.pushImg();
  241. },
  242. cut_top(value, that) {
  243. that._cutDetectionPosition();
  244. if (that.data.limit_move) {
  245. !that.data._canvas_overflow && that._draw();
  246. }
  247. },
  248. cut_left(value, that) {
  249. that._cutDetectionPosition();
  250. if (that.data.limit_move) {
  251. !that.data._canvas_overflow && that._draw();
  252. }
  253. }
  254. }
  255. },
  256. attached() {
  257. this.data.info = wx.getSystemInfoSync();
  258. //启用数据监听
  259. this._watcher();
  260. this.data.INIT_IMGWIDTH = this.data.img_width;
  261. this.data.INIT_IMGHEIGHT = this.data.img_height;
  262. this.setData({
  263. _canvas_height: this.data.height,
  264. _canvas_width: this.data.width,
  265. });
  266. this._initCanvas();
  267. this.data.imgSrc && (this.data.imgSrc = this.data.imgSrc);
  268. //根据开发者设置的图片目标尺寸计算实际尺寸
  269. this._initImageSize();
  270. //设置裁剪框大小>设置图片尺寸>绘制canvas
  271. this._computeCutSize();
  272. //检查裁剪框是否在范围内
  273. this._cutDetectionPosition();
  274. //检查canvas是否在范围内
  275. this._canvasDetectionPosition();
  276. //初始化完成
  277. this.triggerEvent('load', {
  278. cropper: this
  279. });
  280. },
  281. methods: {
  282. /**
  283. * 上传图片
  284. */
  285. upload() {
  286. let that = this;
  287. wx.chooseImage({
  288. count: 1,
  289. sizeType: ['original', 'compressed'],
  290. sourceType: ['album', 'camera'],
  291. success(res) {
  292. const tempFilePaths = res.tempFilePaths[0];
  293. that.pushImg(tempFilePaths);
  294. wx.showLoading({
  295. title: '加载中...'
  296. })
  297. }
  298. })
  299. },
  300. /**
  301. * 返回图片信息
  302. */
  303. getImg(getCallback) {
  304. this._draw(() => {
  305. wx.canvasToTempFilePath({
  306. width: this.data.width * this.data.export_scale,
  307. height: Math.round(this.data.height * this.data.export_scale),
  308. destWidth: this.data.width * this.data.export_scale,
  309. destHeight: Math.round(this.data.height) * this.data.export_scale,
  310. fileType: 'png',
  311. quality: this.data.quality,
  312. canvasId: this.data.el,
  313. success: (res) => {
  314. getCallback({
  315. url: res.tempFilePath,
  316. width: this.data.width * this.data.export_scale,
  317. height: this.data.height * this.data.export_scale
  318. });
  319. }
  320. }, this)
  321. });
  322. },
  323. /**
  324. * 设置图片动画
  325. * {
  326. * x:10,//图片在原有基础上向下移动10px
  327. * y:10,//图片在原有基础上向右移动10px
  328. * angle:10,//图片在原有基础上旋转10deg
  329. * scale:0.5,//图片在原有基础上增加0.5倍
  330. * }
  331. */
  332. setTransform(transform) {
  333. if (!transform) return;
  334. if (!this.data.disable_rotate) {
  335. this.setData({
  336. angle: transform.angle ? this.data.angle + transform.angle : this.data.angle
  337. });
  338. }
  339. var scale = this.data.scale;
  340. if (transform.scale) {
  341. scale = this.data.scale + transform.scale;
  342. scale = scale <= this.data.min_scale ? this.data.min_scale : scale;
  343. scale = scale >= this.data.max_scale ? this.data.max_scale : scale;
  344. }
  345. this.data.scale = scale;
  346. let cutX = this.data.cut_left;
  347. let cutY = this.data.cut_top;
  348. if (transform.cutX) {
  349. this.setData({
  350. cut_left: cutX + transform.cutX
  351. });
  352. this.data.watch.cut_left(null, this);
  353. }
  354. if (transform.cutY) {
  355. this.setData({
  356. cut_top: cutY + transform.cutY
  357. });
  358. this.data.watch.cut_top(null, this);
  359. }
  360. this.data._img_top = transform.y ? this.data._img_top + transform.y : this.data._img_top;
  361. this.data._img_left = transform.x ? this.data._img_left + transform.x : this.data._img_left;
  362. //图像边缘检测,防止截取到空白
  363. this._imgMarginDetectionScale();
  364. //停止居中裁剪框,继续修改图片位置
  365. this._moveDuring();
  366. this.setData({
  367. scale: this.data.scale,
  368. _img_top: this.data._img_top,
  369. _img_left: this.data._img_left
  370. });
  371. !this.data._canvas_overflow && this._draw();
  372. //可以居中裁剪框了
  373. this._moveStop(); //结束操作
  374. },
  375. /**
  376. * 设置剪裁框位置
  377. */
  378. setCutXY(x, y) {
  379. this.setData({
  380. cut_top: y,
  381. cut_left: x
  382. });
  383. },
  384. /**
  385. * 设置剪裁框尺寸
  386. */
  387. setCutSize(w, h) {
  388. this.setData({
  389. width: w,
  390. height: h
  391. });
  392. this._computeCutSize();
  393. },
  394. /**
  395. * 设置剪裁框和图片居中
  396. */
  397. setCutCenter() {
  398. let cut_top = (this.data.info.windowHeight - this.data.height) * 0.5;
  399. let cut_left = (this.data.info.windowWidth - this.data.width) * 0.5;
  400. //顺序不能变
  401. this.setData({
  402. _img_top: this.data._img_top - this.data.cut_top + cut_top,
  403. cut_top: cut_top, //截取的框上边距
  404. _img_left: this.data._img_left - this.data.cut_left + cut_left,
  405. cut_left: cut_left, //截取的框左边距
  406. });
  407. },
  408. _setCutCenter() {
  409. let cut_top = (this.data.info.windowHeight - this.data.height) * 0.5;
  410. let cut_left = (this.data.info.windowWidth - this.data.width) * 0.5;
  411. this.setData({
  412. cut_top: cut_top, //截取的框上边距
  413. cut_left: cut_left, //截取的框左边距
  414. });
  415. },
  416. /**
  417. * 设置剪裁框宽度-即将废弃
  418. */
  419. setWidth(width) {
  420. this.setData({
  421. width: width
  422. });
  423. this._computeCutSize();
  424. },
  425. /**
  426. * 设置剪裁框高度-即将废弃
  427. */
  428. setHeight(height) {
  429. this.setData({
  430. height: height
  431. });
  432. this._computeCutSize();
  433. },
  434. /**
  435. * 是否锁定旋转
  436. */
  437. setDisableRotate(value) {
  438. this.data.disable_rotate = value;
  439. },
  440. /**
  441. * 是否限制移动
  442. */
  443. setLimitMove(value) {
  444. this.setData({
  445. _cut_animation: true,
  446. limit_move: !!value
  447. });
  448. },
  449. /**
  450. * 初始化图片,包括位置、大小、旋转角度
  451. */
  452. imgReset() {
  453. this.setData({
  454. scale: 1,
  455. angle: 0,
  456. _img_top: wx.getSystemInfoSync().windowHeight / 2,
  457. _img_left: wx.getSystemInfoSync().windowWidth / 2,
  458. })
  459. },
  460. /**
  461. * 加载(更换)图片
  462. */
  463. pushImg(src) {
  464. if (src) {
  465. this.setData({
  466. imgSrc: src
  467. });
  468. //发现是手动赋值直接返回,交给watch处理
  469. return;
  470. }
  471. // getImageInfo接口传入 src: '' 会导致内存泄漏
  472. if (!this.data.imgSrc) return;
  473. wx.getImageInfo({
  474. src: this.data.imgSrc,
  475. success: (res) => {
  476. this.data.imageObject = res;
  477. //图片非本地路径需要换成本地路径
  478. if (this.data.imgSrc.search(/tmp/) == -1) {
  479. this.setData({
  480. imgSrc: res.path
  481. });
  482. }
  483. //计算最后图片尺寸
  484. this._imgComputeSize();
  485. if (this.data.limit_move) {
  486. //限制移动,不留空白处理
  487. this._imgMarginDetectionScale();
  488. }
  489. this._draw();
  490. },
  491. fail: (err) => {
  492. this.setData({
  493. imgSrc: ''
  494. });
  495. }
  496. });
  497. },
  498. imageLoad(e) {
  499. setTimeout(() => {
  500. this.triggerEvent('imageload', this.data.imageObject);
  501. })
  502. },
  503. /**
  504. * 设置图片放大缩小
  505. */
  506. setScale(scale) {
  507. if (!scale) return;
  508. this.setData({
  509. scale: scale
  510. });
  511. !this.data._canvas_overflow && this._draw();
  512. },
  513. /**
  514. * 设置图片旋转角度
  515. */
  516. setAngle(angle) {
  517. if (!angle) return;
  518. this.setData({
  519. _cut_animation: true,
  520. angle: angle
  521. });
  522. this._imgMarginDetectionScale();
  523. !this.data._canvas_overflow && this._draw();
  524. },
  525. _initCanvas() {
  526. //初始化canvas
  527. if (!this.data.ctx) {
  528. this.data.ctx = wx.createCanvasContext("image-cropper", this);
  529. }
  530. },
  531. /**
  532. * 根据开发者设置的图片目标尺寸计算实际尺寸
  533. */
  534. _initImageSize() {
  535. //处理宽高特殊单位 %>px
  536. if (this.data.INIT_IMGWIDTH && typeof this.data.INIT_IMGWIDTH == "string" && this.data.INIT_IMGWIDTH.indexOf("%") != -1) {
  537. let width = this.data.INIT_IMGWIDTH.replace("%", "");
  538. this.data.INIT_IMGWIDTH = this.data.img_width = this.data.info.windowWidth / 100 * width;
  539. }
  540. if (this.data.INIT_IMGHEIGHT && typeof this.data.INIT_IMGHEIGHT == "string" && this.data.INIT_IMGHEIGHT.indexOf("%") != -1) {
  541. let height = this.data.img_height.replace("%", "");
  542. this.data.INIT_IMGHEIGHT = this.data.img_height = this.data.info.windowHeight / 100 * height;
  543. }
  544. },
  545. /**
  546. * 检测剪裁框位置是否在允许的范围内(屏幕内)
  547. */
  548. _cutDetectionPosition() {
  549. let _cutDetectionPositionTop = () => {
  550. //检测上边距是否在范围内
  551. if (this.data.cut_top < 0) {
  552. this.setData({
  553. cut_top: 0
  554. });
  555. }
  556. if (this.data.cut_top > this.data.info.windowHeight - this.data.height) {
  557. this.setData({
  558. cut_top: this.data.info.windowHeight - this.data.height
  559. });
  560. }
  561. },
  562. _cutDetectionPositionLeft = () => {
  563. //检测左边距是否在范围内
  564. if (this.data.cut_left < 0) {
  565. this.setData({
  566. cut_left: 0
  567. });
  568. }
  569. if (this.data.cut_left > this.data.info.windowWidth - this.data.width) {
  570. this.setData({
  571. cut_left: this.data.info.windowWidth - this.data.width
  572. });
  573. }
  574. };
  575. //裁剪框坐标处理(如果只写一个参数则另一个默认为0,都不写默认居中)
  576. if (this.data.cut_top == null && this.data.cut_left == null) {
  577. this._setCutCenter();
  578. } else if (this.data.cut_top != null && this.data.cut_left != null) {
  579. _cutDetectionPositionTop();
  580. _cutDetectionPositionLeft();
  581. } else if (this.data.cut_top != null && this.data.cut_left == null) {
  582. _cutDetectionPositionTop();
  583. this.setData({
  584. cut_left: (this.data.info.windowWidth - this.data.width) / 2
  585. });
  586. } else if (this.data.cut_top == null && this.data.cut_left != null) {
  587. _cutDetectionPositionLeft();
  588. this.setData({
  589. cut_top: (this.data.info.windowHeight - this.data.height) / 2
  590. });
  591. }
  592. },
  593. /**
  594. * 检测canvas位置是否在允许的范围内(屏幕内)如果在屏幕外则不开启实时渲染
  595. * 如果只写一个参数则另一个默认为0,都不写默认超出屏幕外
  596. */
  597. _canvasDetectionPosition() {
  598. if (this.data.canvas_top == null && this.data.canvas_left == null) {
  599. this.data._canvas_overflow = false;
  600. this.setData({
  601. canvas_top: -5000,
  602. canvas_left: -5000
  603. });
  604. } else if (this.data.canvas_top != null && this.data.canvas_left != null) {
  605. if (this.data.canvas_top < -this.data.height || this.data.canvas_top > this.data.info.windowHeight) {
  606. this.data._canvas_overflow = true;
  607. } else {
  608. this.data._canvas_overflow = false;
  609. }
  610. } else if (this.data.canvas_top != null && this.data.canvas_left == null) {
  611. this.setData({
  612. canvas_left: 0
  613. });
  614. } else if (this.data.canvas_top == null && this.data.canvas_left != null) {
  615. this.setData({
  616. canvas_top: 0
  617. });
  618. if (this.data.canvas_left < -this.data.width || this.data.canvas_left > this.data.info.windowWidth) {
  619. this.data._canvas_overflow = true;
  620. } else {
  621. this.data._canvas_overflow = false;
  622. }
  623. }
  624. },
  625. /**
  626. * 图片边缘检测-位置
  627. */
  628. _imgMarginDetectionPosition(scale) {
  629. if (!this.data.limit_move) return;
  630. let left = this.data._img_left;
  631. let top = this.data._img_top;
  632. var scale = scale || this.data.scale;
  633. let img_width = this.data.img_width;
  634. let img_height = this.data.img_height;
  635. if (this.data.angle / 90 % 2) {
  636. img_width = this.data.img_height;
  637. img_height = this.data.img_width;
  638. }
  639. left = this.data.cut_left + img_width * scale / 2 >= left ? left : this.data.cut_left + img_width * scale / 2;
  640. left = this.data.cut_left + this.data.width - img_width * scale / 2 <= left ? left : this.data.cut_left + this.data.width - img_width * scale / 2;
  641. top = this.data.cut_top + img_height * scale / 2 >= top ? top : this.data.cut_top + img_height * scale / 2;
  642. top = this.data.cut_top + this.data.height - img_height * scale / 2 <= top ? top : this.data.cut_top + this.data.height - img_height * scale / 2;
  643. this.setData({
  644. _img_left: left,
  645. _img_top: top,
  646. scale: scale
  647. })
  648. },
  649. /**
  650. * 图片边缘检测-缩放
  651. */
  652. _imgMarginDetectionScale() {
  653. if (!this.data.limit_move) return;
  654. let scale = this.data.scale;
  655. let img_width = this.data.img_width;
  656. let img_height = this.data.img_height;
  657. if (this.data.angle / 90 % 2) {
  658. img_width = this.data.img_height;
  659. img_height = this.data.img_width;
  660. }
  661. if (img_width * scale < this.data.width) {
  662. scale = this.data.width / img_width;
  663. }
  664. if (img_height * scale < this.data.height) {
  665. scale = Math.max(scale, this.data.height / img_height);
  666. }
  667. this._imgMarginDetectionPosition(scale);
  668. },
  669. _setData(obj) {
  670. let data = {};
  671. for (var key in obj) {
  672. if (this.data[key] != obj[key]) {
  673. data[key] = obj[key];
  674. }
  675. }
  676. this.setData(data);
  677. return data;
  678. },
  679. /**
  680. * 计算图片尺寸
  681. */
  682. _imgComputeSize() {
  683. let img_width = this.data.img_width,
  684. img_height = this.data.img_height;
  685. if (!this.data.INIT_IMGHEIGHT && !this.data.INIT_IMGWIDTH) {
  686. //默认按图片最小边 = 对应裁剪框尺寸
  687. img_width = this.data.imageObject.width;
  688. img_height = this.data.imageObject.height;
  689. if (img_width / img_height > this.data.width / this.data.height) {
  690. img_height = this.data.height;
  691. img_width = this.data.imageObject.width / this.data.imageObject.height * img_height;
  692. } else {
  693. img_width = this.data.width;
  694. img_height = this.data.imageObject.height / this.data.imageObject.width * img_width;
  695. }
  696. } else if (this.data.INIT_IMGHEIGHT && !this.data.INIT_IMGWIDTH) {
  697. img_width = this.data.imageObject.width / this.data.imageObject.height * this.data.INIT_IMGHEIGHT;
  698. } else if (!this.data.INIT_IMGHEIGHT && this.data.INIT_IMGWIDTH) {
  699. img_height = this.data.imageObject.height / this.data.imageObject.width * this.data.INIT_IMGWIDTH;
  700. }
  701. this.setData({
  702. img_width: img_width,
  703. img_height: img_height
  704. });
  705. },
  706. //改变截取框大小
  707. _computeCutSize() {
  708. if (this.data.width > this.data.info.windowWidth) {
  709. this.setData({
  710. width: this.data.info.windowWidth,
  711. });
  712. } else if (this.data.width + this.data.cut_left > this.data.info.windowWidth) {
  713. this.setData({
  714. cut_left: this.data.info.windowWidth - this.data.cut_left,
  715. });
  716. };
  717. if (this.data.height > this.data.info.windowHeight) {
  718. this.setData({
  719. height: this.data.info.windowHeight,
  720. });
  721. } else if (this.data.height + this.data.cut_top > this.data.info.windowHeight) {
  722. this.setData({
  723. cut_top: this.data.info.windowHeight - this.data.cut_top,
  724. });
  725. }!this.data._canvas_overflow && this._draw();
  726. },
  727. //开始触摸
  728. _start(event) {
  729. this.data._flag_img_endtouch = false;
  730. if (event.touches.length == 1) {
  731. //单指拖动
  732. this.data._touch_img_relative[0] = {
  733. x: (event.touches[0].clientX - this.data._img_left),
  734. y: (event.touches[0].clientY - this.data._img_top)
  735. }
  736. } else {
  737. //双指放大
  738. let width = Math.abs(event.touches[0].clientX - event.touches[1].clientX);
  739. let height = Math.abs(event.touches[0].clientY - event.touches[1].clientY);
  740. this.data._touch_img_relative = [{
  741. x: (event.touches[0].clientX - this.data._img_left),
  742. y: (event.touches[0].clientY - this.data._img_top)
  743. }, {
  744. x: (event.touches[1].clientX - this.data._img_left),
  745. y: (event.touches[1].clientY - this.data._img_top)
  746. }];
  747. this.data._hypotenuse_length = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
  748. }!this.data._canvas_overflow && this._draw();
  749. },
  750. _move_throttle() {
  751. //安卓需要节流
  752. if (this.data.info.platform == 'android') {
  753. clearTimeout(this.data.MOVE_THROTTLE);
  754. this.data.MOVE_THROTTLE = setTimeout(() => {
  755. this.data.MOVE_THROTTLE_FLAG = true;
  756. }, 1000 / 40)
  757. return this.data.MOVE_THROTTLE_FLAG;
  758. } else {
  759. this.data.MOVE_THROTTLE_FLAG = true;
  760. }
  761. },
  762. _move(event) {
  763. if (this.data._flag_img_endtouch || !this.data.MOVE_THROTTLE_FLAG) return;
  764. this.data.MOVE_THROTTLE_FLAG = false;
  765. this._move_throttle();
  766. this._moveDuring();
  767. if (event.touches.length == 1) {
  768. //单指拖动
  769. let left = (event.touches[0].clientX - this.data._touch_img_relative[0].x),
  770. top = (event.touches[0].clientY - this.data._touch_img_relative[0].y);
  771. //图像边缘检测,防止截取到空白
  772. this.data._img_left = left;
  773. this.data._img_top = top;
  774. this._imgMarginDetectionPosition();
  775. this.setData({
  776. _img_left: this.data._img_left,
  777. _img_top: this.data._img_top
  778. });
  779. } else {
  780. //双指放大
  781. let width = (Math.abs(event.touches[0].clientX - event.touches[1].clientX)),
  782. height = (Math.abs(event.touches[0].clientY - event.touches[1].clientY)),
  783. hypotenuse = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2)),
  784. scale = this.data.scale * (hypotenuse / this.data._hypotenuse_length),
  785. current_deg = 0;
  786. scale = scale <= this.data.min_scale ? this.data.min_scale : scale;
  787. scale = scale >= this.data.max_scale ? this.data.max_scale : scale;
  788. //图像边缘检测,防止截取到空白
  789. this.data.scale = scale;
  790. this._imgMarginDetectionScale();
  791. //双指旋转(如果没禁用旋转)
  792. let _touch_img_relative = [{
  793. x: (event.touches[0].clientX - this.data._img_left),
  794. y: (event.touches[0].clientY - this.data._img_top)
  795. }, {
  796. x: (event.touches[1].clientX - this.data._img_left),
  797. y: (event.touches[1].clientY - this.data._img_top)
  798. }];
  799. if (!this.data.disable_rotate) {
  800. let first_atan = 180 / Math.PI * Math.atan2(_touch_img_relative[0].y, _touch_img_relative[0].x);
  801. let first_atan_old = 180 / Math.PI * Math.atan2(this.data._touch_img_relative[0].y, this.data._touch_img_relative[0].x);
  802. let second_atan = 180 / Math.PI * Math.atan2(_touch_img_relative[1].y, _touch_img_relative[1].x);
  803. let second_atan_old = 180 / Math.PI * Math.atan2(this.data._touch_img_relative[1].y, this.data._touch_img_relative[1].x);
  804. //当前旋转的角度
  805. let first_deg = first_atan - first_atan_old,
  806. second_deg = second_atan - second_atan_old;
  807. if (first_deg != 0) {
  808. current_deg = first_deg;
  809. } else if (second_deg != 0) {
  810. current_deg = second_deg;
  811. }
  812. }
  813. this.data._touch_img_relative = _touch_img_relative;
  814. this.data._hypotenuse_length = Math.sqrt(Math.pow(width, 2) + Math.pow(height, 2));
  815. //更新视图
  816. this.setData({
  817. angle: this.data.angle + current_deg,
  818. scale: this.data.scale
  819. });
  820. }!this.data._canvas_overflow && this._draw();
  821. },
  822. //结束操作
  823. _end(event) {
  824. this.data._flag_img_endtouch = true;
  825. this._moveStop();
  826. },
  827. //点击中间剪裁框处理
  828. _click(event) {
  829. if (!this.data.imgSrc) {
  830. //调起上传
  831. this.upload();
  832. return;
  833. }
  834. this._draw(() => {
  835. let x = event.detail ? event.detail.x : event.touches[0].clientX;
  836. let y = event.detail ? event.detail.y : event.touches[0].clientY;
  837. if ((x >= this.data.cut_left && x <= (this.data.cut_left + this.data.width)) && (y >= this.data.cut_top && y <= (this.data.cut_top + this.data.height))) {
  838. //生成图片并回调
  839. wx.canvasToTempFilePath({
  840. width: this.data.width * this.data.export_scale,
  841. height: Math.round(this.data.height * this.data.export_scale),
  842. destWidth: this.data.width * this.data.export_scale,
  843. destHeight: Math.round(this.data.height) * this.data.export_scale,
  844. fileType: 'png',
  845. quality: this.data.quality,
  846. canvasId: this.data.el,
  847. success: (res) => {
  848. this.triggerEvent('tapcut', {
  849. url: res.tempFilePath,
  850. width: this.data.width * this.data.export_scale,
  851. height: this.data.height * this.data.export_scale
  852. });
  853. }
  854. }, this)
  855. }
  856. });
  857. },
  858. //渲染
  859. _draw(callback) {
  860. if (!this.data.imgSrc) return;
  861. let draw = () => {
  862. //图片实际大小
  863. let img_width = this.data.img_width * this.data.scale * this.data.export_scale;
  864. let img_height = this.data.img_height * this.data.scale * this.data.export_scale;
  865. //canvas和图片的相对距离
  866. var xpos = this.data._img_left - this.data.cut_left;
  867. var ypos = this.data._img_top - this.data.cut_top;
  868. //旋转画布
  869. this.data.ctx.translate(xpos * this.data.export_scale, ypos * this.data.export_scale);
  870. this.data.ctx.rotate(this.data.angle * Math.PI / 180);
  871. this.data.ctx.drawImage(this.data.imgSrc, -img_width / 2, -img_height / 2, img_width, img_height);
  872. this.data.ctx.draw(false, () => {
  873. callback && callback();
  874. });
  875. }
  876. if (this.data.ctx.width != this.data.width || this.data.ctx.height != this.data.height) {
  877. //优化拖动裁剪框,所以必须把宽高设置放在离用户触发渲染最近的地方
  878. this.setData({
  879. _canvas_height: this.data.height,
  880. _canvas_width: this.data.width,
  881. }, () => {
  882. //延迟40毫秒防止点击过快出现拉伸或裁剪过多
  883. setTimeout(() => {
  884. draw();
  885. }, 40);
  886. });
  887. } else {
  888. draw();
  889. }
  890. },
  891. //裁剪框处理
  892. _cutTouchMove(e) {
  893. if (this.data._flag_cut_touch && this.data.MOVE_THROTTLE_FLAG) {
  894. if (this.data.disable_ratio && (this.data.disable_width || this.data.disable_height)) return;
  895. //节流
  896. this.data.MOVE_THROTTLE_FLAG = false;
  897. this._move_throttle();
  898. let width = this.data.width,
  899. height = this.data.height,
  900. cut_top = this.data.cut_top,
  901. cut_left = this.data.cut_left,
  902. size_correct = () => {
  903. width = width <= this.data.max_width ? width >= this.data.min_width ? width : this.data.min_width : this.data.max_width;
  904. height = height <= this.data.max_height ? height >= this.data.min_height ? height : this.data.min_height : this.data.max_height;
  905. },
  906. size_inspect = () => {
  907. if ((width > this.data.max_width || width < this.data.min_width || height > this.data.max_height || height < this.data.min_height) && this.data.disable_ratio) {
  908. size_correct();
  909. return false;
  910. } else {
  911. size_correct();
  912. return true;
  913. }
  914. };
  915. height = this.data.CUT_START.height + ((this.data.CUT_START.corner > 1 && this.data.CUT_START.corner < 4 ? 1 : -1) * (this.data.CUT_START.y - e.touches[0].clientY));
  916. switch (this.data.CUT_START.corner) {
  917. case 1:
  918. width = this.data.CUT_START.width + this.data.CUT_START.x - e.touches[0].clientX;
  919. if (this.data.disable_ratio) {
  920. height = width / (this.data.width / this.data.height)
  921. }
  922. if (!size_inspect()) return;
  923. cut_left = this.data.CUT_START.cut_left - (width - this.data.CUT_START.width);
  924. break
  925. case 2:
  926. width = this.data.CUT_START.width + this.data.CUT_START.x - e.touches[0].clientX;
  927. if (this.data.disable_ratio) {
  928. height = width / (this.data.width / this.data.height)
  929. }
  930. if (!size_inspect()) return;
  931. cut_top = this.data.CUT_START.cut_top - (height - this.data.CUT_START.height)
  932. cut_left = this.data.CUT_START.cut_left - (width - this.data.CUT_START.width)
  933. break
  934. case 3:
  935. width = this.data.CUT_START.width - this.data.CUT_START.x + e.touches[0].clientX;
  936. if (this.data.disable_ratio) {
  937. height = width / (this.data.width / this.data.height)
  938. }
  939. if (!size_inspect()) return;
  940. cut_top = this.data.CUT_START.cut_top - (height - this.data.CUT_START.height);
  941. break
  942. case 4:
  943. width = this.data.CUT_START.width - this.data.CUT_START.x + e.touches[0].clientX;
  944. if (this.data.disable_ratio) {
  945. height = width / (this.data.width / this.data.height)
  946. }
  947. if (!size_inspect()) return;
  948. break
  949. }
  950. if (!this.data.disable_width && !this.data.disable_height) {
  951. this.setData({
  952. width: width,
  953. cut_left: cut_left,
  954. height: height,
  955. cut_top: cut_top,
  956. })
  957. } else if (!this.data.disable_width) {
  958. this.setData({
  959. width: width,
  960. cut_left: cut_left
  961. })
  962. } else if (!this.data.disable_height) {
  963. this.setData({
  964. height: height,
  965. cut_top: cut_top
  966. })
  967. }
  968. this._imgMarginDetectionScale();
  969. }
  970. },
  971. _cutTouchStart(e) {
  972. let currentX = e.touches[0].clientX;
  973. let currentY = e.touches[0].clientY;
  974. let cutbox_top4 = this.data.cut_top + this.data.height - 30;
  975. let cutbox_bottom4 = this.data.cut_top + this.data.height + 20;
  976. let cutbox_left4 = this.data.cut_left + this.data.width - 30;
  977. let cutbox_right4 = this.data.cut_left + this.data.width + 30;
  978. let cutbox_top3 = this.data.cut_top - 30;
  979. let cutbox_bottom3 = this.data.cut_top + 30;
  980. let cutbox_left3 = this.data.cut_left + this.data.width - 30;
  981. let cutbox_right3 = this.data.cut_left + this.data.width + 30;
  982. let cutbox_top2 = this.data.cut_top - 30;
  983. let cutbox_bottom2 = this.data.cut_top + 30;
  984. let cutbox_left2 = this.data.cut_left - 30;
  985. let cutbox_right2 = this.data.cut_left + 30;
  986. let cutbox_top1 = this.data.cut_top + this.data.height - 30;
  987. let cutbox_bottom1 = this.data.cut_top + this.data.height + 30;
  988. let cutbox_left1 = this.data.cut_left - 30;
  989. let cutbox_right1 = this.data.cut_left + 30;
  990. if (currentX > cutbox_left4 && currentX < cutbox_right4 && currentY > cutbox_top4 && currentY < cutbox_bottom4) {
  991. this._moveDuring();
  992. this.data._flag_cut_touch = true;
  993. this.data._flag_img_endtouch = true;
  994. this.data.CUT_START = {
  995. width: this.data.width,
  996. height: this.data.height,
  997. x: currentX,
  998. y: currentY,
  999. corner: 4
  1000. }
  1001. } else if (currentX > cutbox_left3 && currentX < cutbox_right3 && currentY > cutbox_top3 && currentY < cutbox_bottom3) {
  1002. this._moveDuring();
  1003. this.data._flag_cut_touch = true;
  1004. this.data._flag_img_endtouch = true;
  1005. this.data.CUT_START = {
  1006. width: this.data.width,
  1007. height: this.data.height,
  1008. x: currentX,
  1009. y: currentY,
  1010. cut_top: this.data.cut_top,
  1011. cut_left: this.data.cut_left,
  1012. corner: 3
  1013. }
  1014. } else if (currentX > cutbox_left2 && currentX < cutbox_right2 && currentY > cutbox_top2 && currentY < cutbox_bottom2) {
  1015. this._moveDuring();
  1016. this.data._flag_cut_touch = true;
  1017. this.data._flag_img_endtouch = true;
  1018. this.data.CUT_START = {
  1019. width: this.data.width,
  1020. height: this.data.height,
  1021. cut_top: this.data.cut_top,
  1022. cut_left: this.data.cut_left,
  1023. x: currentX,
  1024. y: currentY,
  1025. corner: 2
  1026. }
  1027. } else if (currentX > cutbox_left1 && currentX < cutbox_right1 && currentY > cutbox_top1 && currentY < cutbox_bottom1) {
  1028. this._moveDuring();
  1029. this.data._flag_cut_touch = true;
  1030. this.data._flag_img_endtouch = true;
  1031. this.data.CUT_START = {
  1032. width: this.data.width,
  1033. height: this.data.height,
  1034. cut_top: this.data.cut_top,
  1035. cut_left: this.data.cut_left,
  1036. x: currentX,
  1037. y: currentY,
  1038. corner: 1
  1039. }
  1040. }
  1041. },
  1042. _cutTouchEnd(e) {
  1043. this._moveStop();
  1044. this.data._flag_cut_touch = false;
  1045. },
  1046. //停止移动时需要做的操作
  1047. _moveStop() {
  1048. //清空之前的自动居中延迟函数并添加最新的
  1049. clearTimeout(this.data.TIME_CUT_CENTER);
  1050. this.data.TIME_CUT_CENTER = setTimeout(() => {
  1051. //动画启动
  1052. if (!this.data._cut_animation) {
  1053. this.setData({
  1054. _cut_animation: true
  1055. });
  1056. }
  1057. this.setCutCenter();
  1058. }, 1000)
  1059. //清空之前的背景变化延迟函数并添加最新的
  1060. clearTimeout(this.data.TIME_BG);
  1061. this.data.TIME_BG = setTimeout(() => {
  1062. if (this.data._flag_bright) {
  1063. this.setData({
  1064. _flag_bright: false
  1065. });
  1066. }
  1067. }, 2000)
  1068. },
  1069. //移动中
  1070. _moveDuring() {
  1071. //清空之前的自动居中延迟函数
  1072. clearTimeout(this.data.TIME_CUT_CENTER);
  1073. //清空之前的背景变化延迟函数
  1074. clearTimeout(this.data.TIME_BG);
  1075. //高亮背景
  1076. if (!this.data._flag_bright) {
  1077. this.setData({
  1078. _flag_bright: true
  1079. });
  1080. }
  1081. },
  1082. //监听器
  1083. _watcher() {
  1084. Object.keys(this.data).forEach(v => {
  1085. this._observe(this.data, v, this.data.watch[v]);
  1086. })
  1087. },
  1088. _observe(obj, key, watchFun) {
  1089. var val = obj[key];
  1090. Object.defineProperty(obj, key, {
  1091. configurable: true,
  1092. enumerable: true,
  1093. set: (value) => {
  1094. val = value;
  1095. watchFun && watchFun(val, this);
  1096. },
  1097. get() {
  1098. if (val && '_img_top|img_left||width|height|min_width|max_width|min_height|max_height|export_scale|cut_top|cut_left|canvas_top|canvas_left|img_width|img_height|scale|angle|min_scale|max_scale'.indexOf(key) != -1) {
  1099. let ret = parseFloat(parseFloat(val).toFixed(3));
  1100. if (typeof val == "string" && val.indexOf("%") != -1) {
  1101. ret += '%';
  1102. }
  1103. return ret;
  1104. }
  1105. return val;
  1106. }
  1107. })
  1108. },
  1109. _preventTouchMove() {}
  1110. }
  1111. })