I’m trying to save an image file to the photo gallery on iOS and Android. I’d be happy enough if I could provoke a prompt, such as when you tap and hold an image in Safari on iOS.
Is there a pure javascript way of doing this, or will I have to use a plugin?
This is perhaps more a Cordova question than an Ionic question, but I was hoping to find an “Ionic-y” solution. Something I could invoke from within a controller, for instance.
Thanks for the help.
Yeah, you’re going to need to use the cordova plugin for this, but you can use ngcordova.
http://ngcordova.com/docs/#Camera
The currently recommended method is using Capacitor’s Camera capability. The entire process of making a gallery app is documented here.
The camera plugin with ngCordova doesn’t support separate storage of images, does it? To clarify, I don’t want to take an image, but rather store an image downloaded from some web source to the camera roll / photo gallery.
As far as I can tell, there’s no specific plugin included in ngCordova that does this. I’ll go have a look on PlugReg.
Thanks again!
Any updates?
The title makes it clear that we want to save an image (maybe downloaded from server and display in In-App-Browser by Cordova) into the ‘Gallery’
I ended up using the [Canvas2ImagePlugin][1], which appeared to be the only reliable way to save to the gallery on both Android and iOS at the time I wrote the original forum post.
This does have the advantage that you have to stick the image into a canvas first, but since I needed to display a preview of the image as well as perform a resize-to-fill, I did it all together with canvas.
[1]: https://github.com/devgeeks/Canvas2ImagePlugin
Thank you, I’ll look into it later.
I found another way a few hours ago, article here
According to this article this function meets my requirement:
$scope.openLinkInBrowser = function(link){
// either of below method is working
// 1. use window.open
// window.open(link, '_system', 'location=yes');
// 2. cordovaInAppBrowser function
$cordovaInAppBrowser.open(link, '_system').then(function(event) {
// success
}, function(event) {
// error
});
};
The only downside is it has to jump out of the app. I suppose the Canvas2ImagePlugin you recommended can resolve?
It does solve that problem as it doesn’t require any user interaction and doesn’t leave the app. This is the same way that UIImageWriteToSavedPhotosAlbum() works on iOS.
Having said all that. It would be great to have an ngCordova interface to something that could do all this without requiring the developer to manually create a canvas to resize their image, etc. Can’t promise anything, but I’ll look into it.
this seems like we should be able to do it via the cordovaFile plugin. I am tryig, with no success like this:
$scope.shareSave =function(){
card = $scope.data.cards[$ionicSlideBoxDelegate.currentIndex()];
image = "www/img/deck/" + card.image;
$cordovaFile.createFile(cordova.file.documentsDirectory + "wisdom.png", true).then(function(result) {
var alertPopup = $ionicPopup.alert({
title: 'created!'
});
}, function(err) {
var alertPopup = $ionicPopup.alert({
title: "creation error: " + err
});
});
$cordovaFile.writeFile(cordova.file.documentsDirectory, image ).then(function(result) {
var alertPopup = $ionicPopup.alert({
title: 'written!'
});
}, function(error) {
var alertPopup = $ionicPopup.alert({
title: 'error writing : ' + error.message + cordova.file.documentsDirectory + image
});
});
}
But it isn’t saving to the photo gallery. I think i might be using the wrong file paths and sending the location rather than the image data. Does anybody have any handy hints?
Hello HappiWill
Did you manage to solve it? Same issue here.
Semin
Any success ? same issue here
Detailed articles here explaining how to create an image gallery with Ionic:
http://devdactic.com/images-videos-fullscreen-ionic/
http://devdactic.com/ionic-image-zooming/
Hey @hds ,
i want to save the the image from URL to android gallery internal storage. If your code works can you share this part of your code. Thanks
Hmm … I’m trying to do the same thing. I have a base64 string I want to save as file on the device. I came across this:
It works in my ios simulator. But when I test this in ionic view, it fails.
here is the solution to save image from URL using cordova file transfer.
var exampleApp=angular.module(‘starter’, [‘ionic’])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
});
exampleApp.controller(“FileController”, function($scope, $ionicLoading) {
$scope.url=“http://papers.com.pk/xads/2015/8-10/Express/1103007127-1.jpg”;
var filename = $scope.url.split("/").pop();
alert(filename);
$scope.download = function() {
window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function(fs) {
fs.root.getDirectory(
“papers”,
{
create: true
},
function(dirEntry) {
dirEntry.getFile(
filename,
{
create: true,
exclusive: false
},
function gotFileEntry(fe) {
var p = fe.toURL();
fe.remove();
ft = new FileTransfer();
ft.download(
encodeURI($scope.url),
p,
function(entry) {
Pace.restart();
$scope.imgFile = entry.toURL();
},
function(error) {
alert("Download Error Source -> " + error.source);
},
false
);
},
function() {
$ionicLoading.hide();
console.log("Get file failed");
}
);
}
);
},
function() {
$ionicLoading.hide();
console.log("Request for filesystem failed");
});
}
});
@usman10 thanks for the code
So I’ve tested it … I think it’s working (in the simulator) … Just to make clear … It will download a file to the application folder?
How do I save this file to the camera roll
It will create folder in your internal storage with the folder name ‘Papers’ . But you can choose any name for your folder
fs.root.getDirectory(
“papers”,
but pictures will not show in gallery because of the media scanner problem in android. In android we have to start media scanner manually through coding or you can install scan media app form play store . But i am working on this problem. I will update when i found the solution.
oh … forgot to say … I’m on IOS 
i think it will work on IOS also. And in IOS pictures will show in gallery too. You can give this code a try.
i found the solution how to add downloaded images to gallery. you have to add one function in FileTransfer.java file. i uploaded a image just make changes in this portion of your FileTransfer.java file.
Have you solved this problem?
