On my app, I render a div content into an image using the dom-to-image plugin.
I coudn’t think of another way to pick the rendered image and save on the device, so here’s my code.
80% of the devices create the storage folder and the code run just fine, but I don’t know why the others don’t.
$scope.baseString = '';
renderContainer = function(){
var $node = document.getElementById('container');
domtoimage.toPng($node)
.then(function (dataUrl) {
$scope.baseString = dataUrl;
createFolderIntoDevice();
});
};//renderContainer
createFolderIntoDevice = function(){
window.resolveLocalFileSystemURL(
cordova.file.externalRootDirectory,
onRequestFileSystemSuccess,
null);
};//createFolderIntoDevice
onRequestFileSystemSuccess = function (fileSystem) {
var entry = fileSystem;
entry.getDirectory("TestFolder", {
create: true,
exclusive: false
}, onGetDirectorySuccess, onGetDirectoryFail );
};//onRequestFileSystemSuccess
onGetDirectorySuccess = function (dir) {
saveCardIntoDevice($scope.baseString);
};//onGetDirectorySuccess
onGetDirectoryFail = function(error) {
alert("Error creating directory "+error.code);
};//onGetDirectoryFail
saveContainerIntoDevice = function(baseString){
var myBaseString = baseString,
block = myBaseString.split(";"),
dataType = block[0].split(":")[1],
realData = block[1].split(",")[1],
folderpath = "file:///storage/emulated/0/TestFolder/",
filename = 'Container' + Math.floor(Math.random() * (1000 - 143)) + 143 + '.png';
savebase64AsImageFile(folderpath,filename,realData,dataType);
};//saveContainerIntoDevice
savebase64AsImageFile = function(folderpath,filename,content,contentType){
// Convert the base64 string in a Blob
var DataBlob = b64toBlob(content,contentType);
window.resolveLocalFileSystemURL(folderpath, function(dir) {
dir.getFile(filename, {create:true}, function(file) {
file.createWriter(function(fileWriter) {
fileWriter.write(DataBlob);
}, function(){
//error
});
});
});
};//savebase64AsImageFile
b64toBlob = function (b64Data, contentType, sliceSize) {
contentType = contentType || '';
sliceSize = sliceSize || 512;
var byteCharacters = atob(b64Data);
var byteArrays = [];
for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
var slice = byteCharacters.slice(offset, offset + sliceSize);
var byteNumbers = new Array(slice.length);
for (var i = 0; i < slice.length; i++) {
byteNumbers[i] = slice.charCodeAt(i);
}
var byteArray = new Uint8Array(byteNumbers);
byteArrays.push(byteArray);
}
var blob = new Blob(byteArrays, {type: contentType});
return blob;
};//b64toBlob
I compiled this to Android 4.4