关于android:canvas组件绘制的内容导出生成图片保存到相册后打开异常

问题景象：

  canvas 组件绘制的内容导出生成图片保留到相册，进入相册，关上该图片看不到绘制的内容，只有彩色的背景图。

下图中绿色背景局部是 canvas 组件绘制的内容。

保留到相册效果图如下：

问题剖析：

  华为的快利用引擎会在每次调用 getContext 办法创立 ctx，会返回不同的 ctx 对象，有的外面会有内容，有的外面会为空，获取的时候是随机获取的，可能会获取到空的 ctx，导致保留后的图片没有内容，问题代码如下。

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("图片加载实现");
        ctx.drawImage(img, 10, 10, 300, 300,);
      }
      img.onerror = function () {console.log("图片加载 shibai");
      }
    },
 

保留图片代码：

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 定义为全局变量，对 ctx 进行非空判断，为空时，初始化保留。

优化代码如下：

var ctx; // 定义一个全局的
    pic() {if (!ctx) { // 对空对象进行判断，ctx 为空的时候，把“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("图片加载实现");
        ctx.drawImage(img, 10, 10, 300, 300,);
      }
      img.onerror = function () {console.log("图片加载 shibai");
      }
    }
  

欲了解更多详情，请参见：

快利用开发领导文档：https://developer.huawei.com/consumer/cn/doc/development/quickApp-Guides/quickapp-whitepaper

快利用 canvas 组件：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-component-canvas

画布接口：

https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-canvas

原文链接: https://developer.huawei.com/consumer/cn/forum/topic/0201404980467060234?fid=18
作者：AppGallery Connect