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…