HarmonyOS鸿蒙Next中教你在canvas上绘制Base64格式的图片

HarmonyOS鸿蒙Next中教你在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>

更多关于HarmonyOS鸿蒙Next中教你在canvas上绘制Base64格式的图片的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于HarmonyOS鸿蒙Next中教你在canvas上绘制Base64格式的图片的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在HarmonyOS鸿蒙Next中，可以通过以下步骤在Canvas上绘制Base64格式的图片：

  1. 解码Base64：使用Base64类将Base64字符串解码为字节数组。
  2. 创建Image对象：使用Image类加载解码后的字节数组。
  3. 绘制图片：在Canvas上使用drawImage方法绘制图片。

示例代码：

let base64Data = "your_base64_string";
let image = new Image();
image.src = "data:image/png;base64," + base64Data;
image.onload = function() {
    let canvas = document.getElementById('myCanvas');
    let ctx = canvas.getContext('2d');
    ctx.drawImage(image, 0, 0);
};

确保Base64字符串包含正确的MIME类型前缀。

回到顶部