Lưu PNG (v.v.) hoạt động ở this demo trong Firefox, chứ không phải Chrome.Lưu canvas HTML 5 vào một tệp trong Chrome?
Chuyển đổi sang PNG (v.v.) hoạt động trong Firefox và Chrome.
Có cách nào * trong Chrome * để lưu hình ảnh của phần tử canvas vào tệp cục bộ hay máy chủ không?
Cách đơn giản nhất để thực hiện việc này là sử dụng chức năng toDataURL().
Giả sử bạn có một canvas:
var canvas = document.getElementById("myCanvas");
Sau đó, với một nút với id "saveButton", bạn có thể làm cho nó bật mở một cửa sổ mới với vải như một png, và người dùng có thể tiết kiệm mà trang.
document.getElementById("saveButton").onClick = function() {
window.open(canvas.toDataURL());
}
Sam Dutton: (liên quan đến bình luận trái trong câu trả lời Timothy Armstrong) Các 'SECURITY_ERR: DOM ngoại lệ 18' lỗi mà bạn đang nhận được có lẽ là bởi vì trong Canvas của bạn, bạn đã tải một hình ảnh mà xuất phát từ một khác nhau tên miền, ví dụ: có thể hình ảnh được lưu trữ trên máy chủ của bạn do đó tại sao bạn thấy lỗi cục bộ nhưng không được lưu trữ trên máy chủ của bạn. Bất cứ khi nào bạn tải hình ảnh từ một miền nước ngoài vào Canvas, một số cuộc gọi API bị cấm vì lý do bảo mật như toDataUrl() và getPixelData(). Nó tương tự như cùng một vấn đề chính sách gốc mà bạn thấy với các cuộc gọi Ajax tên miền chéo.
Đối với SaveAs Canvas, việc triển khai trình duyệt là điểm yếu, đối với các trình duyệt không hỗ trợ, tôi tin rằng bạn vẫn có thể có canvas xuất hiện dưới dạng hình ảnh bên trong thẻ <img />. Chỉ cần đặt thuộc tính src cho dữ liệu bạn nhận được từ toDataUrl(), sau đó bạn có thể mời người dùng nhấp chuột phải -> lưu dưới dạng. Tôi tin rằng bản demo trong liên kết mà bạn đã đăng sẽ thực hiện điều này.
Cảm ơn nhận xét của bạn. Bảo mật 'lỗi' xảy ra khi toDataURL() được chạy cục bộ (nghĩa là không phải trên máy chủ). Để tạo nội dung của phần tử canvas, tôi gọi drawImage bằng tệp video cục bộ làm nguồn, tức là như sau: canvasContext.drawImage (videoEl, 0, 0, videoWidth/2, videoHeight/2); –
Bạn có chắc chắn rằng tệp video chính là địa phương và không đến từ máy chủ của bạn không? –
>> Bạn có chắc chắn rằng chính tệp video đó là địa phương << Có: video nằm trong một thư mục cục bộ và được truy cập qua đường dẫn src như sau: 'video/myVideo.ogv'. –
Rắc rối với điều này là (từ Chrome) nó mang lại một lỗi: SECURITY_ERR: DOM ngoại lệ 18. tôi đã tìm thấy tài liệu tham khảo để lỗi này (http: // danh sách.w3.org/Archives/Public/public-webapi/2006May/0027.html, ví dụ), nhưng không có thông tin về việc liệu (hoặc không) có thể có được xung quanh nó. –
Tôi chỉ phát hiện ra rằng lỗi xảy ra cục bộ - nhưng không phải nếu mã được chạy trên một máy chủ. Tuy nhiên, tôi vẫn đang tìm cách cung cấp hộp thoại Lưu dưới dạng (như trong Firefox) và không chỉ mở PNG trong cửa sổ mới. –
Tôi chắc chắn rằng bạn không thể khiến hộp thoại lưu xuất hiện; tốt nhất bạn có thể làm là mở PNG kết quả trong một tab mới và lưu người dùng. Đây là hành vi tôi thấy trong tất cả các ứng dụng canvas mà tôi đã thấy. Đã chỉnh sửa phản hồi của tôi khi cửa sổ mở. –