温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

如何在canvas上绘制Base64格式的图片

发布时间:2021-06-24 14:10:37 来源:亿速云 阅读:489 作者:chen 栏目:编程语言

本篇内容主要讲解“如何在canvas上绘制Base64格式的图片”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何在canvas上绘制Base64格式的图片”吧!

现象描述

当前canvas组件只支持绘制本地图片和网络图片,暂不支持绘制Base64字符串表示的图片格式,下面介绍如何采取规避措施实现。

问题分析

当前image组件支持Base64字符串表示的图片格式,如下所示:

如何在canvas上绘制Base64格式的图片

因此可以考虑通过image组件来表示Base64字符串表示的图片,然后用canvas组件绘制image元素来间接实现绘制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 >      

到此,相信大家对“如何在canvas上绘制Base64格式的图片”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI