DOM 요소를 이미지에 저장/내보내기하는 방법은 무엇입니까?

Question

양식 안에 ID 번호가 알려진 양식 요소 ( )가 있고 여러 DIV가 있고 각 div의 위치가 변경 될 수 있습니다. .

내가 뭘하려는 있습니다 :

이

a)이 형태의 현재 상태를 저장

// var currentForm=document.forms['myFrm'].innerHTML; 

아마 충분 ...

B) 저장 또는 전체를 내보낼 각 DIV 의 가장 최근 위치를 이미지 파일에 첨부하십시오.

// currentForm의 javascript var를 이미지 파일로 저장/내보내는 것이 중요한 질문입니다.

도움/포인터를 보내 주시면 감사하겠습니다.

Answer 1

JavaScript로 완전히 하시겠습니까? 그렇다면 가능한 한 가지 해결책은 HTML을 SVG로 변환하는 것입니다. 또는 <canvas> 태그를 사용하여 수동으로 그릴 수 있습니다. 당신이 원하는 것은 <form>의 값의 serialization처럼 내가 당신을 이해 해요 희망

Answer 2

, 그것은 소리 : 데이터 저장 및 전송의 맥락에서, 컴퓨터 과학에서

, 직렬화이다 이 , 파일의 메모리 버퍼 저장하거나 네트워크 연결 링크를 통해 전송 될 수 있도록 비트 시퀀스로 데이터 구조 또는 객체 변환 의 처리는 나중에 동일한에서 "을 부활"될 영형 다른 컴퓨터 환경.

JavaScript Form Serialization Comparison은 JavaScript 및 JavaScript 라이브러리를 사용하여 양식을 양식으로 직렬 저장하여 저장할 수있는 몇 가지 방법을 비교합니다.

Answer 3

원하는 것을 수행해야하는 Domvas 라이브러리가 있습니다. 그것은 당신에게 당신의 선택의 캔버스를 임의의 DOM의 콘텐츠를 가지고 에 페인트 할 수있는 기능을 제공

.

그 캔버스 요소에서 이미지를 수출하는 것은 매우 쉬워야 후 :

var canvas = document.getElementById("mycanvas"); 
var img = canvas.toDataURL("image/png"); 
document.write('<img src="'+img+'"/>'); 

Answer 4

연구의 시간 후에, 나는 마침내 심지어 origin-clean FLAG가있는 경우, 요소의 화면을 캡처 할 수있는 해결책을 발견 (XSS를 방지하기 위해) 설정 되었기 때문에 Google지도를 캡처 할 수 있습니다 (필자의 경우). 나는 스크린 샷을 얻는 보편적 인 함수를 썼다. 추가로 필요한 것은 html2canvas 라이브러리 (https://html2canvas.hertzen.com/)뿐입니다.

예 :

getScreenshotOfElement($("div#toBeCaptured").get(0), 0, 0, 100, 100, function(data) { 
    // in the data variable there is the base64 image 
    // exmaple for displaying the image in an <img> 
    $("img#captured").attr("src", "data:image/png;base64,"+data); 
} 

염두 console.log() 곳에 화상의 크기가 큰 경우 alert() 이뤄져는 출력을 생성한다.

기능 : 이해가 안

function getScreenshotOfElement(element, posX, posY, width, height, callback) { 
    html2canvas(element, { 
     onrendered: function (canvas) { 
      var context = canvas.getContext('2d'); 
      var imageData = context.getImageData(posX, posY, width, height).data; 
      var outputCanvas = document.createElement('canvas'); 
      var outputContext = outputCanvas.getContext('2d'); 
      outputCanvas.width = width; 
      outputCanvas.height = height; 

      var idata = outputContext.createImageData(width, height); 
      idata.data.set(imageData); 
      outputContext.putImageData(idata, 0, 0); 
      callback(outputCanvas.toDataURL().replace("data:image/png;base64,", "")); 
     }, 
     width: width, 
     height: height, 
     useCORS: true, 
     taintTest: false, 
     allowTaint: false 
    }); 
}