spostare, ridimensionare e ritagliare l'immagine in Android come immagine del profilo facebook

Question

Voglio ritagliare un'immagine nella mia applicazione. Ho provato molto ma non ci sono riuscito. La sua sfida allo sviluppatore Android. C'è qualche idea o riferimento per implementare le funzionalità spostare, ridimensionare e ritagliare l'immagine in Android come la foto del profilo di caricamento di Facebook. Ora sono in grado di spostare, ridimensionare e ritagliare l'immagine. Ma non è coerente come Facebook. Voglio impostare la scala dell'immagine fissa in base all'orientamento. Ho allegato lo screenshot-3.

Il mio codice, come di seguito: -

crop_image.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:gravity="center" 
    android:orientation="vertical" > 

    <FrameLayout 
     android:id="@+id/flCrop" 
     android:layout_width="fill_parent" 
     android:layout_height="0dp" 
     android:layout_weight="1" > 

     <ImageView 
      android:id="@+id/img" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:scaleType="matrix" 
      android:src="@drawable/nature" /> 

     <ImageView 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_gravity="center" 
      android:scaleType="fitXY" 
      android:src="@drawable/blur_with_frame" 
      android:visibility="visible" /> 

     <ImageView 
      android:id="@+id/troll_face" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginBottom="5dp" 
      android:layout_marginLeft="10dp" 
      android:layout_gravity="bottom" /> 
    </FrameLayout> 

    <LinearLayout 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:gravity="center" 
     android:orientation="horizontal" > 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:onClick="btnSelectPic" 
      android:layout_marginRight="10dp" 
      android:text="select Pic" /> 

     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_marginLeft="10dp" 
      android:onClick="btnCrop" 
      android:text="Crop" /> 
    </LinearLayout> 

</LinearLayout> 

MainActivity.java

package com.hotveryspicy.maskimage; 

import android.app.Activity; 
import android.content.Intent; 
import android.graphics.Bitmap; 
import android.graphics.BitmapFactory; 
import android.graphics.Matrix; 
import android.graphics.PointF; 
import android.net.Uri; 
import android.os.Bundle; 
import android.util.FloatMath; 
import android.util.Log; 
import android.view.MotionEvent; 
import android.view.View; 
import android.view.View.OnTouchListener; 
import android.view.ViewTreeObserver.OnGlobalLayoutListener; 
import android.widget.FrameLayout; 
import android.widget.ImageView; 
import android.widget.ImageView.ScaleType; 

import com.ipaulpro.afilechooser.utils.FileUtils; 

public class MainActivity extends Activity implements OnTouchListener{ 
    ImageView img; 
    FrameLayout flCrop; 

    int framWidth = 0; 
    int framHeight = 0; 

    int imageHeight ; 
    int imageWidth ; 

    int cropImageWidth = 320; 
    int cropImageHeight = 263; 

    public static int SELECT_PHOTO =0; 

