Android 5.0 camera plugin images not shown


#1

Using the newest version of https://github.com/apache/cordova-plugin-camera and Android Cordova 3.7.1 I am getting getting images from the camera or gallery by ngCordova:

$cordovaCamera.getPicture

with Camera.DestinationType.FILE_URI.
I then push the URI into an array to display it in a modal.
On Android 4.4.4 and 4.3 this works as intended. The pictures are immediately displayed.
On Android 5.0 (device and genymotion) however, the images are not displayed but I see

What is the solution to this?

EDIT: Okay the normal img tag works as intended. The problem seems to be the direcitve I’m using to scale down the pictures: <scale-image url="picUri" percent="42"></scale-image>

.directive("scaleImage", [
    '$http',
    function ($http) {
        return {
            restrict: 'E',
            scope: {
                percent: '&',
                url: '&'
            },
            template: '<img ng-src="{{ src }}" />',
            link: function (scope, elm, attrs) {
                var img;

                scope.$watch(function () {
                    // Because we're returning an object we need to deep watch.
                    return {
                        percent: scope.percent(),
                        url: scope.url()
                    }
                }, function (value) {
                    if (!value.percent || !value.url) {
                        return;
                    }

                    // Remove the old one, if any.  Should hopefully fix any memory leaks related to
                    // creating an element.
                    if (img) {
                        img.remove();
                    }

                    img = angular.element('<img style="display: none" src="' + value.url + '">');
                    //elm.append(img);

                    $http.get(value.url).then(function () {
                        var canvas, ctx, neededHeight, neededWidth;
                        neededHeight = img[0].naturalHeight * value.percent / 100;
                        neededWidth = img[0].naturalWidth * value.percent / 100;
                        canvas = document.createElement("canvas");
                        canvas.width = neededWidth;
                        canvas.height = neededHeight;
                        ctx = canvas.getContext("2d");
                        ctx.drawImage(img[0], 0, 0, neededWidth, neededHeight);
                        scope.src = canvas.toDataURL("image/jpeg");
                    });

                }, true); // true to deep watch
            }
        };
    }
]);

I don’t really expect someone to dig through this. But I wanted to post this anyway since I cannot delete the thread…


#2

we’ve been having issues with Android 5.0+ and both the camera and image picker not working at all… is the camera opening up for you?