Làm cách nào để chuyển đổi toàn bộ dữ liệu div của tôi thành hình ảnh và lưu nó vào thư mục mà không cần sử dụng canvas?

tôi đã tạo dữ liệu của mình (mẫu chứa hình ảnh, văn bản, nhãn, vv) bên trong div bây giờ tôi muốn chuyển đổi nó thành định dạng hình ảnh. là có bất kỳ kỹ thuật để chuyển đổi một nội dung div cụ thể vào hình ảnh mà không cần sử dụng canvas.anybody plz giúp tôi! tôi muốn chuyển toàn bộ nội dung "mydiv" thành hình ảnh và lưu hình ảnh đó vào thư mục hình ảnh của tôi, khi tôi nhấp vào lưu?Làm cách nào để chuyển đổi toàn bộ dữ liệu div của tôi thành hình ảnh và lưu nó vào thư mục mà không cần sử dụng canvas?

<html> 
    <header> 
    </header> 
    <body> 
    <label> Template Design</label> 
    <div id="mydiv"> 
     <label> Good Morning</label> 
     <img src="mug.png" id="img1" height="100" width="100" /> 
    </div> 
    <input name="save" type="button" value="SAVE" /> 
    </body> 
</html>

Nguồn

2013-08-31 luckyamit

Tôi chắc chắn sẽ có một plugin trình duyệt mà có thể làm điều này cho bạn. – leftclickben

bạn đã làm gì cho đến nay? Đây chỉ là html. –

có nhưng tôi muốn tất cả dữ liệu bên trong của "mydiv" thành định dạng hình ảnh sau khi nhấp vào nút SAVE? có giải pháp nào không? – luckyamit

UPDATE (tháng 3 năm 2018): Xin chào mọi người của tương lai! Câu trả lời này vẫn nhận được rất nhiều lưu lượng truy cập và tôi nhận thấy rằng JSFiddle cũ tôi đã đặt cùng nhau đã bị hỏng nên nó đã được cập nhật. JSFiddle mới cho thấy kỹ thuật này là ở đây: https://jsfiddle.net/Sq7hg/1913.

