HarmonyOS鸿蒙Next中麻烦提供自定义相机和加图片裁剪代码示例

HarmonyOS鸿蒙Next中麻烦提供自定义相机和加图片裁剪代码示例 麻烦提供自定义相机和加图片裁剪代码示例

3 回复

demo如下:

moudle.json 权限代码
"requestPermissions": [
{
"name": "ohos.permission.INTERNET",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
},
{
"name": "ohos.permission.MEDIA_LOCATION",
"reason": "$string:app_permission_MEDIA_LOCATION",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
},
{
"name": "ohos.permission.READ_MEDIA",
"reason": "$string:app_permission_READ_MEDIA",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "always"
}
},
{
"name": "ohos.permission.WRITE_MEDIA",
"reason": "$string:app_permission_WRITE_MEDIA",
"usedScene": {
"abilities": [
"EntryAbility"
],
"when": "inuse"
}
}
]
entryability页面代码:
import { AbilityConstant, UIAbility, Want } from '@kit.AbilityKit';
import { hilog } from '@kit.PerformanceAnalysisKit';
import { window } from '@kit.ArkUI';
import { ImageKnife } from '@ohos/imageknife'

export default class EntryAbility extends UIAbility {
onCreate(want, launchParam): void {
hilog.info(0x1314, 'ImageDemo', '%{public}s', 'Ability onCreate');
AppStorage.setOrCreate('bundleName',this.context.abilityInfo.bundleName)
}

onDestroy(): void {
hilog.info(0x1314, 'ImageDemo', '%{public}s', 'Ability onDestroy');
}

onWindowStageCreate(windowStage): void {
// Main window is created, set main page for this ability
hilog.info(0x1314, 'ImageDemo', '%{public}s', 'Ability onWindowStageCreate');

windowStage.loadContent('pages/Index', (err) => {
if (err.code) {
hilog.error(0x1314, 'ImageDemo', 'Failed to load the content. Cause: %{public}s', JSON.stringify(err) ?? '');
return;
}
hilog.info(0x1314, 'ImageDemo', 'Succeeded in loading the content.');
});

// 初始化全局ImageKnife
ImageKnife.with(this.context);
}

onWindowStageDestroy(): void {
// Main window is destroyed, release UI related resources
hilog.info(0x1314, 'ImageDemo', '%{public}s', 'Ability onWindowStageDestroy');
}

onForeground(): void {
// Ability has brought to foreground
hilog.info(0x1314, 'ImageDemo', '%{public}s', 'Ability onForeground');
}

onBackground(): void {
// Ability has back to background
hilog.info(0x1314, 'ImageDemo', '%{public}s', 'Ability onBackground');
}
}
ets下common文件夹下Constants代码1:
import { HashMap } from '@kit.ArkTS'
import { Tabar } from '../model/Tabar'

export const localImageResource: HashMap<number, ResourceStr> = new HashMap()
localImageResource.set(0, $r('app.media.jpgSample'))
localImageResource.set(1, $r('app.media.pngSample'))
localImageResource.set(2, $r('app.media.svgSample'))
localImageResource.set(3, $r('app.media.gifSample'))
localImageResource.set(4, $r('app.media.bmpSample'))
localImageResource.set(5, $r('app.media.webpSample'))

export const netImageResource: HashMap<number, ResourceStr> = new HashMap()
netImageResource.set(0, 'https://img-home.csdnimg.cn/images/20240327093300.jpg')
netImageResource.set(1, 'https://img-blog.csdnimg.cn/20191215043500229.png')
netImageResource.set(2, 'https://img13.360buyimg.com/n1/jfs/t1/220646/38/10395/30916/61d6e061E1a6d91c8/c0a9a67e726dd7a4.jpg.dpg')
netImageResource.set(3, 'https://gd-hbimg.huaban.com/e0a25a7cab0d7c2431978726971d61720732728a315ae-57EskW_fw658')
netImageResource.set(4, 'https://img-blog.csdn.net/20140514114029140')
netImageResource.set(5, 'https://hbimg.huabanimg.com/95a6d37a39aa0b70d48fa18dc7df8309e2e0e8e85571e-x4hhks_fw658/format/webp')

