디바의 내용을 이미지로 저장하는 방법?

디바의 내용을 이미지로 저장하는 방법?

기본적으로 나는 디바의 내용을 이미지로 저장하기 위해 표제어가 말하는 대로 하고 있습니다.

저는 아이패드를 위한 작은 온라인 어플리케이션을 만들 계획입니다.

웹 페이지 전체를 이미지로 저장하고 아이패드의 카메라 롤에 저장할 수 있는 '저장' 버튼이 필수적인 기능 중 하나입니다.보이는 부분만 저장하는 게 아니라 디브의 전체 내용을 저장하고 싶습니다.

온라인으로 간단히 검색해 보았지만, 어떤 것에 대해서도 많은 문서를 찾을 수 없었습니다.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(또는 기타 자바스크립트 라이브러리)로만 구축됩니다.

이와 같은 질문(1, 2)이 몇 가지 있습니다.그것을 하는 한가지 방법은 캔버스를 사용하는 것입니다.이것이 효과적인 해결책이 있습니다.여기에서 이 라이브러리를 사용하는 몇 가지 작업 예를 볼 수 있습니다.

다음과 같은 작업을 수행합니다.

A <div>라는 신분으로#imageDIV, 신분증이 있는 다른 사람#download숨겨진 것과<div>신분증을 가지고#previewImage.

jspdf CDN의 jquery 및 jspdf.debug.js의 최신 버전을 포함합니다.

그런 다음 이 스크립트를 추가합니다.

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

요소에 전체 화면을 적용한 다음 화면을 인쇄하는 것은 어떻습니까?html과 js로만 가능합니다.이건 그냥 생각일 뿐입니다.비슷한 것이 필요한데 아직 테스트를 해보지 못했습니다.

언급URL : https://stackoverflow.com/questions/18581379/how-to-save-the-contents-of-a-div-as-a-image