What Can I Do If an Image Drawn by the canvas Component Cannot Be Display - Huawei Developers

Symptom:
After an image drawn by the canvas component is saved to the album, the image cannot be displayed in the album. Only a black background image is displayed.
The image with the green background in the following figure is drawn by the canvas component.
{
"lightbox_close": "Close",
"lightbox_next": "Next",
"lightbox_previous": "Previous",
"lightbox_error": "The requested content cannot be loaded. Please try again later.",
"lightbox_start_slideshow": "Start slideshow",
"lightbox_stop_slideshow": "Stop slideshow",
"lightbox_full_screen": "Full screen",
"lightbox_thumbnails": "Thumbnails",
"lightbox_download": "Download",
"lightbox_share": "Share",
"lightbox_zoom": "Zoom",
"lightbox_new_window": "New window",
"lightbox_toggle_sidebar": "Toggle sidebar"
}
After the image is saved to the album, the display result is as shown in the following figure.
Analysis:
Huawei Quick App Loader creates a ctx object each time it calls the getContext method. Therefore, different ctx objects are returned, and some of these objects are empty. An empty ctx object may be obtained in a random selection. As a result, the saved image may have no content. The code where the exception occurs is as follows:
Code for using canvas to draw an image:
JavaScript:
pic() {
var test = this.$element("canvas");
var ctx = test.getContext("2d");
var img = new Image();
img.src = "http://www.huawei.com/Assets/CBG/img/logo.png";
img.onload = function () {
console.log("Image loaded successfully.");
ctx.drawImage(img, 10, 10, 300, 300, );
}
img.onerror = function () {
console.log("Failed to load the image.");
}
},
Code for saving the image:
JavaScript:
save() {
var test = this.$element("canvas");
test.toTempFilePath({
fileType: "jpg",
quality: 1.0,
success: (data) => {
console.log(`Canvas toTempFilePath success ${data.uri}`)
console.log(`Canvas toTempFilePath success ${data.tempFilePath}`)
media.saveToPhotosAlbum({
uri: data.uri,
success: function (ret) {
console.log("save success: ");
},
fail: function (data, code) {
console.log("handling fail, code=" + code);
}
})
},
fail: (data) => {
console.log('Canvas toTempFilePath data =' + data);
},
complete: () => {
console.log('Canvas toTempFilePath complete.');
}
})
}
Solution:
Define ctx as a global variable and check whether it is empty. Set an initial value for an empty ctx.
The optimized code is as follows:
JavaScript:
var ctx; // Define a global variable.
pic() {
if (!ctx) { // Check whether a ctx object is empty. If it is empty, set its value to 2d.
var test = this.$element("canvas");
var tt = test.getContext("2d");
ctx = tt;
}
var img = new Image();
img.src = "http://www.huawei.com/Assets/CBG/img/logo.png";
img.onload = function () {
console.log("Image loaded successfully.");
ctx.drawImage(img, 10, 10, 300, 300, );
}
img.onerror = function () {
console.log("Failed to load the image.");
}
}
For more details, please check:
Quick app materials:
https://developer.huawei.com/consumer/en/doc/development/quickApp-Guides/quickapp-whitepaper
canvas component:
https://developer.huawei.com/consum...quickApp-References/quickapp-component-canvas
Intro to the canvas API:
https://developer.huawei.com/consumer/en/doc/development/quickApp-References/quickapp-api-canvas