이미지를 png 파일에 저장

javascript.I를 사용하여 웹 페이지를 png 파일에 저장하고 싶습니다. 아래 샘플 코드에 지쳐 있습니다. 하지만 문제는 무엇입니까 내가 그것을 다운로드 할 때 확장은 image/octet-stream이지만 파일을 다운로드하는 동안 png 형식으로 이미지를 저장하고 싶습니다. 어떻게 이미지/옥텟 스트림 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

출처

2013-10-10 10:44:19 madeddie

내가 필요 (자바 스크립트에서 'IMG'VAR를 가리키는 것입니다 대답의 HREF) 위의 링크를 로컬 시스템에 다운로드하면 서버에 다운로드하라는 메시지가 나타납니다. – Navyah

나는 무엇을 의미하는지 모르겠다. 선택한 대답을 클릭하면 브라우저에서 이미지를 다운로드하는 링크가 만들어집니다. 그러나 요점은 Canvas toDataUrl 함수 만 사용하여 스크린 샷을 다운로드 할 수있는 것은 (모든 브라우저에서) 보편적이지는 않다는 것입니다. – madeddie

안녕하세요 madeddie, 그러면 스크린 샷을 가져 와서 png 파일에 저장할 수있는 다른 클라이언트 측 접근 방식이 있습니까 – Navyah

이미지를 png 파일에 저장

답변

관련 문제