景象形容
以后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