Сохранение изображения в файл png

Я хочу сохранить веб-страницу в png-файле, используя javascript.I устал от кода ниже образца. но в чем проблема, когда я загружаю его загружаемое расширение, является image/octet-stream, но во время загрузки файла я хочу сохранить изображение в формате png. Как загрузить изображение из расширения image/octet-stream extenstion в расширение png. код:Сохранение изображения в файл 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

Я боюсь, что это просто, как работает toDataURL.

См следующего вопрос ответ с несколько уродливым решением:

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

(HREF в ответе будет указывать на «IMG» вар в вашем JavaScript)

источник

2013-10-10 10:44:19 madeddie

мне нужно загрузите его в мою локальную систему, указанная выше ссылка u shared говорит, чтобы загрузить ее на сервер – Navyah

Я не уверен, что вы имеете в виду, выбранный ответ создает ссылку, которая при щелчке заставит ваш браузер загружать изображение. Главное, однако, в том, что не универсально (для всех браузеров) можно скачать скриншот с помощью только функции Canvas toDataUrl. – madeddie

Привет, madeddie. Тогда есть ли другой подход на стороне клиента, где мы можем взять снимок экрана и сохранить его в файле png. – Navyah

Сохранение изображения в файл png

ответ

Смежные вопросы