如何在 HTML5 中將畫布資料儲存到檔案中?


畫布只是 HTML 頁面上的一個矩形區域。我們可以使用 JavaScript 在此矩形區域(畫布)中繪製圖形。

 畫布可以在 HTML5 中建立,如下所示 −

<canvas id = ”canvas1” width = ”250” height = ”150”></canvas>                                 

這將建立一個名為 canvas1 的空畫布,其寬度=200,高度=100。

 要在其中繪製圖形,我們使用 JavaScript −

var canvas = document.getElementById("Canvas1");
 var ctx1 = canvas.getContext("2d");
ctx1.moveTo(0,0); ctx1.lineTo(300,200);
 ctx1.stroke(); // This method actually draw graphics as per context object             

要儲存此圖形,我們需要將其另存為 img.png 或 img.jpg 等資料 URL

為此,我們將編寫 −

var imgurl= canvas.toDataURL( ) ; / / This method saves graphics in png
document.getElementById(‘cimg’).src = imgurl; // This will set img src to dataurl(png)
so that it can be saved as image.

透過這種方式,我們可以將畫布資料儲存到 HTML5 中的檔案中。

更新於: 2020 年 6 月 24 日

2K+ 瀏覽量

啟動您的職業生涯

完成課程即可獲得認證

立即開始
廣告
© . All rights reserved.