Canvas绘制内容导出后图片显示异常问题

问题现象

在快应用开发过程中，某些用户在使用canvas组件绘制内容并将其导出保存到相册时，可能会遇到以下异常现象：

导出的图片仅显示黑色背景，绘制内容无法正常显示。

绿色背景部分是canvas组件绘制的内容，保存到相册后却无法看到这一部分。

问题分析

该问题的根源在于canvas组件的上下文对象ctx获取方式。华为快应用引擎在getContext方法的调用中，每次都会创建新的ctx对象。如果某次调用返回的是空ctx对象，会导致后续绘图操作无法正常执行，最终导出的图片也只显示背景图。

具体问题出现在save()方法中，canvas组件的ctx可能为null，导致绘制失败。以下是问题代码示例：

save() {
  var test = this.$element("canvas");
  test.toTempFilePath({
    // ...其他配置
  });
}

解决方法

为了确保canvas绘制内容能够正确保存到相册，建议采取以下解决方案：

定义全局ctx变量：将canvas组件的上下文对象ctx定义为全局变量，以便在多次调用getContext方法时，能够确保获取到非空的ctx对象。

非空判断：在使用ctx进行绘制操作之前，先进行非空判断。如果ctx为空，则手动初始化绘制内容。

优化绘图逻辑：在onload事件中使用非空的ctx进行绘制操作，确保图片加载完成后能够正确渲染在canvas上。

改进后的代码示例如下：

var ctx;
pic() {
  if (!ctx) {
    var test = this.$element("canvas");
    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("图片加载失败");
  };
}

Canvas绘制内容导出后图片显示异常问题

问题现象

问题分析

解决方法

相关技术文档