Canvas not updating after camera used (Android / Ionic) - ionic-framework

Question

I am trying to draw a scaled photo onto a canvas. However, the canvas will not update after I use the camera object to take the photo. Here's my camera code:
public openCamera() {
// do we have permission to access the camera?
this.androidPermissions.checkPermission(this.androidPermissions.PERMISSION.CAMERA).then(
result => console.log('openCamera > has camera permission: ', result.hasPermission),
err => this.androidPermissions.requestPermission(this.androidPermissions.PERMISSION.CAMERA)
);
this.androidPermissions.requestPermissions([this.androidPermissions.PERMISSION.CAMERA, this.androidPermissions.PERMISSION.GET_ACCOUNTS]);
const options: CameraOptions = {
quality: 100,
correctOrientation: true,
destinationType: this.camera.DestinationType.FILE_URI,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE
}
let file_ext: string = null;
if (options.encodingType == EncodingType.JPEG) {
file_ext = "jpg";
console.log("openCamera > file_ext: ", file_ext);
}
else if (options.encodingType == EncodingType.PNG) {
file_ext = "png";
console.log("openCamera > file_ext: ", file_ext);
}
else {
this.presentAlert("Warning", "Unsupported image encoding type.");
return;
}
// photo already taken?
if (this.photo == null) {
this.photo = new Photo();
this.photo.id = Guid.create().toString();
this.photo.file_extension = file_ext;
}
// image filename: image_id.jpg
const dt: Date = new Date();
let dt_day: string = dt.getDate().toString();
dt_day = dt_day.length == 1 ? "0" + dt_day : dt_day;
let dt_month: string = (dt.getMonth() + 1).toString();
dt_month = dt_month.length == 1 ? "0" + dt_month : dt_month;
const dt_string: string = dt_day + "/" +
dt_month + "/" +
dt.getFullYear() + ", " +
dt.getHours() + ":" +
dt.getMinutes() + ":" +
dt.getSeconds() + "." +
dt.getMilliseconds();
if (this.photo.id == null || this.photo.id == '' || this.photo.id.length == 0) {
this.presentAlert("Error", "image id not set");
return;
}
else if (this.user.id == null || this.user.id == Guid.EMPTY || this.user.id == '' || this.user.id.length == 0) {
this.presentAlert("Error", "user.id not set");
return;
}
else if (dt_string == null || dt_string == '' || dt_string.length == 0) {
this.presentAlert("Error", "dt_string not set");
return;
}
this.photo.taken = dt_string;
const fileName: string = this.photo.id + ".jpg";
this.camera.getPicture(options).then((imageData) => {
// delete previous image
this.filePath.resolveNativePath(imageData)
.then((path) => {
let imagePath = path.substr(0, path.lastIndexOf("/") + 1);
let imageName = path.substring(path.lastIndexOf("/") + 1, path.length);
this.file.moveFile(imagePath, imageName, this.file.dataDirectory, fileName)
.then(newFile => {
this.ngZone.run(() => this.info = "Tap 'Upload' to upload photo");
this.db.addOrUpdatePhoto(this.photo)
.then(() => this.updateCanvas());
})
.catch(err => {
console.log("openCamera: ", err);
})
})
.catch((err) => {
console.log("openCamera: ", err);
})
})
.catch((err) => {
console.log("openCamera: ", err);
});
}
In the process of debugging this, I wrote a method to check that the photo actually exists after the camera has saved the image:
public exists() {
try {
this.file.listDir(this.file.dataDirectory, '')
.then(files => {
for (let i = 0; i < files.length; i++) {
if (files[i].name.includes(this.photo.id)) {
files[i].getMetadata((metadata) => {
this.presentAlert("image found", "filename: " + files[i].name + ", size: " + metadata.size + " bytes")
.then(() => this.updateCanvas());
});
}
}
});
}
catch { }
}
And I noticed that displaying an ionic alert before calling updateCanvas causes the photo to be correctly displayed onto the canvas. Does anyone know what the issue might be here?
Also, not sure if relevant, but I am using cordova-plugin-ionic-webview 4.1.1

Answer 1

I managed to solve this - the problem was the device itself. I tested on another phone and my canvas code worked perfectly. Uninstalling my app and reinstalling it did not resolve the issue, but a factory reset did. The device in question is an Honor 10 Lite. Not sure how this could have happened, maybe the device's WebView became corrupt somehow?