美文网首页
头像裁剪上传功能

头像裁剪上传功能

作者: Lost_Robot | 来源:发表于2020-06-23 15:46 被阅读0次

头像裁剪上传功能在现在的App中基本都要用到,今天总结了一下,用比较简单实用的方式(调用系统API)来实现需求。这样做简单,但是不同的手机和系统上裁剪和选择图片的方式有一些区别。

首先来看一下效果图

相册里的图片本身像素比较低,后面是剪切之后强行放大的效果,所以看着比较模糊,实际问题上要计算好剪切的图片的大小。

image

分析一下需求

主要有三个步骤:1.获取图片。2.裁剪图片。3.显示和上传

  • 1.获取图片,拍照和从相册获取。没啥好说的,调用系统。

  • 2.裁剪图片。这个可以用系统自带的,也可以用第三方框架。相比来说还是用系统自带的比较简单一些,下面介绍的也是用系统的。第三方框架可以使用这个 android-cropuCrop 或者这个cropper ,怎么使用请看Demo。

  • 3.显示和上传。这个就不用我说了吧。

具体实现

1. 获取图片
  • 拍照,调用相机拍照

    // 创建打开系统相机的意图                
    Intent takeIntent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE);
    // 设置参数。将拍照所得的照片存到磁盘中;照片文件的位置,此处是在外置SD卡
    takeIntent.putExtra(MediaStore.EXTRA_OUTPUT, Uri.fromFile(new File(getExternalCacheDir(), HEAD_ICON_NAME)));
    // 调用系统相机
    startActivityForResult(takeIntent, REQUESTCODE_TAKE);
    
    
  • 从系统图库中选择一张图片

    
    // 创建打开系统图库的意图
    Intent pickIntent = new Intent(Intent.ACTION_PICK, null);
    // 设置Intent的参数,选择MediaStore中的图片
    pickIntent.setDataAndType(MediaStore.Images.Media.EXTERNAL_CONTENT_URI, "image/*");
    // 开启意图
    startActivityForResult(pickIntent, REQUESTCODE_PICK);
    
    
2. 裁剪图片
    1.得到图片

     /**
      * 获取图片,根据两种不同的情况下的requestCode分别获取图片
      */
     protected void onActivityResult(int requestCode, int resultCode, Intent data) {
         switch (requestCode) {
             case REQUESTCODE_PICK:// 直接从相册获取
                 try {
                       // 裁剪图片,相机返回的intent就是URI
                     startPhotoZoom(data.getData());
                 } catch (NullPointerException e) {
                     e.printStackTrace();// 用户点击取消操作时的异常
                 }
                 break;
             case REQUESTCODE_TAKE:// 调用相机拍照
               // 我们刚刚调用相机拍照的效果是将图片存到磁盘中,此时把图片拿出来
                 File temp = new File(getExternalCacheDir(), HEAD_ICON_NAME);
               // 转成URI给下面的裁剪图片的方法调用
                 startPhotoZoom(Uri.fromFile(temp));
                 break;
             case REQUESTCODE_CUTTING:// 取得裁剪后的图片
                 if (data != null) {
                     //setPicToView(data);
                     showIcon();
                 }
                 break;
         }
         super.onActivityResult(requestCode, resultCode, data);
     }

 2.裁剪图片

      mImageUri = Uri.fromFile(new File(getExternalCacheDir(), HEAD_ICON_NAME));

     /**
      * 裁剪图片方法实现
      *
      * @param uri 要裁剪的图片的URI
      */

     public void startPhotoZoom(Uri uri) {
         Intent intent = new Intent("com.android.camera.action.CROP");
         // crop=true是设置在开启的Intent中设置显示的VIEW可裁剪
         intent.setDataAndType(uri, "image/*");
         intent.putExtra("crop", "true");
         // aspectX aspectY 是宽高的比例
         intent.putExtra("aspectX", 1);
         intent.putExtra("aspectY", 1);
         // outputX outputY 是裁剪图片宽高,这里可以将宽高作为参数传递进来
         intent.putExtra("outputX", 600);
         intent.putExtra("outputY", 600);

         // 其实加上下面这两句就可以实现基本功能,
         //但是这样做我们会直接得到图片的数据,以bitmap的形式返回,在Intent中。而Intent传递数据大小有限制,1kb=1024字节,这样就对最后的图片的像素有限制。
         //intent.putExtra("return-data", true);
         //intent.putExtra(MediaStore.EXTRA_OUTPUT, tempUri);

         // 解决不能传图片,Intent传递数据大小有限制,1kb=1024字节
         // 方法:裁剪后的数据不以bitmap的形式返回,而是放到磁盘中,更方便上传和本地缓存
         // 设置裁剪后的数据不以bitmap的形式返回,剪切后图片的位置,图片是否压缩等
         intent.putExtra("return-data", false);
         intent.putExtra(MediaStore.EXTRA_OUTPUT, mImageUri);
         intent.putExtra("outputFormat", Bitmap.CompressFormat.JPEG.toString());
         intent.putExtra("noFaceDetection", true);

         // 调用系统的图片剪切
         startActivityForResult(intent, REQUESTCODE_CUTTING);
     }

