Có cách nào để tạo bản sao sâu của phần tử canvas có tất cả nội dung được vẽ không?Bất kỳ cách nào để sao chép phần tử canvas HTML5 bằng nội dung của nó?
Trả lời
Trên thực tế cách chính xác để sao chép dữ liệu vải là để vượt qua vải cũ vào khung trống mới. Hãy thử chức năng này.
function cloneCanvas(oldCanvas) {
//create a new canvas
var newCanvas = document.createElement('canvas');
var context = newCanvas.getContext('2d');
//set dimensions
newCanvas.width = oldCanvas.width;
newCanvas.height = oldCanvas.height;
//apply the old canvas to the new one
context.drawImage(oldCanvas, 0, 0);
//return the new canvas
return newCanvas;
}
Sử dụng getImageData là để truy cập dữ liệu pixel, không phải để sao chép canvas. Sao chép với nó rất chậm và khó trên trình duyệt. Nó nên tránh.
Bạn có thể gọi
context.getImageData(0, 0, context.canvas.width, context.canvas.height);
mà sẽ trả về một đối tượng imageData. Điều này có một thuộc tính có tên là dữ liệu loại CanvasPixelArray có chứa giá trị rgb và độ trong suốt của tất cả các pixel. Các giá trị này không phải là tham chiếu đến canvas nên có thể thay đổi mà không ảnh hưởng đến canvas.
Nếu bạn cũng muốn có một bản sao của phần tử, bạn có thể tạo phần tử canvas mới và sau đó sao chép tất cả thuộc tính vào phần tử canvas mới. Sau đó, bạn có thể sử dụng phương thức
context.putImageData(imageData, 0, 0);
để vẽ đối tượng ImageData vào phần tử canvas mới.
Xem câu trả lời này để biết thêm chi tiết getPixel from HTML Canvas? về thao tác pixel.
Bạn có thể tìm thấy bài viết này hữu ích mozilla cũng https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Drawing_shapes
Chỗ tốt. Cảm ơn. – Castrohenge
Không phải là phương pháp sao chép tốt. Điều này phù hợp hơn cho việc lưu trữ dữ liệu. –
- 1. Phần tử canvas html5 trong nền của trang của tôi?
- 2. Làm cách nào để nhập nội dung của canvas html5 vào flash một cách hiệu quả?
- 3. Sao chép nội dung của NSMutableDictionary sang NSMutableDictionary khác?
- 4. IE6 có hỗ trợ bất kỳ phần tử HTML5 nào không?
- 5. Nhận nội dung của phần tử li
- 6. Bất kỳ phần mềm nào như pha trộn cho hoạt ảnh HTML5 canvas?
- 7. Bất kỳ cách nào để ẩn các phần tử khỏi chế độ xem web? (android)
- 8. Làm cách nào để sao chép dữ liệu của một phần tử bằng jQuery?
- 9. SAX: Cách lấy nội dung của một phần tử
- 10. jquery clone chỉ nội dung của phần tử
- 11. Tôi làm cách nào để sử dụng phông chữ tùy chỉnh trong phần tử Canvas HTML5?
- 12. làm thế nào để thay đổi kích thước của html5 vải mà không có nó rộng nội dung
- 13. Tôi làm cách nào để đặt nhiều phần tử canvas vào một phần tử canvas?
- 14. con trỏ: con trỏ trên phần tử canvas html5 hover
- 15. Được sao chép cách duy nhất để lấy nội dung của một kho lưu trữ Mercurial?
- 16. Tôi làm cách nào để sử dụng phần tử canvas HTML5 trong IE?
- 17. Macrodef kiến: Có cách nào để lấy nội dung của tham số phần tử không?
- 18. Bất kỳ cách nào để sử dụng khung trong HTML5?
- 19. Gradient hình chữ nhật với phần tử Canvas HTML5
- 20. Cách thay đổi giá trị nội dung của giả: trước phần tử bằng Javascript
- 21. Làm cách nào để sao chép nội dung của tệp này sang tệp khác bằng phương thức tệp của Ruby?
- 22. Sao chép nội dung DataGridView vào clipboard
- 23. Làm cách nào để khớp nội dung của một phần tử trong XPath (lxml)?
- 24. Phương thức getCSSCanvasContext() của phần tử HTML5 là gì?
- 25. Lấy nội dung của phần tử KHÔNG CÓ con của nó
- 26. sendfile không sao chép nội dung tệp
- 27. Sử dụng DTD, một phần tử có thể được khai báo cho phép bất kỳ nội dung XML nào không?
- 28. HTML/CSS: Tại sao nội dung không kéo dài đến nội dung của nó?
- 29. Làm cách nào để chọn các phần tử con của bất kỳ độ sâu nào bằng XPath?
- 30. Kéo và sao chép HTML5?
+1 trên tham chiếu 'drawImage()', nhưng đáng chú ý là lệnh gọi 'new Canvas()' không hoạt động trong tất cả các trình duyệt (đáng chú ý là Firefox) - thay vào đó bạn nên sử dụng 'document.createElement ('canvas')' –
@AJ. Cảm ơn, tôi đã sửa nó. –
lỗi khá lạ ở đây: khi tải một hình ảnh và điều chỉnh kích thước của vải cho phù hợp và _then_ nhân bản nó, nó chỉ sao chép 300px đầu tiên (theo chiều ngang) và 150px đầu tiên (theo chiều dọc) (xem http: //peter.muehlbacher. bảng điều khiển của tôi/sân chơi/sợi nấm? src = ../downloads/chess_pawn.png khi nhấp vào - nó ghi nhật ký các giá trị alpha của bản sao) – Peter