export const BUNDLE_NAME: string = 'com.harmonyos.image'

export const TAG: string = 'ImageDemo';

export const tabars: Array<Tabar> = [
{
"name": '裁剪',
"selectN": $r('app.media.ic_pc_cut'),
"selectY": $r('app.media.ic_pc_cut_select')
},
{
"name": '亮度',
"selectN": $r('app.media.ic_public_brightness'),
"selectY": $r('app.media.ic_public_brightness_filled')
},
{
"name": '对比度',
"selectN": $r('app.media.contrast_ratio'),
"selectY": $r('app.media.contrast_ratio_selected')
},
{
"name": '旋转',
"selectN": $r('app.media.ic_switch'),
"selectY": $r('app.media.ic_switch_selected')
}
]

export class Constants {
/**
* Title row width.
*/
static readonly TITLE_ROW_WEIGHT: string = '50%';

/**
* Layout full screen.
*/
static readonly LAYOUT_FULL_SCREEN: string = '100%';

/**
* Edit page height.
*/
static readonly EDIT_PAGE_HEIGHT: string = '26%';

/**
* Image show height.
*/
static readonly IMAGE_SHOW_HEIGHT: string = '68%';

/**
* Slider width.
*/
static readonly SLIDER_WIDTH: string = '80%';

/**
* Loading width and height.
*/
static readonly LOADING_WH: string = '30%';
/**
* Clock wise.
*/
static readonly CLOCK_WISE: number = 90;

/**
* Anti clock.
*/
static readonly ANTI_CLOCK: number = -90;

/**
* Tab menu width.
*/
static readonly TAB_MENU_WIDTH: number = 18;

/**
* Navigation height.
*/
static readonly NAVIGATION_HEIGHT: number = 56;

/**
* Adjust slider value.
*/
static readonly ADJUST_SLIDER_VALUE: number[] = [100, 100, 100];

/**
* Slider min.
*/
static readonly SLIDER_MIN: number = 1;

/**
* Slider step.
*/
static readonly SLIDER_MAX: number = 100;

/**
* Slider step.
*/
static readonly SLIDER_STEP: number = 1;

/**
* Pixel step.
*/
static readonly PIXEL_STEP: number = 4;

/**
* Decimal two.
*/
static readonly DECIMAL_TWO: number = 2;

/**
* Color level max.
*/
static readonly COLOR_LEVEL_MAX: number = 255;

/**
* Convert int.
*/
static readonly CONVERT_INT: number = 100;

/**
* Angle 60.
*/
static readonly ANGLE_60: number = 60;

/**
* Angle 120.
*/
static readonly ANGLE_120: number = 120;

/**
* Angle 240.
*/
static readonly ANGLE_240: number = 240;

/**
* Angle 300.
*/
static readonly ANGLE_360: number = 360;

/**
* Angle 360.
*/
static readonly MOD_2: number = 2;

/**
* Average height and width.
*/
static readonly AVERAGE_WEIGHT_WIDTH: number = 2;

/**
* Crop rate 4:3.
*/
static readonly CROP_RATE_4_3: number = 0.75;

/**
* Crop rate 16:9.
*/
static readonly CROP_RATE_9_16: number = 9 / 16;

/**
* Encode quality.
*/
static readonly ENCODE_QUALITY: number = 100;

/**
* Title space.
*/
static readonly TITLE_SPACE: number = 0;

/**
* Slider mode click.
*/
static readonly SLIDER_CLICK_MODE: number = 3;

/**
* Encode format.
*/
static readonly ENCODE_FORMAT: string = 'image/jpeg';

/**
* Encode file permission.
*/
static readonly ENCODE_FILE_PERMISSION: string = 'rw';

/**
* Brightness worker file.
*/
static readonly BRIGHTNESS_WORKER_FILE = 'entry/ets/workers/AdjustBrightnessWork.ts';

/**
* Brightness worker file.
*/
static readonly SATURATION_WORKER_FILE = 'entry/ets/workers/AdjustSaturationWork.ts';

/**
* Image name.
*/
static readonly IMAGE_PREFIX = 'image';

/**
* Image format.
*/
static readonly IMAGE_FORMAT = '.jpg';

/**
* Rawfile name.
*/
static readonly RAW_FILE_NAME = 'low.jpg';

/**
* Cache dir file name.
*/
static readonly RAW_FILE_NAME_TEST = 'low_test.jpg';

/**
* Free ratio.
*/
static readonly DEFAULT_RATIO: number = -1;

/**
* Ratio 1:1.
*/
static readonly RATIO_1_1: number = 1;

/**
* Ratio 16:9.
*/
static readonly RATIO_16_9: number[] = [16, 9];

/**
* Ratio 9:16.
*/
static readonly RATIO_9_16: number[] = [9, 16];

/**
* Ratio 4:3.
*/
static readonly RATIO_4_3: number[] = [4, 3];

/**
* Ratio 3:4.
*/
static readonly RATIO_3_4: number[] = [3, 4];

/**
* Ratio 3:2.
*/
static readonly RATIO_3_2: number[] = [3, 2];

/**
* Ratio 2:3.
*/
static readonly RATIO_2_3: number[] = [2, 3];

/**
* Screen display margin.
*/
static readonly SCREEN_DISPLAY_MARGIN: number = 15;

/**
* Double.
*/
static readonly DOUBLE: number = 2;

/**
* Edit screen can use scope.
*/
static readonly EDIT_SCREEN_USAGE: number = 0.68;

/**
* Title height.
*/
static readonly TITLE_HEIGHT: number = 56;

/**
* Screen manager key.
*/
static readonly APP_KEY_SCREEN_MANAGER: string = 'app_key_screen_manager';

/**
* Whether full screen.
*/
static readonly IS_FULL_SCREEN_KEY: string = 'isFullScreen';

/**
* Device type.
*/
static readonly DEFAULT_DEVICE_TYPE: string = 'phone';

/**
* Status bar color.
*/
static readonly STATUS_BAR_BACKGROUND_COLOR: string = '#F1F3F5';

/**
* Status bar text color.
*/
static readonly STATUS_BAR_CONTENT_COLOR: string = '#000000';

/**
* Navigation height.
*/
static readonly TOP_BAR_SIZE: number = 56;

/**
* Tool bar size.
*/
static readonly TOOL_BAR_SIZE: number = 72;

/**
* Time out.
*/
static readonly TIMEOUT: number = 50;

/**
* Rect line width inner.
*/
static readonly DEFAULT_LINE_WIDTH: number = 0.4;

/**
* Rect line width outer.
*/
static readonly DEFAULT_LINE_RECT_WIDTH: number = 0.8;

/**
* Rect Button line width.
*/
static readonly DEFAULT_BUTTON_WIDTH: number = 2.3;
/**
* Rect Button line padding.
*/
static readonly DEFAULT_BUTTON_PADDING: number = 1;

/**
* Rect Button line length.
*/
static readonly DEFAULT_BUTTON_LENGTH: number = 20;

/**
* Rect line color.
*/
static readonly DEFAULT_LINE_COLOR: string = '#80FFFFFF';

/**
* Rect Button line color outer.
*/
static readonly DEFAULT_RECT_LINE_COLOR: string = '#FFFFFFFF';

/**
* Rect Button line color.
*/
static readonly DEFAULT_BUTTON_COLOR: string = 'white';

/**
* Mask style.
*/
static readonly DEFAULT_MASK_STYLE: string = 'rgba(0, 0, 0, 0.3)';

/**
* Equality threshold.
*/
static readonly EQUALITY_THRESHOLD: number = 0.0001;

/**
* Min side length.
*/
static readonly DEFAULT_MIN_SIDE_LENGTH: number = 90;

/**
* Touch move identification range.
*/
static readonly DEFAULT_TOUCH_BOUND: number = 20;

/**
* Base scale value.
*/
static readonly BASE_SCALE_VALUE: number = 1.0;

/**
* Default image ratio.
*/
static readonly DEFAULT_IMAGE_RATIO: number = 1.0;

/**
* Rect min side length.
*/
static readonly DEFAULT_MIN_SIDE_LENGTH_EDIT: number = 32;

/**
* Default margin length.
*/
static readonly DEFAULT_MARGIN_LENGTH: number = 20;

/**
* Time out.
*/
static readonly DEFAULT_TIMEOUT_MILLISECOND_1000: number = 1000;

/**
* Default split fraction.
*/
static readonly DEFAULT_SPLIT_FRACTION: number = 3;
}

