教你在canvas上绘制Base64格式的图片

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

<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>