người dùng chụp div làm hình ảnh và lưu vào máy tính

Question

Tôi có Div trên trang web của mình, tôi muốn đặt một nút/liên kết (hoặc các thứ khác sắp xếp) khi nhấp vào sẽ lưu div và tất cả nội dung của nó vào người dùng máy tính, giống như mã in được sử dụng để in các div. Tôi là một người mới viết mã nên tất cả sự giúp đỡ sẽ được apreciated.

Answer 1

Có giới hạn hỗ trợ trình duyệt đang thực hiện việc này. HTML2Canvas có thể hiển thị nội dung HTML của bạn thành phần tử canvas. Sau đó, bạn có thể sử dụng phương pháp canvas.toDataURL("image/png"); (docs in MDN) để xuất phần tử canvas thành hình ảnh jpeg hoặc png.

Nó không được hỗ trợ rộng rãi nhưng vẫn có thể.

Answer 2

Giả sử bạn muốn văn bản hoặc tệp HTML, không phải tệp hình ảnh như ảnh chụp màn hình, JavaScript không thể khởi tạo hộp thoại "Lưu" trên trình duyệt web, chỉ phản hồi từ yêu cầu web đến máy chủ làm như vậy.

Để bắt đầu, bạn sẽ cần một hình thức với nút của bạn và một lĩnh vực ẩn:

<div id="saveme">stuff to save</div> 
<form action="saveme.aspx" method="POST"> 
    <input type="submit" onclick="prepsave()"> 
    <input type="hidden" id="savemepost"> 
</form> 

Và bạn cần một số Javascript để lưu nội dung DIV đến lĩnh vực tiềm ẩn trước khi đệ trình:

<script> 
    function prepsave() { 
     document.getElementById("savemepost").value = 
     document.getElementById("saveme").innerHTML; 
     return true; 
    } 
</script> 

trên máy chủ, bạn sẽ cần một số mã để chấp nhận các văn bản và nhổ nó trở ra dưới dạng một tập tin đính kèm tập tin:

<script runat="server"> 
    Response.Clear() 
    Response.AddHeader("content-disposition","attachment; filename=saved.html") 
    Response.Write(Request.Form("savemepost")) 
</script> 

Caveat # 1: Có thể có một số lỗi nhỏ trong đó và rất nhiều chỗ để cải thiện, đây chỉ là một bằng chứng về khái niệm.

Caveat # 2: Mã phía máy chủ ở trên có khả năng không an toàn, vì nó cho phép bất kỳ trang web nào kiểm soát nội dung đi tới trình duyệt web của người dùng từ miền của bạn. Bạn sẽ cần phải thêm một số biện pháp để bảo vệ điều này khỏi bị lạm dụng.

Answer 3

Cách dễ dàng

var MyDiv1 = document.getElementById('DIV1'); 
var MyDiv3 = document.getElementById('DIV2'); 
MyDiv3.innerHTML = MyDiv1.innerHTML; 


html2canvas(MyDiv3, { 
        useCORS: true, 
        onrendered: function (canvas) { 
        var dataUrl = canvas.toDataURL("image/png"); 
        document.getElementById("HiddenField1").value = dataUrl; 

        } 
       }); 

sử dụng một nút và gọi ur giá trị trường ẩn

ButtonClick1() 
{ 
    string imgval = HiddenField1.Value; 
    imgval = imgval.Replace("data:image/png;base64,", ""); 
    byte[] imgData = Convert.FromBase64String(imgval); 

    using (System.Drawing.Image image = System.Drawing.Image.FromStream(new MemoryStream(imgData))) 
    { 
     String path = Server.MapPath("~/imgFolder"); 
     image.Save(path + "\\output.jpg", ImageFormat.Jpeg); // Or Png 

    } 
} 

Answer 4

Một cách dễ dàng để làm điều này sẽ được sử dụng API Javascript GrabzIt để capture a div. Bạn sẽ chỉ cần làm một cái gì đó như sau. Nơi #features là id của div bạn muốn chụp.

<script type="text/javascript" src="grabzit.min.js"></script> 
<script type="text/javascript"> 
GrabzIt("Your Application Key").ConvertURL("http://www.example.com/my-page.html", 
{"target": "#features", "bheight": -1, "height": -1, "width": -1}).Create(); 
</script> 

Tuyên bố từ chối Tôi đã tạo API này!