toDataURL không phải là hàm

Question

Tôi đang cố gắng tạo url cho canvas. Dưới đây là các bước tôi theo:

var can = document.getElementsByTagName("canvas"); 
var src = can.toDataURL("image/png"); 

Khi tôi cố gắng chạy mã ở trên vào firebug nó ném một lỗi:

TypeError: can.toDataURL is not a function 

Tôi đang chạy firefox 8 trên ubuntu.

Answer 1

getElementsByTagName trả về NodeList^[docs], không phải là một phần tử duy nhất.

Đơn giản chỉ cần truy cập vào phần tử đầu tiên của danh sách:

var src = can[0].toDataURL("image/png"); 

Nếu bạn muốn nhận được URL dữ liệu cho mỗi vải, sau đó bạn phải lặp trên danh sách. Nếu không, cho canvas một ID và lấy tham chiếu với getElementById có thể thuận tiện hơn.

Answer 2

var can = document.getElementsByTagName("canvas"); 

điều này trả về một mảng các phần tử canvas. bạn cần lấy canvas theo id.

var can = document.getElementById("canvasId"); 

Answer 3

Kiểm tra kỹ xem bạn đang chạy toDataURL() chính đối tượng canvas chứ không phải đối tượng ngữ cảnh.

Answer 4

Điều gì đó không được đề cập trong câu trả lời được chấp nhận: ngay cả khi sử dụng bộ chọn ID, jQuery's Sizzle trả về một đối tượng/bộ sưu tập. Vì vậy, nếu bạn nhận được lỗi này trong khi sử dụng jQuery, hãy sử dụng phần phụ [0] để truy cập vào chỉ mục đầu tiên của phần tử. Nếu bạn tò mò, các chỉ số có thể được khám phá bằng cách sử dụng console.dir($('#canvasId));

Ví dụ như công cụ chọn hoàn toàn bình thường này sẽ thất bại:

var src = $('#canvasId').toDataURL("image/png"); 

Nhưng có một điều này sẽ làm việc (chú ý dấu ngoặc thêm):

var src = ($('#canvasId')[0]).toDataURL("image/png");