1

我想使用 javascript 将网页存储到 png 文件中。我厌倦了下面的示例代码。但问题是当我下载它的下载扩展名时，image/octet-stream但在下载文件期间我想以 png 格式存储图像。如何从 image/octet-stream 扩展名下载图像到 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>
4

1 回答 1

0

恐怕这就是 toDataURL 的工作原理。

请参阅以下问题以获取一个有点丑陋的解决方案的答案：

使用“打开方式”对话框命名从 Canvas 保存的 PNG 文件

（答案中的 href 将指向 javascript 中的“img”变量）

于 2013-10-10T10:44:19.323 回答