>

기본적으로 제목 상태를 수행하고 div의 내용을 이미지로 저장하려고합니다.

iPad를위한 작은 온라인 응용 프로그램을 만들 계획입니다.

필수적인 기능 중 하나는 전체 웹 페이지를 이미지로 저장하고 해당 이미지를 iPad의 카메라 롤에 저장할 수있는 '저장'버튼이 있습니다. 보이는 영역뿐만 아니라 div의 전체 내용을 저장하고 싶습니다.

온라인으로 간단히 검색했지만 아무 내용에 대한 많은 문서를 찾을 수 없습니다. HTML5 Canvas에서 많은 것을 발견했습니다. 다음은 내가 작성한 코드입니다.

<script>
function saveimg()
{
    var c = document.getElementById('mycanvas');
    var t = c.getContext('2d');
    window.location.href = image;
    window.open('', document.getElementById('mycanvas').toDataURL());
}
</script>
<div id="mycanvas">
This is just a test<br />
12344<br />
</div>
<button onclick="saveimg()">Save</button>

이 오류가 발생합니다 :

TypeError: c.getContext is not a function

이 응용 프로그램은 HTML, CSS 및 jQuery (또는 기타 Javascript 라이브러리)로만 빌드됩니다.

  • 답변 # 1

    이 같은 질문 중 몇 가지가 있습니다 (1, 2). 이를 수행하는 한 가지 방법은 캔버스를 사용하는 것입니다. 작동하는 솔루션은 다음과 같습니다. 여기이 라이브러리를 사용하는 몇 가지 실제 예제가 있습니다.

  • 답변 # 2

    다음과 같이하십시오 :

    와이즈 비즈   <div> 의 ID로 , ID가 #imageDIV 인 다른 하나  그리고 숨겨진 #download  아이디 <div> .

    jspdf CDN에서 최신 버전의 jquery 및 jspdf.debug.js 포함

    다음 스크립트를 추가하십시오 :

    #previewImage
    
    

    var element = $("#imageDIV"); // global variable var getCanvas; // global variable $('document').ready(function(){ html2canvas(element, { onrendered: function (canvas) { $("#previewImage").append(canvas); getCanvas = canvas; } }); }); $("#download").on('click', function () { var imgageData = getCanvas.toDataURL("image/png"); // Now browser starts downloading it instead of just showing it var newData = imageData.replace(/^data:image\/png/, "data:application/octet-stream"); $("#download").attr("download", "image.png").attr("href", newData); }); 를 클릭하면 div가 PNG로 저장됩니다  

    #download

  • 이전 ios - iOS12, kReachabilityChangedNotification이 작동하지 않습니다
  • 다음 javascript - JS 체인의 시작 부분에서 밑줄은 무엇을 의미합니까?