Bạn có thể muốn xem xét một giải pháp dựa trên Flash nếu bạn không thể sử dụng <canvas> (mặc dù trừ khi điều này đặc biệt cần phải làm việc trong các phiên bản cũ của trình duyệt IE Tôi không chắc chắn lý do tại sao bạn có thể' t).

http://flashcanvas.net/ là mô phỏng của <canvas> bằng Flash có thể giúp bạn có được nơi bạn cần đến. Tài liệu nói rằng nó hỗ trợ toDataURL() để có thể làm việc cho bạn.

Bạn có thể cung cấp thông tin chi tiết hơn về những hạn chế của bạn xung quanh <canvas> và những gì bạn đã cố gắng thử chưa?

// EDIT

Theo nhận xét của bạn bên dưới, bạn có thể có thể sử dụng <canvas>, trong trường hợp này bạn có thể thử sử dụng http://html2canvas.hertzen.com - đó là một giải pháp JavaScript mà về cơ bản lại viết DOM của một bộ phận nhất định của bạn mã số đến <canvas> và sau đó cho phép bạn tương tác với nó theo bất kỳ cách nào bạn muốn, bao gồm chuyển nó thành dữ liệu hình ảnh qua toDataURL().

Tôi đã không được sử dụng nó trước, nhưng mã JavaScript của bạn sẽ trông như thế này:

html2canvas([document.getElementById('mydiv')], { 
    onrendered: function(canvas) { 
     var data = canvas.toDataURL('image/png'); 
     // AJAX call to send `data` to a PHP file that creates an image from the dataURI string and saves it to a directory on the server 
    } 
});

Tôi đã gõ cùng một jsfiddle nhanh về điều này trong hành động ở đây: https://jsfiddle.net/Sq7hg/1913/(lưu ý: cập nhật liên kết như trên)

jsfiddle này cho thấy cách sử dụng phương pháp toDataURL() để chuyển canvas thành hình ảnh và nối nó vào tài liệu. Lưu hình ảnh được tạo vào máy chủ là nhiệm vụ phức tạp hơn vì nó sẽ yêu cầu cuộc gọi AJAX hoặc somesuch để gửi dữ liệu hình ảnh tới tập lệnh PHP để chuyển đổi URL được tạo ra data: thành hình ảnh thực và sau đó lưu nó vào thư mục mà bạn có quyền ghi vào. Nếu đó là những gì bạn cần làm, thay vì đi sâu vào đây, tôi khuyên bạn nên bắt đầu với câu hỏi Stack Overflow này: How to save an HTML5 Canvas as an image on a server?

Nguồn

2013-08-31 06:16:23 Scottie

Cảm ơn Scottie nhưng tôi đã tạo dữ liệu của mình (văn bản chứa hình ảnh mẫu, vv) bên trong div bây giờ tôi muốn chuyển đổi nó thành định dạng hình ảnh. là có bất kỳ kỹ thuật để chuyển đổi một nội dung div cụ thể thành hình ảnh, hoặc đầu tiên chuyển đổi nó thành vải và sau đó vào hình ảnh. nếu bạn có mã cho nó thì plz viết ở đây? – luckyamit

Cập nhật câu trả lời của tôi ở trên để bao gồm giải pháp dựa trên '

yup có một giải pháp tại http://html2canvas.hertzen.com/ nhưng tôi không thể nhận được mã rõ ràng từ đó vì tôi muốn nó gây nhầm lẫn cho tôi, bạn có thể cung cấp cho tôi mã lọc từ đó – luckyamit

Công trình này hoàn hảo ... phải là giải pháp đơn giản nhất.

// html

<div id="mydiv" style="background-image:url(Koala.jpg) ;background-size: 100%; 
background-size :200px 200px; 
background-repeat: no-repeat;"> 
<p>text!</p> 
<img src="mug.png" height="100" width="100"/></div> 
<div id="canvas"> 
<p>Canvas:</p> 
</div> 

<div style="width:200px; float:left" id="image"> 
<p style="float:left">Image: </p> 
</div> 
<div style="float:left;margin-top: 120px;" class="return-data"> 
</div> 
<script src="http://html2canvas.hertzen.com/build/html2canvas.js"></script> 
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

// Phong cách

#mydiv { 
background-color: lightblue; 
width: 200px; 
height: 200px 
}

// Script

<script language="javascript"> 
    html2canvas([document.getElementById('mydiv')], { 
    onrendered: function (canvas) { 
    document.getElementById('canvas').appendChild(canvas); 
    var data = canvas.toDataURL('image/png'); 
    //display 64bit imag 
    var image = new Image(); 
    image.src = data; 
    document.getElementById('image').appendChild(image); 
    // AJAX call to send `data` to a PHP file that creates an PNG image from the dataURI string and saves it to a directory on the server 

    var file= dataURLtoBlob(data); 

// Create new form data 
var fd = new FormData(); 
fd.append("imageNameHere", file); 

$.ajax({ 
    url: "uploadFile.php", 
    type: "POST", 
    data: fd, 
    processData: false, 
    contentType: false, 
}).done(function(respond){ 

    $(".return-data").html("Uploaded Canvas image link: <a href="+respond+">"+respond+"</a>").hide().fadeIn("fast"); 
    }); 

    } 
}); 

function dataURLtoBlob(dataURL) { 
// Decode the dataURL  
var binary = atob(dataURL.split(',')[1]); 
// Create 8-bit unsigned array 
var array = []; 
for(var i = 0; i < binary.length; i++) { 
    array.push(binary.charCodeAt(i)); 
} 
// Return our Blob object 
return new Blob([new Uint8Array(array)], {type: 'image/png'}); 
} 

</script>

here is a sample demo

Nguồn

2013-09-02 06:02:59 luckyamit

Rất vui vì tất cả đã thành công cho bạn! – Scottie

Làm tốt lắm! Cảm ơn! Bạn thực sự giúp tôi. – r3mmel

Làm cách nào để chuyển đổi toàn bộ dữ liệu div của tôi thành hình ảnh và lưu nó vào thư mục mà không cần sử dụng canvas?

Trả lời

Các vấn đề liên quan