3. 获取裁剪后的图片并显示和上传

刚刚我们已经获得了裁剪后的图片的磁盘的位置,直接显示和上传就行了

  protected void onActivityResult(int requestCode, int resultCode, Intent data) {
      switch (requestCode) {
          case REQUESTCODE_PICK:// 直接从相册获取
              ... 
              break;
          case REQUESTCODE_TAKE:// 调用相机拍照
              ... 
              break;
          case REQUESTCODE_CUTTING:// 取得裁剪后的图片
              showIcon();// 显示图片,具体的代码就不写了
              upLoadIcon(); // 上传图片,具体的代码就不写了,随便用什么上传
              break;
      }
      super.onActivityResult(requestCode, resultCode, data);
  }

总的来说过程还是很简单的,一直在调用系统的API,来完成我们的需求

相关文章

  • AndroidHeadImageCliper

    GIT地址 功能描述:头像上传在APP中是很常见的功能,但是关于头像上传前的图片裁剪方式,如果使用系统提供的裁剪方...

  • 头像裁剪上传功能

    头像裁剪上传功能在现在的App中基本都要用到,今天总结了一下,用比较简单实用的方式(调用系统API)来实现需求。这...

  • Android实现头像上传

    Android实现本地上传图片并设置为圆形头像 Android实现类似换QQ头像功能(图片裁剪) android上...

  • Image

    设置头像 一、头像设置流程流程一般包括头像选择、上传、裁剪、预览四个步骤,UI界面至少给用户裁剪和预览。 1.选择...

  • Android 相机或相册选择图片裁剪

    背景这是一个我们经常使用的功能,比如上传头像、身份证,本功能可选择相机或相册图片后,进入裁剪页面,并可返回Bitm...

  • node+vue用户头像处理上传并保存

    2017年7月14日19:21:29 ,最近做个网站,需要有用户头像裁剪上传功能,具体流程是用户在本地选择图片,前...

  • (五)Node接口搭建——使用全球公认头像gravatar

    本节主要内容:头像处理 前提:在https://en.gravatar.com/注册账号,然后上传头像,裁剪选择p...

  • vue图片裁剪组件me-image-crop

    头像的裁剪编辑功能是一般项目中的基础功能,所以使用vue开发了一个头像裁剪组件,使用npm安装。有需要的同学可以下...

  • 2018-07-10

    二分党建APP 1、头像上传新增裁剪功能 2、APP录像模块 新增关键字查询 3、个人资料保存、预约会议保存按钮更...

  • 小米note3上传头像失败

    最近项目中有涉及到头像上传裁剪的功能,20180117_182904.jpg按照这一段代码写的话,出现了一些问题,...

网友评论

      本文标题:头像裁剪上传功能

      本文链接:https://www.haomeiwen.com/subject/hvshfktx.html