溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何在canvas上繪制Base64格式的圖片

發(fā)布時(shí)間：2021-06-24 14:10:37 來(lái)源：億速云 閱讀：454 作者：chen 欄目：編程語(yǔ)言

本篇內(nèi)容主要講解“如何在canvas上繪制Base64格式的圖片”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“如何在canvas上繪制Base64格式的圖片”吧!

現(xiàn)象描述

當(dāng)前canvas組件只支持繪制本地圖片和網(wǎng)絡(luò)圖片，暫不支持繪制Base64字符串表示的圖片格式，下面介紹如何采取規(guī)避措施實(shí)現(xiàn)。

問(wèn)題分析

當(dāng)前image組件支持Base64字符串表示的圖片格式，如下所示：

如何在canvas上繪制Base64格式的圖片

因此可以考慮通過(guò)image組件來(lái)表示Base64字符串表示的圖片，然后用canvas組件繪制image元素來(lái)間接實(shí)現(xiàn)繪制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: "填寫需要繪制的圖片對(duì)應(yīng)的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 >      

到此，相信大家對(duì)“如何在canvas上繪制Base64格式的圖片”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手