Làm cách nào để sao chép nội dung của một HTML5 Canvas sang một Canvas khác cục bộ?

Phương thức drawImage () được sử dụng để vẽ hình ảnh, canvas và video trên canvas. Nó cũng có thể vẽ một phần hình ảnh và tăng hoặc giảm kích thước hình ảnh.

Ví dụ

Hãy để chúng tôi xem một ví dụ -

//context grabbed from your destination canvas
ctx = destinationCanvas.getContext('2d');

//drawImage() called passing the source canvas directly
dCtx.drawImage(sourceCanvas, 0, 0);

Trong đoạn mã này, trước hết hình ảnh được sao chép từ canvas nguồn. SourceCanvas có thể là HTMLImageElement, HTMLVideoElement hoặc HTMLCanvasElement. Không thể sử dụng ngữ cảnh bản vẽ canvas làm nguồn. Nếu ngữ cảnh bản vẽ canvas là canvas nguồn của bạn thì sẽ có tham chiếu đến phần tử canvas gốc trên ngữ cảnh dưới context.canvas

Đoạn mã sau sử dụng phương thức drawImage () để sao chép ngữ cảnh từ canvas nguồn sang canvas mong muốn.