更多关于HarmonyOS鸿蒙Next中麻烦提供自定义相机和加图片裁剪代码示例的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS Next中,自定义相机和图片裁剪功能可以通过ArkUI框架和相关的API实现。以下是一个简单的代码示例,展示如何实现自定义相机和图片裁剪功能。

自定义相机

import camera from '@ohos.multimedia.camera';
import image from '@ohos.multimedia.image';
import mediaLibrary from '@ohos.multimedia.mediaLibrary';

// 初始化相机
const cameraManager = camera.getCameraManager(context);
const cameraDevices = cameraManager.getSupportedCameras();
const cameraDevice = cameraDevices[0];
const cameraInput = cameraManager.getCameraInput(cameraDevice);
const previewOutput = cameraManager.createPreviewOutput();
const captureSession = cameraManager.createCaptureSession();

// 设置相机预览
previewOutput.on('frameStart', () => {
  console.log('Preview frame started');
});

// 开始预览
captureSession.beginConfig();
captureSession.addInput(cameraInput);
captureSession.addOutput(previewOutput);
captureSession.commitConfig();
captureSession.start();

// 拍照
const photoOutput = cameraManager.createPhotoOutput();
captureSession.addOutput(photoOutput);
photoOutput.capture((err, image) => {
  if (err) {
    console.error('Capture failed:', err);
    return;
  }
  const mediaLibraryInstance = mediaLibrary.getMediaLibrary(context);
  const imagePath = 'path/to/save/image.jpg';
  mediaLibraryInstance.createAsset(imagePath, image);
});

