2017-01-11 1 views
2

Standardmäßig nimmt die react-native-camera Fotos im Standard-Seitenverhältnis des Telefons auf und gibt sie in Base64 png aus, wenn das Ziel Camera.constants.CaptureTarget.memory festgelegt ist.Aufnehmen eines quadratischen Fotos mit der nativen Kamera

Ich bin auf der Suche nach einer Möglichkeit, Quadrat Fotos zu erstellen - entweder direkt mit der Kamera oder durch Umwandlung der erfassten . Ich bin mir nicht sicher, ob sowas mit React Native möglich ist, oder ich sollte stattdessen komplett auf nativen Code zurückgreifen.

Die aspect Requisite ändert nur, wie das Kamerabild im Sucher angezeigt wird.

Hier ist mein Code:

<Camera 
    ref={(cam) => { 
    this.cam = cam; 
    }} 
    captureAudio={false} 
    captureTarget={Camera.constants.CaptureTarget.memory} 
    aspect={Camera.constants.Aspect.fill}> 
</Camera>; 

async takePicture() { 
    var imagedata; 
    try { 
    var imagedata = await this.cam.capture();// Base64 png, not square 
    } catch (err) { 
    throw err; 
    } 
    return imagedata; 
} 
+0

prüfen diese integrierte Dienstprogramm - [ImageEditor.cropImage] (https://facebook.github.io/react-native/docs/imageeditor.html), habe ich es nicht benutzt, aber es sieht, dass Sie können damit das Bild auf das Quadrat zuschneiden. –

+1

Es sieht so aus, als ob der ImageEditor nur mit Bildern im ImageStore funktioniert. Für ein Base64-Image, das an den URI-Parameter übergeben wird, wird 'Kein geeigneter Image-URL-Loader gefunden für (Null)' -Fehler ausgelöst. –

+0

@PeterGerhat: Haben https://github.com/ivpusic/react-native-image-crop-picker geschaut? –

Antwort

1

Verwenden Sie die getSize Methode auf dem Bild und geben die Daten an die cropImage Methode der Imageeditor.

Mit Blick auf das cropData-Objekt können Sie sehen, dass ich die Breite des Bildes als Wert für die Breite und Höhe übergebe und ein perfektes quadratisches Bild erzeuge.

Das Versetzen der Y-Achse ist erforderlich, damit die Mitte des Bildes abgeschnitten wird und nicht die Oberseite. Wenn Sie die Höhe in zwei Hälften teilen und dann die Hälfte der Bildgröße von dieser Zahl subtrahieren ((h/2) - (w/2)), sollten Sie sicherstellen, dass Sie immer von der Bildmitte aus beschneiden Welches Gerät verwendest du?

Image.getSize(originalImage, (w,h) =>{ 
    const cropData = { 
     offset: {x:0,y:((h/2) - (w/2))}, 
     size: {width:w,height:w} 
    } 
    ImageEditor.cropImage(originalImage, cropData, 
    (successURI) => { 
     //successURI contains your newly cropped image 
    }, 
    (error) => { 
    console.log(error); 
    }) 
}) 
Verwandte Themen