將圖像存儲到PNG文件

我想用javascript將網頁存儲到png文件中。我厭倦了下面的示例代碼。但是，當我下載它的下載擴展名是image/octet-stream，但是在下載文件時，我想以png格式存儲圖像。我如何從image/octet-stream extenstion將圖像下載到png擴展名。 code：將圖像存儲到PNG文件

<!DOCTYPE html> 
<html lang="en"> 

<head> 
<meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
    <title>html2canvas example</title> 
<script type="text/javascript" src="js/html2canvas.js"></script> 
    <script type="text/javascript" src="js/excanvas.js"></script> 

    <style> 
    canvas{border:1px solid #222} 
    </style> 
</head> 
<body id="target"> 
     <a class="upload" >Upload to Imgur</a> 
    <a href="#" download="testXXX.jpg" onclick="printImg()" ><img src="images/print-icon.png" alt="Print" width="16" height="16" ></a> 
    <h2>this is <b>bold</b> <span style="color:red">red</span></h2> 
    <p> Feedback form with screenshot This script allows you to create feedback forms which include a screenshot, 
    created on the clients browser, along with the form. 
    The screenshot is based on the DOM and as such may not be 100% accurate to the real 
    representation as it does not make an actual screenshot, but builds the screenshot based on the 
    information available on the page. How does it work? The script is based on the html2canvas library, 
    which renders the current page as a canvas image, by reading the DOM and the different styles applied 
    to the elements. This script adds the options for the user to draw elements on top of that image, 
    such as mark points of interest on the image along with the feedback they send. 
     It does not require any rendering from the server, as the whole image is created on the clients browser. 
     No plugins, no flash, no interaction needed from the server, just pure JavaScript! Browser compatibility Firefox 3.5+ Newer versions of Google Chrome, Safari & Opera IE9 
    </p> 


    <script type="text/javascript"> 

    function printImg(){ 
     html2canvas([ document.body ],{ 
      onrendered: function(canvas) { 

      var img = canvas.toDataURL("image/png").replace("image/png","image/octet-stream;base64");     
      window.location.href=img; 

      } 
     }); 
     } 


    </script> 
</body> 
</html>

來源

2013-10-10 Navyah

恐怕這只是如何dataURL的作品。

請參見下面的問題與一個有點醜陋的解決方案答案：

Name a PNG file saved from Canvas using an "open with" dialog

（在答案中的href將指向「IMG」變種在你的JavaScript）

來源

2013-10-10 10:44:19 madeddie

我需要下載到我的本地系統，上面的鏈接u共享說要下載它在服務器 – Navyah

我不知道你的意思，選擇的答案創建一個鏈接，點擊後，導致您的瀏覽器下載圖像。主要的一點是，它不是普遍的（對於所有的瀏覽器）可以下載一個屏幕截圖只有Canvas toDataUrl函數。 – madeddie

嗨madeddie，那麼有沒有其他的客戶端方法，我們可以截取屏幕截圖並將其存儲在PNG文件 – Navyah

將圖像存儲到PNG文件

回答

相關問題