weex-image-crop-picker 扩展图片选择器,支持对相册与相机的图片进行压缩裁剪以及相册多选或视频选择等...

weex-image-crop-picker

JitPack
CocoaPods
license

由于weex market里的 weex-image-picker插件并无裁剪和多选功能,看到也是从 react-native-image-picker移植来的,并且该插件原作者推荐了功能比较多的 react-native-image-crop-picker ,于是产生了此项目。

Android

  • root目录的build.gradle增加jitpack的地址

    allprojects {
      repositories {
        ...
        maven { url 'https://jitpack.io' }
      }
    }
  • 在你的app目录的build.gradle增加一行依赖

    dependencies {
      compile com.github.voids:weex-image-crop-picker:1.0.2
    }
    // 如果提示duplicate entry,则exclude不需要的module,如下
    dependencies {
        compile('com.github.voids:weex-image-crop-picker:1.0.2') {
            exclude module: 'weex_sdk'
        }
    }
  • Application子类中注册module

    import cn.dv4.weeximagecroppicker.ImageCropPickerModule;
    // 在WXSDKEngine.initialize之后注册module
    WXSDKEngine.registerModule("imageCropPicker", ImageCropPickerModule.class);
  • 在你的WXSDKInstance所在的Activity中重载onActivityResult,否则接收不到返回结果

    @Override
    protected void onActivityResult(int requestCode, int resultCode, Intent data) {
        super.onActivityResult(requestCode, resultCode, data);
            if (mWXSDKInstance != null) {
            mWXSDKInstance.onActivityResult(requestCode, resultCode, data);
        }
    }
  • 如果需要使用camera,则需要手动在AndroidManifest.xml中添加一行权限

    <uses-permission android:name="android.permission.CAMERA"/>

iOS

  • 在Podfile增加一行依赖

    pod 'WeexImageCropPicker'
  • 更新依赖

    pod install
  • appdelegate中注册module

    #import <WeexImageCropPicker/ImageCropPicker.h>
    // 在[WXSDKEngine initSDKEnvironment] 之后注册module
    [WXSDKEngine registerModule:@"imageCropPicker" withClass:[ImageCropPicker class]];
  • 请在info.plist中自行添加权限

javascript

由于weex的扩展为callback,不支持promise,所以用法有些调整。
// example
var ImageCropPicker = weex.requireModule('imageCropPicker')
var options = {
    width: 300,
    height: 300,
    includeExif: true,
    mediaType: 'photo',
    cropping: true
}

export default {
    data: {
        result:""
    },
    methods: {
        gallery(e) {
            ImageCropPicker.openPicker(options, (response) => {
                // 成功返回 {code:'E_SUCCESS', data:{...}}
                this.result = JSON.stringify(response)
            })
        },
        camera(e) {
            ImageCropPicker.openCamera(options, (response) => {
                // 失败返回 {code:'E_PERMISSION_MISSING', message:'...'}
                this.result = JSON.stringify(response)
            })
        }
    }
}
options
PropertyTypeDescription
croppingbool (default false)是否开启图片剪裁
widthnumber剪裁后图片的宽度,cropping为true时有效
heightnumber剪裁后图片的高度,cropping 为true时有效
multiplebool (default false)是否开启多选,开启多选后裁剪功能无效
writeTempFile (ios only)bool (default true)When set to false, does not write temporary files for the selected images. This is useful to improve performance when you are retrieving file contents with the includeBase64 option and don't need to read files from disk.
includeBase64bool (default false)是否输出base64
includeExifbool (default false)是否输出图片exif信息,如gps、光圈、快门速度等
cropperActiveWidgetColor (android only)string (default "#424242")When cropping image, determines ActiveWidget color.
cropperStatusBarColor (android only)string (default #424242)When cropping image, determines the color of StatusBar.
cropperToolbarColor (android only)string (default #424242)When cropping image, determines the color of Toolbar.
freeStyleCropEnabled (android only)bool (default false)Enables user to apply custom rectangle area for cropping
cropperToolbarTitlestring (default Edit Photo)When cropping image, determines the title of Toolbar.
cropperCircleOverlaybool (default false)是否裁剪时开启遮罩
minFiles (ios only)number (default 1)Min number of files to select when using multiple option
maxFiles (ios only)number (default 5)Max number of files to select when using multiple option
waitAnimationEnd (ios only)bool (default true)Promise will resolve/reject once ViewController completion block is called
smartAlbums (ios only)array (supported values: ['PhotoStream', 'Generic', 'Panoramas', 'Videos', 'Favorites', 'Timelapses', 'AllHidden', 'RecentlyAdded', 'Bursts', 'SlomoVideos', 'UserLibrary', 'SelfPortraits', 'Screenshots', 'DepthEffect', 'LivePhotos', 'Animated', 'LongExposure']) (default ['UserLibrary', 'PhotoStream', 'Panoramas', 'Videos', 'Bursts'])List of smart albums to choose from
useFrontCamera (ios only)bool (default false)Whether to default to the front/'selfie' camera when opened
compressVideoPreset (ios only)string (default MediumQuality)Choose which preset will be used for video compression
compressImageMaxWidthnumber (default none)图片压缩指定最大宽度
compressImageMaxHeightnumber (default none)图片压缩指定最大高度
compressImageQualitynumber (default 1)图片压缩质量 (取值范围 0 — 1,1为最好质量)
loadingLabelText (ios only)string (default "Processing assets...")Text displayed while photo is loading in picker
mediaTypestring (default any)媒体选择类型: 'photo'=照片, 'video'=视频, 'any'=全部
showsSelectedCount (ios only)bool (default true)Whether to show the number of selected assets
showCropGuidelines (android only)bool (default true)Whether to show the 3x3 grid on top of the image during cropping
hideBottomControls (android only)bool (default false)Whether to display bottom controls
enableRotationGesture (android only)bool (default false)Whether to enable rotating the image by hand gesture
参数均与 react-native-image-crop-picker 文档中所列的参数保持一致

注:跟原插件的android部份一样,并未实现视频压缩,因为ffmpeg太慢并且需要licence

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值