HarmonyOS第三方组件——鸿蒙图片裁剪组件ohos-Image-Cropper

前言

基于安卓的平台的图片裁剪组件(https://github.com/ArthurHub/Android-Image-Cropper),实现了鸿蒙平台的迁移和重构,代码已经开源到(https://gitee.com/isrc_ohos/android-image-cropper_ohos),欢迎各位开发者下载使用并提出宝贵意见~

背景

ohos-Image-Cropper组件是个简单、灵活、高效的图片裁剪工具,支持图片在裁剪前进行裁剪框移动、旋转、翻转(水平、垂直)的操作,并将最终裁剪结果反馈给用户。

Sample解析

在Sample中,向用户提供了三个界面,分别是:初始界面、功能选择界面、效果展示界面。初始界面包含一个按钮,点击可进入功能选择界面。功能选择界面可对图片进行裁剪、旋转、水平翻转、垂直翻转等操作。当用户选择图片裁剪功能时,会跳转到效果展示界面,展示裁剪后的图片。

1. 如何跳转至功能选择界面?

CropImage是个工具类,可以实现页面跳转功能。此处可以将下面代码放入Button按钮的点击事件中,执行下面代码可以实现从用户的初始界面跳转至功能选择界面。

CropImage.activity()  //初始化CropImage类         
    .setContext(this)//设置上下文               
    .setSource(ResourceTable.Media_baochi)//传入被裁减图片的ID         
    .setBundleName("com.huawei.mytestproject")//传入包名         
    .setAbilityName("com.huawei.mytestproject.MainAbility")//传入类名         
    .setRequset_code(1234)//请求参数设置         
    .start(super.getAbility(),this);//启动跳转

关于上代码有三点需要注意,一是:为了方便大家使用模拟器运行Sample,被裁减图片使用在鸿蒙的资源管理器ResourceTable中注册过的图片。图片需放在APP项目资源文件夹resource/base/media下面,ResourceTable会扫描资源文件夹,并为每个资源注册一个int型的数值作为资源id。图1展示了图片所在位置,图二展示了图片在ResourceTable中的注册。二是:代码中传入的包名和类名是用于指定图片裁剪后返回的Ability(即效果展示界面)。三是:被裁减图片必须为正方形。

图1. 被裁减图片存放位置

图2. 被裁减图片在ResourceTable中的注册

2. 如何跳转至效果展示界面?

当裁剪完毕时,会根据用户提供的包名和类名跳转至效果展示界面,来展示裁剪后的图片。具体使用代码参照如下:

//裁剪方法 
private void crop(Intent intentOriginal) 
{ ..
  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
你好!关于Vue裁剪组件,我推荐你使用vue-cropper组件。它是一个功能强大且易于使用的图片裁剪工具,可以在Vue项目中方便地集成和使用。 Vue-cropper提供了一些常见的图片裁剪功能,包括缩放、旋转、翻转、裁剪框调整等。你可以使用它来实现用户上传图片后的裁剪操作,适用于头像上传、图片编辑等场景。 使用vue-cropper组件很简单,首先你需要安装它: ``` npm install vue-cropper ``` 然后,在你的Vue组件中引入并使用它: ```vue <template> <div> <vue-cropper ref="cropper" :src="imageUrl" :config="cropperConfig" ></vue-cropper> <button @click="cropImage">裁剪图片</button> </div> </template> <script> import VueCropper from 'vue-cropper'; export default { components: { VueCropper, }, data() { return { imageUrl: 'https://example.com/image.jpg', cropperConfig: { aspectRatio: 1, // 裁剪框宽高比例 viewMode: 1, // 显示模式:0表示自由模式,1表示限制裁剪框在图片内 dragMode: 'move', // 拖拽模式 }, }; }, methods: { cropImage() { const cropper = this.$refs.cropper.getCropper(); const croppedImageData = cropper.getCroppedCanvas().toDataURL(); // 处理裁剪后的图片数据 }, }, }; </script> ``` 以上是一个简单的示例代码,其中`imageUrl`是待裁剪图片地址,`cropperConfig`是裁剪工具的配置选项。你可以根据自己的需求自定义配置。 在裁剪按钮点击事件中,我们通过`this.$refs.cropper.getCropper()`获取裁剪实例,然后使用`.getCroppedCanvas().toDataURL()`方法获取裁剪后的图片数据,你可以根据需要对其进行进一步的处理。 希望这个组件能满足你的需求,如果还有其他问题,请随时提问!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值