Bất kỳ cách nào để sao chép phần tử canvas HTML5 bằng nội dung của nó?

Question

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?

Answer 1

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.

Answer 2

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