关于android:教你在canvas上绘制Base64格式的图片

49次阅读

共计 1017 个字符，预计需要花费 3 分钟才能阅读完成。

景象形容
以后 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/…
原作者：Mayism

正文完