cách tốt nhất để chuyển đổi div thành hình ảnh là gì? bằng cách sử dụng php, javascript hoặc jquery

Question

Tôi có một div chứa hình ảnh như vậy:

<div id="Created_Design"> 
    <img src="images/image1.png" style="position: absolute; left: 8px; top: 172px;"> 
    <img src="images/image2.png" style="position: absolute; left: 20px; top: 144px"> 
</div> 

Tôi muốn xuất này div là một hình ảnh nguyên nhân im tạo một cái gì đó giống như một máy phát điện thiết kế. Cho đến nay những gì tôi đã làm là đặt thiết kế mới được tạo ra trên cửa sổ mới bằng cách sử dụng window.open giống như bản xem trước của thiết kế.

Vì vậy, câu hỏi của tôi là:

1. Tôi có thể chuyển đổi div này và lưu nó trực tiếp như một hình ảnh?
2. Tôi đã nghĩ đến việc xuất ảnh này thành canvas để tôi có thể lưu dưới dạng hình ảnh. Làm thế nào tôi có thể xuất khẩu này để vải?
3. Có cách nào khác để thực hiện việc này không?

Answer 1

Tôi sẽ trả lời câu hỏi của bạn về việc chuyển những gì bạn có vào canvas. Tôi đã viết một bài viết here.

Những gì bạn làm là đọc hình ảnh và vị trí css của chúng, trên cùng và bên trái. Sau đó sao chép nó vào khung vẽ.

(mã từ đầu, có thể là lỗi)

// Loop over images and call the method for each image node 
$('#Created_Design').children(function() { 
    drawImage(this.src, this.style.left, this.style.top); 
}); 

function drawImage(src, x, y) { 
    var ctx = document.getElementById('canvas').getContext('2d'); 
    var img = new Image(); 
    img.onload = function() { 
    ctx.drawImage(img, x, y); 
    }; 
    img.src = src; 
} 

Answer 2

Bạn có thể vẽ hình ảnh từ div trên vải bằng phương pháp drawImage(), sau khi bạn có thể có được kết quả hình ảnh base64 mã hóa sử dụng toDataURL() phương pháp.

Answer 3

Tôi sẽ sử dụng thư viện GD của php để tạo hình ảnh mới. Bạn có thể sử dụng kiểu nội tuyến của div để tìm ra vị trí cần thiết cho hình ảnh mới. Bạn sẽ cần phải dành thời gian đọc tài liệu GD tôi đã liên kết trước, có thể hơi khó hiểu nếu bạn chưa sử dụng GD trước đây nhưng nó có thể cung cấp nhiều tính linh hoạt khi làm việc với hình ảnh trong php.