Lưu hình ảnh canvas html 5 trên đĩa cứng cục bộ

Question

Tôi đã tạo hình dạng trên canvas html 5 bằng cách sử dụng thư viện kineticjs. Bây giờ tôi muốn lưu canvas như một hình ảnh trên đĩa cứng hệ thống cục bộ của tôi. Xin vui lòng cho tôi biết làm thế nào tôi có thể đạt được nó bằng cách sử dụng thư viện KineticJS.

Answer 1

Sau khi chọn canvas (sử dụng một cái gì đó như document.getElementById tôi đoán), bạn sẽ có thể gọi những điều sau đây để chuyển canvas thành một dataURL.

Khi bạn đã có URL đó, hãy mở URL đó trong cửa sổ trình duyệt khác và thực hiện Nhấp chuột phải-> Lưu hình ảnh dưới dạng chuẩn và lưu dưới dạng JPG/PNG/v.v.

var canvas = document.getElementById("mycanvas"); 
var img = canvas.toDataURL("image/png"); 

Cho dù bạn có thể lưu hình ảnh vào ổ đĩa theo chương trình hay không, tôi không chắc chắn, mặc dù tôi rất nghi ngờ điều này do ràng buộc về bảo mật.

Để biết thêm thông tin về cách truy cập chương trình Hệ thống tệp, hãy xem trang web tham chiếu Hệ thống tệp HTML5 này.

http://www.html5rocks.com/en/tutorials/file/filesystem/

Để biết thêm thông tin liên quan đến lấy một dataURL cho một yếu tố canvas KinectJS Stage, xem đoạn dưới đây/url.

<script> 
    stage.toDataURL({ 
    callback: function(){ 
     // do something with the data url 
    }, 
    mimeType: 'image/jpeg', 
    quality: 0.5 
    }); 
</script> 

http://www.html5canvastutorials.com/kineticjs/html5-canvas-stage-data-url-with-kineticjs/