Chuyển đổi HTML5 canvas để yếu tố IMG

Question

Tôi muốn thay đổi kích thước, kéo dài một canvas HTML5 trong cách nọ cách kia rằng hành động vải như một yếu tố IMG: set chiều rộng chiều cao bằng pixel, phần trăm ...

Tôi tự hỏi, nếu là có bất kỳ cách nào để chuyển đổi/xuất một canvas HTML5 thành một phần tử IMG, hoặc một cách nào đó có thể làm cho điều này có thể trực tiếp trong canvas.

Tôi đã nghiên cứu trên Google, nhưng nó có vẻ như không ai trên internet đã làm điều này trước đây, hoặc có lẽ tôi chỉ có thể không tìm ra ...

Tôi đang sử dụng thư viện KineticJS, để biết chi tiết.

Xin hãy giúp tôi! Cảm ơn bạn rất nhiều! Và xin lỗi vì tiếng anh xấu của tôi ...

Answer 1

Trước tiên, đặt cho canvas của bạn một id (ví dụ: example). Sau đó, sử dụng JavaScript thuần túy, bạn có thể tạo hình ảnh dựa trên canvas đó và tạo kiểu cho hình ảnh đó:

var canvas = document.getElementById('example'), 
    dataUrl = canvas.toDataURL(), 
    imageFoo = document.createElement('img'); 
imageFoo.src = dataUrl; 

// Style your image here 
imageFoo.style.width = '100px'; 
imageFoo.style.height = '100px'; 

// After you are done styling it, append it to the BODY element 
document.body.appendChild(imageFoo);