Camera orientation landscape problem CanvasCameraPlugin

Hi, i’m developing an app with this plugin:

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?

Hi b82,

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


1/ install the plugin
cordova plugin add && cordova prepare

2/ included js file into index.html

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

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

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

// define options
var opt = {
    quality: 75,
    destinationType: CanvasCamera.DestinationType.DATA_URL,
    encodingType: CanvasCamera.EncodingType.JPEG,

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;

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;


onTakePicture = function() {

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>
         <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>
         <input type="radio" name="flashmode" id="flashmode_on" value="On" onclick="onChangeFlashMode();"/>
         <label for="flashmode_on">On</label>
         <input type="radio" name="flashmode" id="flashmode_auto" value="Auto" onclick="onChangeFlashMode();"/>
         <label for="flashmode_auto">Auto</label>

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


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

hi ionics!
no idea?!

Did you ever figure this out in the end?

no. no way for me.
what about you?