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 >