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. How Do I Ensure that Pictures Are Normal After Being Saved to the Album?
Huawei Quick App Center creates a ctx
object each time when it calls the getContext
method, and therefore different ctx
objects will be returned. Some of these ctx
objects are empty. An empty ctx
object may be obtained in a random selection. As a result, the image saved may have no content. The code is as follows:
Code for using canvas
to draw an image:
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:
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. Assign an initial value to an empty ctx
.
Optimized code:
var ctx; // Define a global variable.
pic() {
if (!ctx) {// Check whether a ctx object is empty. If it is empty, assign the 2d value to it.
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");
}
}