    @Override 
    public void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.crop_image); 
     img = (ImageView) findViewById(R.id.img); 
     flCrop = (FrameLayout) findViewById(R.id.flCrop); 
     img.setOnTouchListener(this); 


    } 

    public void btnCrop(View v) { 
     ImageView troll_face = (ImageView) findViewById(R.id.troll_face); 
     makeMaskImage(troll_face, R.drawable.nature); 
    } 

    public void btnSelectPic(View v){ 
     Intent intent = new Intent(Intent.ACTION_PICK, 
       android.provider.MediaStore.Images.Media.EXTERNAL_CONTENT_URI); 
     startActivityForResult(intent, 0); 
    } 

    @Override 
    protected void onActivityResult(int requestCode, int resultCode, Intent data) { 
     super.onActivityResult(requestCode, resultCode, data); 

     switch (resultCode) { 
     case RESULT_OK: 
      Uri targetUri = data.getData(); 

      final String path = FileUtils.getPath(this, targetUri); 

      BitmapFactory.Options options = new BitmapFactory.Options(); 
      options.inJustDecodeBounds = true; 

      Bitmap bitmap = null; 
      try { 

       bitmap = BitmapFactory 
         .decodeFile(path); 
      } catch (Exception e) { 
       // TODO Auto-generated catch block 
       e.printStackTrace(); 
      } 
      imageHeight = options.outHeight; 
      imageWidth = options.outWidth; 

      img.setOnTouchListener(MainActivity.this); 

      img.setImageBitmap(bitmap); 

      break; 
     } 
    } 

    // Method of creating mask runtime 
    public void makeMaskImage(ImageView mImageView, int mContent) { 

     flCrop.setDrawingCacheEnabled(true); 
     Bitmap bitmap = Bitmap.createBitmap(flCrop.getDrawingCache()); 
     flCrop.setDrawingCacheEnabled(false); 

     Log.e("TEST", "Frame W : " + framWidth + " H : " + framHeight); 
     Log.e("TEST", 
       "Bitmap W : " + bitmap.getWidth() + " H : " 
         + bitmap.getHeight()); 

     Bitmap result = Bitmap.createBitmap(bitmap, (framWidth/2) 
       - (cropImageWidth/2) +1, (framHeight/2) 
       - (cropImageHeight/2), cropImageWidth -2, cropImageHeight); 
     mImageView.setImageBitmap(result); 
     mImageView.setScaleType(ScaleType.CENTER); 
     // mImageView.setBackgroundResource(R.drawable.frame); 
    } 





    @Override 
     public boolean onTouch(View v, MotionEvent event) { 
      // handle touch events here 
      ImageView view = (ImageView) v; 
      switch (event.getAction() & MotionEvent.ACTION_MASK) { 
       case MotionEvent.ACTION_DOWN: 
        savedMatrix.set(matrix); 
        start.set(event.getX(), event.getY()); 
        mode = DRAG; 
        lastEvent = null; 
        break; 
       case MotionEvent.ACTION_POINTER_DOWN: 
        oldDist = spacing(event); 
        if (oldDist > 10f) { 
         savedMatrix.set(matrix); 
         midPoint(mid, event); 
         mode = ZOOM; 
        } 
        lastEvent = new float[4]; 
        lastEvent[0] = event.getX(0); 
        lastEvent[1] = event.getX(1); 
        lastEvent[2] = event.getY(0); 
        lastEvent[3] = event.getY(1); 
        d = rotation(event); 
        Log.e("MainActivity","MainActivity down d = "+d); 
        break; 
       case MotionEvent.ACTION_UP: 
       case MotionEvent.ACTION_POINTER_UP: 
        mode = NONE; 
        lastEvent = null; 
        break; 
       case MotionEvent.ACTION_MOVE: 
        if (mode == DRAG) { 
         matrix.set(savedMatrix); 
         float dx = event.getX() - start.x; 
         float dy = event.getY() - start.y; 
         Log.e("TEST","Dx : "+ dx+" Dy : "+ dy); 
         matrix.postTranslate(dx, dy); 
        } else if (mode == ZOOM) { 
         float newDist = spacing(event); 
         if (newDist > 10f) { 
          matrix.set(savedMatrix); 
          float scale = (newDist/oldDist); 
          matrix.postScale(scale, scale, mid.x, mid.y); 
         } 
         if (lastEvent != null && event.getPointerCount() == 3) { 
          newRot = rotation(event); 
          Log.e("MainActivity","MainActivity move d= "+d); 
          float r = newRot - d; 
          float[] values = new float[9]; 
          matrix.getValues(values); 
          float tx = values[2]; 
          float ty = values[5]; 
          float sx = values[0]; 
          float xc = (view.getWidth()/2) * sx; 
          float yc = (view.getHeight()/2) * sx; 
          matrix.postRotate(r, tx + xc, ty + yc); 
         } 
        } 
        break; 
       default: 
        view.setImageMatrix(matrix); 
        return true; 
      } 
      view.setImageMatrix(matrix); 
      return true; 
     } 

     /** 
     * Determine the space between the first two fingers 
     */ 
     private float spacing(MotionEvent event) { 
      float x = event.getX(0) - event.getX(1); 
      float y = event.getY(0) - event.getY(1); 
      return FloatMath.sqrt(x * x + y * y); 
     } 

     /** 
     * Calculate the mid point of the first two fingers 
     */ 
     private void midPoint(PointF point, MotionEvent event) { 
      float x = event.getX(0) + event.getX(1); 
      float y = event.getY(0) + event.getY(1); 
      point.set(x/2, y/2); 
     } 

     /** 
     * Calculate the degree to be rotated by. 
     * 
     * @param event 
     * @return Degrees 
     */ 
     private float rotation(MotionEvent event) { 
      double delta_x = (event.getX(0) - event.getX(1)); 
      double delta_y = (event.getY(0) - event.getY(1)); 
      double radians = Math.atan2(delta_y, delta_x); 
      return (float) Math.toDegrees(radians); 
     } 
     // these matrices will be used to move and zoom image 
     private static Matrix matrix = new Matrix(); 
     private static Matrix savedMatrix = new Matrix(); 
     // we can be in one of these 3 states 
     private static final int NONE = 0; 
     private static final int DRAG = 1; 
     private static final int ZOOM = 2; 
     private int mode = NONE; 
     // remember some things for zooming 
     private PointF start = new PointF(); 
     private PointF mid = new PointF(); 
     private float oldDist = 1f; 
     private float d = 0f; 
     private float newRot = 0f; 
     private float[] lastEvent = null; 

     boolean flag ; 
} 

Guardando mio demo come: -

Screenshot-1

Quando lo zoom-out la sua ricerca come sotto l'immagine: - Schermata-2

esattamente di cosa sto cercando la soluzione: - Screenshot-3

Se qualcuno ha un'idea . Please help me.Thanks in advance ...

Answer 1

Non capisco perfettamente cosa stai cercando di realizzare. Ho lavorato su qualcosa di simile, I penso.

---

https://github.com/crystalpal/cropper

---

Quello che fa: Legge un'immagine da stoccaggio, la visualizza con un rettangolo di ritaglio, cerchiamo di ritagliare l'area selezionata, e salva l'immagine ritagliata. È possibile regolare la dimensione del raccoglitore e la dimensione dell'immagine salvata.

Utilizzando un intento, passare il file dell'immagine alla nuova attività. Da lì, tutto dovrebbe essere automatico.

Nota: questo progetto è stato scritto in Android 4.2, il codice è documentato, ma è consigliabile una buona conoscenza di Android. Il progetto utilizza la libreria pdf qoppa.

Answer 2

Ho preso il riferimento dal tutorial sottostante quando ho implementato la cattura dell'immagine e la funzionalità di ritaglio. Ciò sarà utile, ne sono sicuro. Fatemi sapere, se qualcuno issues.I avrebbe cercato di aiutare ulteriormente :)

http://code.tutsplus.com/tutorials/capture-and-crop-an-image-with-the-device-camera--mobile-11458

Answer 3

ho avuto un requisito analogo. Creato un componente di ritaglio usando la libreria Photoview e Cropper modificata. L'utente può selezionare l'immagine dalla Galleria o scattare una foto dalla fotocamera e ritagliare l'immagine con spostamento e ridimensionamento, in modo simile al ritaglio dell'immagine del profilo di Facebook. Condivisione del progetto su github.

Si prega di controllare il progetto github qui: https://github.com/ozeetee/AndroidImageZoomCrop