HarmonyOS 鸿蒙Next实现图片编辑裁剪

最近开发一款鸿蒙应用，需要用到图片裁剪，系统的图片编辑功能如今没有对外开放API调用，以是需要本身整一套裁剪的功能。由于刚接触这个ArkTS语言，探索的过程还是挺费劲。
废话不多说，先直接看效果：

支持自由裁剪和固定比例裁剪。
官方也提供了图片编辑功能的实现：
图片编辑-HarmonyOS NEXT-Codelabs-华为开发者同盟 (huawei.com)
官方效果：

这种方式功能比力简朴，裁剪是手动点击的，大小是固定的，并不能满足我的需求。
于是向官方求助，给了一个实现的demo，大致代码如下：

1. model/Bean.ets
4. export interface RectPosition {
5.   x: number;
6.   y: number;
7.   height: number;
8.   width: number;
9. }
11. export enum ActionType {
12.   topLeft,
13.   topRight,
14.   bottomLeft,
15.   bottomRight,
16.   move
17. }
19. export interface Position {
20.   x: number;
21.   y: number;
22. }
25. export interface InitPosition {
26.   x: number;
27.   y: number;
28.   width: number;
29.   height: number;
30. }
32. pages/ImageCropPage.ets
35. import image from '@ohos.multimedia.image';
37. import { resourceManager } from '@kit.LocalizationKit';
38. import { RectPosition, ActionType, Position, InitPosition } from '../model/Bean'
40. const TAG = "IMAGE_CROPPING"
42. @Entry
43. @Component
44. struct ImageCropPage {
45.   @Provide pixelMap: image.PixelMap | undefined = undefined;
46.   @Provide pixelMapBackUp: image.PixelMap | undefined = undefined;
47.   @Provide imageInfo: image.ImageInfo | undefined = undefined;
48.   private settings: RenderingContextSettings = new RenderingContextSettings(true);
49.   private canvasContext: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings);
50.   private settings2: RenderingContextSettings = new RenderingContextSettings(true);
51.   private canvasContext2: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings2);
52.   private settings3: RenderingContextSettings = new RenderingContextSettings(true);
53.   private canvasContext3: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings3);
54.   private actionType: ActionType = ActionType.move;
55.   private rotateOn: boolean = false
56.   private sw: number = 266; //图片展示框固定宽度
57.   private sh: number = 390; //图片展示框固定高度
58.   @State clipImageWidth: number = 0;
59.   @State clipImageHeight: number = 0;
60.   @State imageArea: RectPosition = {
61.     x: 0,
62.     y: 0,
63.     width: 0,
64.     height: 0
65.   };
66.   private touchPosition: Position = {
67.     x: 0,
68.     y: 0,
69.   };
70.   @State initPosition: InitPosition = {
71.     x: 0,
72.     y: 0,
73.     width: 0,
74.     height: 0,
75.   }
76.   @State isCrop: boolean = false
77.   @State cropImageInfo: image.ImageInfo | undefined = undefined;
78.   @State pixelMapChange: boolean = false
79.   @State @Watch('drawMask') clipRect: RectPosition = {
80.     x: 0,
81.     y: 0,
82.     height: 0,
83.     width: 0
84.   };
86.   build() {
87.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
88.       if (this.isCrop) {
89.         if (this.pixelMapChange) {
90.           Image(this.pixelMap)
91.             .width(this.clipImageWidth)
92.             .height(this.clipImageHeight)
93.             .margin({ top: '10%' })
94.             .objectFit(ImageFit.Fill)
95.         } else {
96.           Image(this.pixelMap)
97.             .width(this.clipImageWidth)
98.             .height(this.clipImageHeight)
99.             .margin({ top: '10%' })
100.             .objectFit(ImageFit.Fill)
101.         }
103.       } else {
104.         Canvas(this.canvasContext)
105.           .width(this.sw)
106.           .height(this.sh)
107.           .onReady(() => {
108.             this.drawImage()
109.           })
110.           .onAreaChange((value: Area, newVal: Area) => {
111.             // 获取图片位置xy
112.             this.initPosition.x = Math.round(newVal.position.x as number)
113.             this.initPosition.y = Math.round(newVal.position.y as number)
114.           })
115.         // 蒙层
116.         Canvas(this.canvasContext3)
117.           .position({
118.             x: this.initPosition.x,
119.             y: this.initPosition.y
120.           })
121.           .width(this.sw)
122.           .height(this.sh)
123.         // 裁剪框
124.         Canvas(this.canvasContext2)
125.           .position({
126.             x: this.clipRect.x,
127.             y: this.clipRect.y
128.           })
129.           .width(this.clipRect.width)
130.           .height(this.clipRect.height)
131.           .onReady(() => {
132.             this.drawClipImage()
133.           })
134.           .onTouch(event => {
135.             if (event.type === TouchType.Down) {
136.               this.isMove(event.target.area, event.touches[0]);
137.               this.touchPosition = {
138.                 x: event.touches[0].screenX,
139.                 y: event.touches[0].screenY
140.               }
141.             } else if (event.type === TouchType.Move) {
142.               let moveX = event.changedTouches[0].screenX - this.touchPosition.x;
143.               let moveY = event.changedTouches[0].screenY - this.touchPosition.y;
144.               this.touchPosition = {
145.                 x: event.changedTouches[0].screenX,
146.                 y: event.changedTouches[0].screenY
147.               }
148.               this.moveClipCanvas(moveX, moveY);
149.             }
150.           })
151.       }
152.       Row() {
153.         Image($rawfile('rotate.png'))
154.           .width(40)
155.           .height(40)
156.           .onClick(() => {
157.             this.rotateImage()
158.           })
159.       }
160.       .margin({ top: 50 })
161.       .height('7%')
162.       .width('100%')
163.       .padding(30)
165.       Row() {
166.         Image($rawfile('reset.png'))
167.           .width(40)
168.           .height(40)
169.           .onClick(() => {
170.             this.cancel()
171.           })
172.         Image($rawfile('crop.png'))
173.           .width(40)
174.           .height(40)
175.           .onClick(() => {
176.             this.clipImage()
177.           })
178.       }
179.       .margin({ top: 10 })
180.       .width('100%')
181.       .height('7%')
182.       .padding(30)
183.       .justifyContent(FlexAlign.SpaceBetween)
184.     }
185.     .width('100%')
186.     .height('100%')
187.     .backgroundColor('#000000')
188.   }
190.   // 旋转图片
191.   async rotateImage() {
192.     if (this.rotateOn) {
193.       await this.pixelMap?.rotate(90)
194.       const info = await this.pixelMap?.getImageInfo()
195.       this.cropImageInfo = info
196.       if (this.pixelMapChange) {
197.         this.pixelMapChange = false
198.       } else {
199.         this.pixelMapChange = true
200.       }
201.     }
202.   }
204.   // 取消剪切
205.   cancel() {
206.     this.pixelMap = this.pixelMapBackUp
207.     this.isCrop = false
208.     this.rotateOn = false
209.   }
211.   // 判断操作类型
212.   isMove(area: Area, touch: TouchObject) {
213.     if (touch.x < 60 && touch.y < 60) { // 左上角
214.       this.actionType = ActionType.topLeft
215.     } else if (touch.x < 60 && touch.y > (Number(area.height) - 60)) { // 左下
216.       this.actionType = ActionType.bottomLeft
217.     } else if (touch.x > Number(area.width) - 60 && touch.y < 60) { // 右上
218.       this.actionType = ActionType.topRight
219.     } else if (touch.x > Number(area.width) - 60 && touch.y > (Number(area.height) - 60)) { // 右下
220.       this.actionType = ActionType.bottomRight
221.     } else {
222.       this.actionType = ActionType.move
223.     }
224.   }
226.   // 绘制背景图
227.   async drawImage() {
228.     await this.initData('test.jpg')
229.     if (this.imageInfo != undefined) {
231.       // let width = px2vp(this.imageInfo.size.width);
232.       // let height = px2vp(this.imageInfo.size.height)
233.       // this.canvasContext.drawImage(this.pixelMap, 0, 0, px2vp(this.imageInfo.size.width),
234.       //   px2vp(this.imageInfo.size.height));
236.       this.canvasContext.drawImage(this.pixelMap,0,0,this.imageInfo.size.width,this.imageInfo.size.height,0,0,this.sw, this.sh)
237.       this.canvasContext.save();
238.     }
239.   }
241.   // 绘制蒙层
242.   drawMask() {
243.     this.canvasContext3.clearRect(0, 0, this.sw, this.sh);
244.     this.canvasContext3.fillStyle = 'rgba(0,0,0,0.7)';
245.     this.canvasContext3.fillRect(0, 0, this.sw, this.sh);
246.     this.canvasContext3.clearRect(this.clipRect.x - this.initPosition.x, this.clipRect.y - this.initPosition.y,
247.       this.clipRect.width, this.clipRect.height);
248.   }
250.   // 绘制裁剪框
251.   drawClipImage() {
252.     this.canvasContext2.clearRect(0, 0, this.clipRect.width, this.clipRect.height);
253.     this.canvasContext2.lineWidth = 6
254.     this.canvasContext2.strokeStyle = '#ff6be038'
255.     this.canvasContext2.beginPath()
257.     this.canvasContext2.moveTo(0, 20)
258.     this.canvasContext2.lineTo(0, 0);
259.     this.canvasContext2.lineTo(20, 0);
261.     this.canvasContext2.moveTo(this.clipRect.width - 20, 0);
262.     this.canvasContext2.lineTo(this.clipRect.width, 0);
263.     this.canvasContext2.lineTo(this.clipRect.width, 20);
265.     this.canvasContext2.moveTo(0, this.clipRect.height - 20);
266.     this.canvasContext2.lineTo(0, this.clipRect.height);
267.     this.canvasContext2.lineTo(20, this.clipRect.height);
269.     this.canvasContext2.moveTo(this.clipRect.width - 20, this.clipRect.height);
270.     this.canvasContext2.lineTo(this.clipRect.width, this.clipRect.height);
271.     this.canvasContext2.lineTo(this.clipRect.width, this.clipRect.height - 20);
272.     this.canvasContext2.stroke()
274.     this.canvasContext2.beginPath();
275.     this.canvasContext2.lineWidth = 0.5;
276.     let height = Math.round(this.clipRect.height / 3);
277.     for (let index = 0; index <= 3; index++) {
278.       let y = index === 3 ? this.clipRect.height : height * index;
279.       this.canvasContext2.moveTo(0, y);
280.       this.canvasContext2.lineTo(this.clipRect.width, y);
281.     }
282.     let width = Math.round(this.clipRect.width / 3);
283.     for (let index = 0; index <= 3; index++) {
284.       let x = index === 3 ? this.clipRect.width : width * index;
285.       this.canvasContext2.moveTo(x, 0);
286.       this.canvasContext2.lineTo(x, this.clipRect.height);
287.     }
288.     this.canvasContext2.stroke();
289.   }
291.   // 获取pixelMap与imageInfo
292.   async initData(fileName: string) {
293.     const context: Context = getContext(this);
294.     const resourceMgr: resourceManager.ResourceManager = context.resourceManager;
295.     const fileData = await resourceMgr.getRawFileContent(fileName);
296.     const buffer = fileData.buffer;
297.     // const imageSource: image.ImageSource = image.createImageSource(buffer);
298.     const imageSource: image.ImageSource = image.createImageSource(getContext().filesDir + "/picture2.jpg");
299.     const pixelMap: image.PixelMap = await imageSource.createPixelMap()
300.     this.pixelMap = pixelMap
301.     this.pixelMapBackUp = pixelMap
302.     const imageInfo = await pixelMap.getImageInfo()
303.     this.imageInfo = imageInfo
304.     // 裁剪框初始位置
305.     this.initPosition.width = px2vp(Math.round(this.imageInfo.size.width))
306.     this.initPosition.height = px2vp(Math.round(this.imageInfo.size.height))
307.     this.clipRect.height = this.sh
308.     this.clipRect.width = this.sw
309.     this.clipRect.x = this.initPosition.x
310.     this.clipRect.y = this.initPosition.y
311.   }
313.   // 裁剪图片
314.   async clipImage() {
315.     let ratioX = 1;
316.     let ratioY = 1;
318.     if (this.imageInfo != undefined) {
319.       ratioX = this.imageInfo.size.width / this.sw;
320.       ratioY = this.imageInfo.size.height / this.sh;
321.     }
323.     let x = this.clipRect.x - this.initPosition.x;
324.     let y = this.clipRect.y - this.initPosition.y;
325.     console.log('clipImage() x= ' + x + '  y = ' + y + ' height = ' + this.clipRect.height + ' width = ' + this.clipRect.width)
326.     await this.pixelMap?.crop({
327.       x: vp2px(x),
328.       y: vp2px(y),
329.       size: {
330.         height: this.clipRect.height * ratioY,
331.         width: this.clipRect.width * ratioX
332.       }
333.     })
334.     this.cropImageInfo = await this.pixelMap?.getImageInfo();
335.     this.isCrop = true
336.     this.rotateOn = true
337.     this.setClipImageSize();
338.   }
340.   setClipImageSize(){
341.     let maxWidth: number = 300;
342.     let maxHeight: number = 500;
343.     if(this.cropImageInfo!=null){
344.       let aspectRatio: number = this.cropImageInfo.size.height / this.cropImageInfo.size.width;
345.       if(this.cropImageInfo.size.width > px2vp(maxWidth)){ //宽度固定，计算高度
346.         this.clipImageWidth = maxWidth;
347.         if(maxWidth * aspectRatio > maxHeight){
348.           this.clipImageHeight = maxHeight;
349.         }else{
350.           this.clipImageHeight = maxWidth * aspectRatio;
351.         }
352.       }else{
353.         if(this.cropImageInfo.size.height > px2vp(maxHeight)){  //高度固定，计算宽度
354.           this.clipImageHeight = maxHeight;
355.           this.clipImageWidth = maxWidth / aspectRatio;
356.         }else{
357.           this.clipImageWidth = px2vp(this.cropImageInfo.size.width);
358.           this.clipImageHeight = px2vp(this.cropImageInfo.size.height);
359.         }
360.       }
361.     }
362.   }
364.   // 裁剪框位置和大小变化    初始位置为图片的初始坐标 移动的坐标
365.   moveClipCanvas(moveX: number, moveY: number) {
366.     let clipRect: RectPosition = {
367.       x: this.clipRect.x,
368.       y: this.clipRect.y,
369.       width: this.clipRect.width,
370.       height: this.clipRect.height
371.     }
372.     switch (this.actionType) {
373.       case ActionType.move:
374.         clipRect.x += moveX;
375.         clipRect.y += moveY;
376.         break;
377.       case ActionType.topLeft:
378.         clipRect.x += moveX;
379.         clipRect.y += moveY;
380.         clipRect.width += -moveX;
381.         clipRect.height += -moveY;
382.         break;
383.       case ActionType.topRight:
384.         clipRect.y += moveY;
385.         clipRect.width += moveX;
386.         clipRect.height += -moveY;
387.         break;
388.       case ActionType.bottomLeft:
389.         clipRect.x += moveX;
390.         clipRect.width += -moveX;
391.         clipRect.height += moveY;
392.         break;
393.       case ActionType.bottomRight:
394.         clipRect.width += moveX;
395.         clipRect.height += moveY;
396.         break;
397.       default:
398.         break;
399.     }
401.     // 偏移坐标小于初始位置
402.     if (clipRect.x < this.initPosition.x) {
403.       clipRect.x = this.initPosition.x;
404.     }
406.     if (clipRect.y < this.initPosition.y) {
407.       clipRect.y = this.initPosition.y;
408.     }
410.     // 横坐标限制位置
411.     if (clipRect.width + clipRect.x > this.sw + this.initPosition.x) {
412.       if (this.actionType === ActionType.move) {
413.         clipRect.x = this.sw + this.initPosition.x - clipRect.width;
414.       } else {
415.         clipRect.width = this.sw + this.initPosition.x - clipRect.x;
416.       }
417.     }
419.     // 纵坐标限制
420.     if (clipRect.height + clipRect.y > this.sh + this.initPosition.y) {
421.       if (this.actionType === ActionType.move) {
422.         clipRect.y = this.sh + this.initPosition.y - clipRect.height;
423.       } else {
425.         clipRect.height = this.sh + this.initPosition.y - clipRect.y;
426.       }
427.     }
429.     this.clipRect = {
430.       x: Math.round(clipRect.x),
431.       y: Math.round(clipRect.y),
432.       width: Math.round(clipRect.width),
433.       height: Math.round(clipRect.height)
434.     };
435.   }
436. }
438. pages/Index.ets
441. import picker from '@ohos.multimedia.cameraPicker'
442. import camera from '@ohos.multimedia.camera';
443. import common from '@ohos.app.ability.common';
444. import { BusinessError } from '@ohos.base';
445. import fileuri from '@ohos.file.fileuri';
446. import fs from '@ohos.file.fs';
447. import photoAccessHelper from '@ohos.file.photoAccessHelper';
448. import { router } from '@kit.ArkUI';
450. let context = getContext(this) as common.Context;
453. class CameraPosition {
454.   cameraPosition: camera.CameraPosition
455.   saveUri: string
457.   constructor(cameraPosition: camera.CameraPosition, saveUri: string) {
458.     this.cameraPosition = cameraPosition
459.     this.saveUri = saveUri
460.   }
461. }
463. let pathDir = getContext().filesDir;
464. console.log('保存路径为'+pathDir)
465. let filePath = pathDir + '/picture.jpg'
466. fs.createRandomAccessFileSync(filePath, fs.OpenMode.CREATE);
467. let uri = fileuri.getUriFromPath(filePath);
468. async function photo() {
469.   try {
470.     let pickerProfile = new CameraPosition(camera.CameraPosition.CAMERA_POSITION_BACK, uri)
471.     let pickerResult: picker.PickerResult = await picker.pick(context,
472.       [picker.PickerMediaType.PHOTO, picker.PickerMediaType.VIDEO], pickerProfile);
473.     console.log("the pick pickerResult is:" + JSON.stringify(pickerResult));
474.   } catch (error) {
475.     let err = error as BusinessError;
476.     console.error(`the pick call failed. error code: ${err.code}`);
477.   }
478. }
479. async function picture() {
480.   let PhotoSelectOptions = new photoAccessHelper.PhotoSelectOptions();
481.   PhotoSelectOptions.MIMEType = photoAccessHelper.PhotoViewMIMETypes.IMAGE_TYPE;
482.   PhotoSelectOptions.maxSelectNumber = 1;
483.   PhotoSelectOptions.isSearchSupported = false;
484.   PhotoSelectOptions.isEditSupported = false;
485.   PhotoSelectOptions.isPreviewForSingleSelectionSupported = false;
486.   let photoPicker = new photoAccessHelper.PhotoViewPicker();
487.   photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult: photoAccessHelper.PhotoSelectResult) => {
488.     let photouri: Array<string> = PhotoSelectResult.photoUris
489.     let file = fs.openSync(photouri[0], fs.OpenMode.READ_ONLY)
490.     let file2 = fs.openSync(pathDir+'/picture2.jpg', fs.OpenMode.READ_WRITE | fs.OpenMode.CREATE)
491.     fs.copyFileSync(file.fd, file2.fd)
492.     fs.closeSync(file);
493.     fs.closeSync(file2);
494.     router.pushUrl({
495.       url: "pages/ImageCropPage"
496.     })
497.   })
498. }
501. @Entry
502. @Component
503. struct Index {
504.   build() {
505.     Column() {
506.       Button('选择并编辑').onClick(() => {
507.         picture()
508.       })
509.     }
510.     .width('100%')
511.     .height('100%')
512.     .alignItems(HorizontalAlign.Center)
513.     .justifyContent(FlexAlign.Center)
514.   }
515. }

复制代码

实现的效果：

这一效果大致可以满足我的需求，但我在测试的时候发现裁剪框滑动的时候有问题，裁剪框和图片位置没做处理惩罚，有大神可以本身处理惩罚的，可以利用这个去修改。
以我的性格就是继续探索新的方案。
经过不停查找，终于找到了一个满足需求的demo，并且功能很齐全，给大家看看效果：

但这个demo项目部分利用的代码是TS语言，NEXT版需要改造才能用。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。