Camera orientation landscape problem CanvasCameraPlugin

cordova
1

Hi, i’m developing an app with this plugin: https://github.com/donaldp24/CanvasCameraPlugin

Everything seems ok, until i use my ipad in landscape orientation.
The plugin offers some options to set width and height, but i can’t set right dimensions neither with CSS.
The camera preview is rotated (upside down) and it’s much higher than the screen.

Does anyone know how to set canvas dimensions?

2

Hi b82,

I tray to use this plugin, but having injector erreur.
bellow steps i followed.
thanks a lot for help.

Best

1/ install the plugin
cordova plugin add https://github.com/donaldp24/CanvasCameraPlugin.git && cordova prepare

2/ included js file into index.html

3/ included ‘CanvasCamera’ into app.js
angular.module(‘starter’, [‘ionic’, ‘starter.controllers’, ‘starter.services’, ‘ngCordova’, ‘CanvasCamera’])

4/ change controller
angular.module(‘starter.controllers’, [])

.controller(‘DashCtrl’, function($scope) {
/*
canvasMain = document.getElementById(“camera”);
CanvasCamera.initialize(canvasMain);
*/
// have to call initialize function with canvas object
var objCanvas = document.getElementById(“camera”);
window.plugin.CanvasCamera.initialize(objCanvas);

// define options
var opt = {
    quality: 75,
    destinationType: CanvasCamera.DestinationType.DATA_URL,
    encodingType: CanvasCamera.EncodingType.JPEG,
    saveToPhotoAlbum:true,
    correctOrientation:true,
    width:640,
    height:480
};
window.CanvasCamera.start(options);

onChangeDevicePosition = function() {

    var newDevicePosition = CanvasCamera.CameraPosition.BACK;
    if (document.getElementById("deviceposition_back").checked)
    {
        newDevicePosition = CanvasCamera.CameraPosition.BACK;
    }
    else if (document.getElementById("deviceposition_front").checked)
    {
        newDevicePosition = CanvasCamera.CameraPosition.FRONT;
    }
    //
    window.plugin.CanvasCamera.setCameraPosition(newDevicePosition);
}

onChangeFlashMode = function() {

    var newFlashMode = CanvasCamera.FlashMode.OFF;
    if (document.getElementById("flashmode_off").checked)
    {
        newFlashMode = CanvasCamera.FlashMode.OFF;
    }
    else if (document.getElementById("flashmode_on").checked)
    {
        newFlashMode = CanvasCamera.FlashMode.ON;
    }
    else if (document.getElementById("flashmode_auto").checked)
    {
        newFlashMode = CanvasCamera.FlashMode.AUTO;
    }

    window.plugin.CanvasCamera.setFlashMode(newFlashMode);
}

onTakePicture = function() {
    window.plugin.CanvasCamera.takePicture(onTakeSuccess);
}

onTakeSuccess = function(data) {
  image.src = "data:image/jpeg;base64," + data; // options.encodingType == CanvasCamera.EncodingType.JPEG
  // image.src = "data:image/png;base64," + data; // options.encodingType == CanvasCamera.EncodingType.PNG
}

})

5/ my html template



Apache Cordova



Connecting to Device


Device is Ready


         <h2> Camera Position </h2>
         <input type="radio" name="deviceposition" id="deviceposition_back" value="Back" onclick="onChangeDevicePosition();"/>
         <label for="deviceposition_back">Back</label>
         <br/>
         <input type="radio" name="deviceposition" id="deviceposition_front" value="Front" onclick="onChangeDevicePosition();"/>
         <label for="deviceposition_front">Front</label>


         <h2> Flash Mode </h2>
         <input type="radio" name="flashmode" id="flashmode_off" value="Off" onclick="onChangeFlashMode();"/>
         <label for="flashmode_off">Off</label>
         <br/>
         <input type="radio" name="flashmode" id="flashmode_on" value="On" onclick="onChangeFlashMode();"/>
         <label for="flashmode_on">On</label>
         <br/>
         <input type="radio" name="flashmode" id="flashmode_auto" value="Auto" onclick="onChangeFlashMode();"/>
         <label for="flashmode_auto">Auto</label>
         <br/>

         <input type="button" value="Take a picture" onclick="onTakePicture();" />


     </div>

 <!— camera preview canvas —>
     <canvas id="camera" width="352" height="288" style="border:2px"></canvas>
3

hi ionics!
no idea?!

4

Did you ever figure this out in the end?

5

no. no way for me.
what about you?