Изображения, нарисованные компонентом холста, не могут быть отображены в альбоме

Question

После сохранения изображения, нарисованного компонентом холста, в альбоме, изображение не может быть отображено в альбоме. Отображается только черное фоновое изображение. Как обеспечить нормальное состояние изображений после сохранения в альбоме?

Answer 1

Центр приложений Huawei Quick App Center создает объект каждый раз, когда вызывает getContext, поэтому будут возвращены разные объекты. Некоторые из этих объектов пусты. Пустой объект может быть получен при случайном выборе. В результате сохраненное изображение может не иметь содержимого. Код выглядит следующим образом:

Код для использования canvas чтобы нарисовать изображение:

      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");

  }

},

Код для сохранения изображения:

      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.');

    }

  })

}

---

Решение

Определите как глобальную переменную и проверьте, пуста ли она. Присвойте начальное значение пустому ctx.

Оптимизированный код:

      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");

  }

}