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

Flink流处理
• 阅读 4761

weex-image-crop-picker

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

由于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
Property Type Description
cropping bool (default false) 是否开启图片剪裁
width number 剪裁后图片的宽度,cropping为true时有效
height number 剪裁后图片的高度,cropping 为true时有效
multiple bool (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.
includeBase64 bool (default false) 是否输出base64
includeExif bool (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
cropperToolbarTitle string (default Edit Photo) When cropping image, determines the title of Toolbar.
cropperCircleOverlay bool (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
compressImageMaxWidth number (default none) 图片压缩指定最大宽度
compressImageMaxHeight number (default none) 图片压缩指定最大高度
compressImageQuality number (default 1) 图片压缩质量 (取值范围 0 — 1,1为最好质量)
loadingLabelText (ios only) string (default "Processing assets...") Text displayed while photo is loading in picker
mediaType string (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

点赞
收藏
评论区
推荐文章
梦
4年前
微信小程序new Date()转换时间异常问题
微信小程序苹果手机页面上显示时间异常,安卓机正常问题image(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/b691e1230e2f15efbd81fe11ef734d4f.png)错误代码vardate'2021030617:00:00'vardateT
马丁路德 马丁路德
4年前
小程序 - 保存图片到相册
在做小程序项目的时候,有需求要做一个开票功能,开票之后自然就需要查看发票,在让后台做成图片返回之后,我想了一下,查看发票除了需要看发票图片,提供预览图片可以放大缩小看外,最好应该还要有一个保存图片的功能吧。刚好微信小程序提供了预览和保存相册两个API,就正好用上。因为预览比较简单,我就只是把保存相册的开发流程写下来,供大家也供自己往后参考了,有什
java一生之敌 java一生之敌
2年前
JVM的内存模型和优化方式
一、JVM的内存模型1.!图片(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/52b2220f04010eb329efbef966f9fa40.png)其中s0,s1为幸
Stella981 Stella981
3年前
KaliTools说明书+BurpSuit实战指南+SQL注入知识库+国外渗透报告
!(https://oscimg.oschina.net/oscnet/d1c876a571bb41a7942dd9752f68632e.gif"15254461546.gif")0X00KaliLinux Tools中文说明书!(https://oscimg.oschina.net/oscnet/
Wesley13 Wesley13
3年前
unity调用移动端相册并且裁剪图片
最近有个需求需要从手机上获取相册图片,并且需要传回到Unity中,经过几天的开发终于完成,以下为开发的记录:工具版本Unity5.6安卓AndroidStudio3.0 Unity导出Gradle项目使用gradle:2.3.3compileSdkVe
Stella981 Stella981
3年前
Android 图片选择器,丰富的配置选项,极大程度的简化使用
最近也是刚好项目用到,于是就动手写了一个Android图片选择器的库。支持图库多选/单选/图片裁剪/拍照/自定义图片加载库,极大程度的简化使用。截图!输入图片说明(https://github.com/smuyyh/ImageSelector/blob/master/screenshot/screen.png?rawtrue"在这里输入
Stella981 Stella981
3年前
Sass
嵌套规则(NestedRules)Sass允许将一套CSS样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器mainp{color:00ff00;width:97%;.redbox{
Stella981 Stella981
3年前
Android从相机或相册获取图片裁剪
package com.only.android.app; import java.io.File; import android.app.Activity;import android.app.AlertDialog;import android.content.DialogInterfa
新支点小玉 新支点小玉
1年前
CNAS资质认证,快速出证,欢迎咨询
!11284(https://imghelloworld.osscnbeijing.aliyuncs.com/imgs/4e90dd6f80dd2c80bdd3dc5e7d686a41.jpg)
融云IM即时通讯 融云IM即时通讯
5个月前
融云IM干货丨uni-app有哪些常用的插件?
uniapp拥有丰富的插件生态,以下是一些常用的插件推荐:1.图片编辑插件:BaImageEditor:功能强大的uniapp图片编辑插件,支持涂鸦、贴图、滤镜、裁剪、旋转、添加文字、美颜等。BaImagePaint:uniapp图片涂鸦、画笔插件,支持大