教你在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/…
原作者：Mayism

喜欢 (0)赏

[搞代码]

分享 (0)