lưu hình ảnh vào đĩa của người dùng bằng cách sử dụng javascript

tôi đã chuyển nguồn cho thẻ html dưới dạng base64String bằng javascript. hình ảnh được hiển thị rõ ràng. bây giờ tôi muốn lưu hình ảnh đó vào đĩa của người dùng bằng javascript.lưu hình ảnh vào đĩa của người dùng bằng cách sử dụng javascript

<html> 
<head> 
<script> 
function saveImageAs() { 
var imgOrURL; 
embedImage.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA"+ 
"AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO"+ 
"9TXL0Y4OHwAAAABJRU5ErkJggg=="; 
imgOrURL = embedImage; 
if (typeof imgOrURL == 'object') 
    imgOrURL = embedImage.src; 
window.win = open(imgOrURL); 
setTimeout('win.document.execCommand("SaveAs")', 0); 
} 
</script> 
</head> 
<body> 
    <a href="#" ONCLICK="saveImageAs(); return false" >save image</a> 

    <img id="embedImage" alt="Red dot"> 

</body> 
</html>

mã này đã hoạt động khi chúng tôi chuyển đường dẫn hình ảnh làm nguồn cho thẻ, tuy nhiên nó không hoạt động khi chúng tôi chuyển sorce thành thẻ base64String.

vui lòng đề xuất tôi về vấn đề này.

cảm ơn trước.

Nguồn

2011-10-31 vengatesh

Tôi biết có giới hạn về việc sử dụng dữ liệu: hình ảnh ở kích thước tệp IE ... và khác. Hãy thử nhìn vào nó trước. – Fabio

nếu nó có giới hạn, sau đó nó không nên xuất hiện trên màn hình. nhưng hình ảnh được hiển thị ngay cả đối với hình ảnh có kích thước dài. tôi không thể lưu được đĩa hình ảnh đó. – vengatesh

Tôi có thể vượt qua bytearray làm nguồn cho thẻ bằng javascript không? – vengatesh

Chỉ để cho phép người dùng tải xuống hình ảnh hoặc tệp khác, bạn có thể sử dụng thuộc tính HTML5 download.

tĩnh tập tin tải về

<a href="/images/image-name.jpg" download> 
<!-- OR --> 
<a href="/images/image-name.jpg" download="new-image-name.jpg">

động tập tin tải về

Trong trường hợp yêu cầu hình ảnh động có thể thi đua tải như vậy.

Nếu hình ảnh của bạn đã được nạp và bạn có nguồn base64 thì:

saveBase64AsFile(base64, fileName) { 

    var link = document.createElement("a"); 

    link.setAttribute("href", base64); 
    link.setAttribute("download", fileName); 
    link.click(); 
}

Nếu không, nếu file ảnh đã được tải về như Blob bạn có thể sử dụng FileReader để chuyển nó sang Base64:

saveBlobAsFile(blob, fileName) { 

    var reader = new FileReader(); 

    reader.onloadend = function() {  
     var base64 = reader.result ; 
     var link = document.createElement("a"); 

     link.setAttribute("href", base64); 
     link.setAttribute("download", fileName); 
     link.click(); 
    }; 

    reader.readAsDataURL(blob); 
}

Tin xấu! Hãy cẩn thận: IE không được hỗ trợ: Caniuse link

Nguồn

2016-05-30 08:43:37

Hiện tại Safari được hỗ trợ. – Alex78191

Trong JavaScript, bạn không thể có quyền truy cập trực tiếp vào hệ thống tệp. Tuy nhiên, bạn có thể làm cho trình duyệt bật lên cửa sổ hộp thoại cho phép người dùng chọn vị trí lưu. Để làm điều này, sử dụng phương pháp replace với Base64String bạn và thay thế "image/png" với "image/octet-stream":

"data:image/png;base64,iVBORw0KG...".replace("image/png", "image/octet-stream");

Ngoài ra, trình duyệt W3C tuân thủ cung cấp 2 phương pháp để làm việc với base64 mã hóa và dữ liệu nhị phân:

Có lẽ, bạn sẽ tìm thấy chúng hữu ích theo một cách ...

Đây là một phiên bản refactored của những gì tôi hiểu bạn cần:

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"/> 
     <script type="text/javascript"> 
      window.onload = function() { 
       var img = document.getElementById('embedImage'); 
       var button = document.getElementById('saveImage'); 
       img.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA'+ 
       'AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO'+ 
       '9TXL0Y4OHwAAAABJRU5ErkJggg=='; 
       img.onload = function() { 
        button.removeAttribute('disabled'); 
       }; 
       button.onclick = function() { 
        window.location.href = img.src.replace('image/png', 'image/octet-stream'); 
       }; 
      }; 
     </script> 
    </head> 
    <body> 
     <img id="embedImage" alt="Red dot"/> 
     <input id="saveImage" type="button" value="save image" disabled="disabled"/> 
    </body> 
</html>

Bạn có thể nhìn thấy nó trong hành động HERE.

Nguồn

2011-10-31 10:25:46

Lưu ý rằng 'atob' và' btoa' chưa bao giờ là một phần của bất kỳ tiêu chuẩn nào. Chúng được hỗ trợ bởi * một số * trình duyệt tuân thủ tiêu chuẩn, nhưng không dựa vào nó trong tất cả chúng. –

@AndyE Đúng. Đó là lý do tại sao bạn phải thực hiện kiểm tra tính năng trước khi sử dụng các phương pháp này. –

@ John Doe: Tôi vẫn không thể lưu hộp thoại để lưu hình ảnh vào đĩa của người dùng – vengatesh

lưu hình ảnh vào đĩa của người dùng bằng cách sử dụng javascript

Trả lời

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