教你在canvas上繪製Base64格式的圖片

現象描述

當前 canvas元件只支援繪製本地圖片和網路圖片，暫不支援繪製Base64字串表示的圖片格式，下面介紹如何採取規避措施實現。

問題分析

當前 image元件支援Base64字串表示的圖片格式，如下所示：

因此可以考慮透過 image元件來表示Base64字串表示的圖片，然後用canvas元件繪製image元素來間接實現繪製Base64字串表示的圖片格式。

解決方法

程式碼如下：

<template>
  <div class="container">
    <image id="Image" src={{imageSrc}} show="false"></image>
    <canvas id="Canvas" style="background-color:#FFFF00; margin-top:20px;width: 100%; height:50%;"></canvas>
    <input class="buttons" type="button" onclick="drawImageAll" value="saveImageAndShowCanvas"></input>
  </div>
</template>
 
<style>
  .container {
    flex-direction: column;
    justify-content: center;
    align-content: center;
    align-items: center;
  }
 
  .title {
    font-size: 100px;
  }
 
  .text {
    font-size: 50px;
    color: #0000ff;
    border: 1px;
  }
</style>
 
<script>
  module.exports = {
    data: {
      imageSrc: "填寫需要繪製的圖片對應的base64字串" //格式如："data:image/png;base64,iVBORw0KGgoAAAA……"
    },
    onInit() {
      this.$page.setTitleBar({text: 'Canvas'})
    },
    drawImageAll(){
      var test = this.$element("Canvas");
      var ctx = test.getContext("2d");
      var img = this.$element('Image');
      ctx.drawImage(img, 0,0);
  }
  }
</script>

原文連結： https://developer.huawei.com/consumer/cn/forum/topic/0201429219344610026?fid=18

原作者：Mayism