#### 問題現象：
  canvas元件繪製的內容匯出生成圖片儲存到相簿，進入相簿，開啟該圖片看不到繪製的內容，只有黑色的背景圖。

下圖中綠色背景部分是canvas元件繪製的內容。

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201216160827785.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

儲存到相簿效果圖如下：

![在這裡插入圖片描述](https://img-blog.csdnimg.cn/20201216160832729.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDcwODI0MA==,size_16,color_FFFFFF,t_70)

#### 問題分析：
  華為的快應用引擎會在每次呼叫getContext方法建立ctx，會返回不同的ctx物件，有的裡面會有內容，有的裡面會為空，獲取的時候是隨機獲取的，可能會獲取到空的ctx，導致儲存後的圖片沒有內容，問題程式碼如下。

**canvas繪製程式碼**：

```java
 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");
      }
    },
 
```

**儲存圖片程式碼**：

```java
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進行非空判斷，為空時，初始化儲存。

**最佳化程式碼如下**：

```java
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](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-component-canvas)

畫布介面：

[https://developer.huawei.com/consumer/cn/doc/development/quickApp-References/quickapp-api-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](https://developer.huawei.com/consumer/cn/forum/topic/0201404980467060234?fid=18)
作者：AppGallery Connect

canvas元件繪製的內容匯出生成圖片儲存到相簿後開啟異常

相關文章