图片裁剪

import image from '@ohos.multimedia.image';
import mediaLibrary from '@ohos.multimedia.mediaLibrary';

// 加载图片
const mediaLibraryInstance = mediaLibrary.getMediaLibrary(context);
const imageAsset = mediaLibraryInstance.getAsset('path/to/image.jpg');

// 创建图片源
const imageSource = image.createImageSource(imageAsset);

// 设置裁剪区域
const rect = { x: 100, y: 100, width: 200, height: 200 };
const imagePixelMap = imageSource.createPixelMap(rect);

// 保存裁剪后的图片
const croppedImagePath = 'path/to/save/cropped_image.jpg';
mediaLibraryInstance.createAsset(croppedImagePath, imagePixelMap);

总结

以上代码示例展示了如何在HarmonyOS Next中实现自定义相机和图片裁剪功能。自定义相机部分通过camera模块实现相机的初始化、预览和拍照功能;图片裁剪部分通过image模块加载图片并设置裁剪区域,最后保存裁剪后的图片。

在HarmonyOS鸿蒙Next中,自定义相机和图片裁剪可以通过以下代码示例实现:

自定义相机:

public class CustomCameraAbilitySlice extends AbilitySlice {
    private Camera camera;
    private SurfaceProvider surfaceProvider;

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        surfaceProvider = new SurfaceProvider(this);
        camera = CameraKit.getInstance(getContext()).createCamera();
        camera.setSurfaceProvider(surfaceProvider);
        camera.start();
    }

    @Override
    protected void onStop() {
        super.onStop();
        camera.stop();
    }
}

图片裁剪:

public void cropImage(ImageSource imageSource) {
    ImageCrop imageCrop = new ImageCrop(this);
    imageCrop.setImageSource(imageSource);
    imageCrop.setCropShape(ImageCrop.CROP_SHAPE_RECTANGLE);
    imageCrop.setAspectRatio(1, 1); // 1:1比例裁剪
    imageCrop.start();
}

这些代码展示了如何在鸿蒙系统中实现自定义相机和图片裁剪功能。

回到顶部