Làm cách nào để lưu dữ liệu canvas vào tệp trong HTML5?

Canvas chỉ là một vùng hình chữ nhật trên trang HTML. Chúng ta có thể vẽ đồ họa trong khu vực hình chữ nhật này (Canvas) với sự trợ giúp của JavaScript.

Canvas có thể được tạo trong HTML5 dưới dạng -

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

Điều này tạo ra một canvas trống có tên canvas1 với width =200 và height =100.

Để vẽ đồ họa trong đó, chúng tôi sử dụng 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             

Để lưu đồ họa này, chúng ta cần lưu nó dưới dạng một số url dữ liệu như img.png hoặc img.jpg

Đối với điều này, chúng tôi sẽ viết -

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.

Bằng cách này, chúng tôi có thể lưu dữ liệu canvas vào tệp trong HTML5.