JavaScript로 div 스크린샷을 찍는 방법

JavaScript로 div 스크린샷을 찍는 방법

저는 'HTML 퀴즈'라는 것을 만들고 있습니다.완전히 JavaScript로 실행되며 매우 멋집니다.

마지막에는 "Your Results:(당신의 결과:)"라고 표시된 결과 상자가 나타납니다. 결과 상자에는 10개 중 몇 개의 문제를 맞혔는지, 몇 퍼센트를 맞혔는지, 몇 개의 문제를 맞혔는지 표시됩니다.「결과 캡쳐」라고 하는 버튼이 있으면, 어떻게든 스크린샷등의 div를 촬영해, 오른쪽 클릭을 할 수 있는 페이지에 캡쳐 한 이미지를 표시해 「다른 이름으로 보존」하고 싶다고 생각하고 있습니다.

나는 그들이 그들의 결과를 다른 사람들과 공유할 수 있도록 정말 이것을 하고 싶다.결과를 쉽게 바꿀 수 있기 때문에 '복사'하지 않았으면 합니다.이미지 내용을 바꾸면 아, 그렇군요.

이거 할 줄 아는 사람 있어요?

아니요, 요소를 '스크린샷'하는 방법은 모르지만, 퀴즈 결과를 캔버스 요소로 그린 다음HTMLCanvasElement오브젝트toDataURL취득하는 기능data:이미지 내용이 포함된 URI.

퀴즈가 끝나면 다음을 수행합니다.

var c = document.getElementById('the_canvas_element_id');
var t = c.getContext('2d');
/* then use the canvas 2D drawing functions to add text, etc. for the result */

사용자가 "캡처"를 클릭하면 다음을 수행합니다.

window.open('', document.getElementById('the_canvas_element_id').toDataURL());

이렇게 하면 '스크린샷'이 있는 새 탭 또는 창이 열리고 사용자가 저장할 수 있습니다.'다른 이름으로 저장' 대화 상자를 호출할 방법이 없기 때문에, 이것이 당신이 할 수 있는 최선이라고 생각합니다.

이것은 html2canvas와 FileSaver.js를 사용하여 @Dathan의 답변을 확장한 것입니다.

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;


                canvas.toBlob(function(blob) {
                    saveAs(blob, "Dashboard.png"); 
                });
            }
        });
    });
});

이 코드 블록은 ID를 가진 버튼을 기다립니다.btnSave클릭합니다.이 경우, 이 변환에 의해widgetdiv를 캔버스 요소로 이동한 후 saveAs() FileSaver.js 인터페이스를 사용하여(네이티브로 지원하지 않는 브라우저의 FileSaver.js를 통해) div를 "Dashboard.png"라는 이미지로 저장합니다.

이 작업의 예는 이 바이올린에서 볼 수 있다.

몇 시간 동안의 연구 끝에, 저는 마침내 원소의 스크린샷을 찍을 수 있는 해결책을 찾았습니다.origin-cleanFLAG는 (XSS를 방지하기 위해) 설정되어 있기 때문에 Google 지도(내 경우)를 캡처할 수도 있습니다.저는 캡쳐를 하기 위해 유니버설 함수를 썼습니다.필요한 것은 html2gl 라이브러리(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
    });
}

"이름 지어 저장" 대화상자를 원하는 경우 적절한 헤더를 추가하는 php 스크립트에 이미지를 전달합니다.

' 스크립트 '올인원'script.php

<?php if(isset($_GET['image'])):
    $image = $_GET['image'];

    if(preg_match('#^data:image/(.*);base64,(.*)$#s', $image, $match)){
        $base64 = $match[2];
        $imageBody = base64_decode($base64);
        $imageFormat = $match[1];

        header('Content-type: application/octet-stream');
        header("Pragma: public");
        header("Expires: 0");
        header("Cache-Control: must-revalidate, post-check=0, pre-check=0");
        header("Cache-Control: private", false); // required for certain browsers
        header("Content-Disposition: attachment; filename=\"file.".$imageFormat."\";" ); //png is default for toDataURL
        header("Content-Transfer-Encoding: binary");
        header("Content-Length: ".strlen($imageBody));
        echo $imageBody;
    }
    exit();
endif;?>

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js?ver=1.7.2'></script>
<canvas id="canvas" width="300" height="150"></canvas>
<button id="btn">Save</button>
<script>
    $(document).ready(function(){
        var canvas = document.getElementById('canvas');
        var oCtx = canvas.getContext("2d");
        oCtx.beginPath();
        oCtx.moveTo(0,0);
        oCtx.lineTo(300,150);
        oCtx.stroke();

        $('#btn').on('click', function(){
            // opens dialog but location doesnt change due to SaveAs Dialog
            document.location.href = '/script.php?image=' + canvas.toDataURL();
        });
    });
</script>

이 스크립트를 index.html에 추가합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

이 기능을 사용하여 div 태그의 스크린샷을 가져옵니다.

  getScreenShot(){
    let c = this.elem.nativeElement.querySelector('.chartContainer'); // or document.getElementById('canvas');
    html2canvas(c).then((canvas:any)=>{
      var t = canvas.toDataURL().replace("data:image/png;base64,", "");
      this.downloadBase64File('image/png',t,'image');
    })
  }

downloadBase64File(contentType:any, base64Data:any, fileName:any) {
  const linkSource = `data:${contentType};base64,${base64Data}`;
  const downloadLink = document.createElement("a");
  downloadLink.href = linkSource;
  downloadLink.download = fileName;
  downloadLink.click();
}

스크린샷을 찍을 수 없습니다.그렇게 하는 것은 무책임한 보안 리스크가 됩니다.단, 다음 작업을 수행할 수 있습니다.

• 서버측에서 작업하여 이미지 생성
• 캔버스와 유사한 것을 그려 이미지로 렌더링합니다(지원하는 브라우저에서).
• 다른 도면 라이브러리를 사용하여 이미지에 직접 그리기(느리지만 모든 브라우저에서 작동 가능)

var shot1=imagify($('#widget')[0], (base64) => {
  $('img.screenshot').attr('src', base64);
});

htmlshot 패키지를 살펴보고 클라이언트 측 섹션을 자세히 확인합니다.

npm install htmlshot

<script src="/assets/backend/js/html2canvas.min.js"></script>


<script>
    $("#download").on('click', function(){
        html2canvas($("#printform"), {
            onrendered: function (canvas) {
                var url = canvas.toDataURL();

                var triggerDownload = $("<a>").attr("href", url).attr("download", getNowFormatDate()+"电子签名详细信息.jpeg").appendTo("body");
                triggerDownload[0].click();
                triggerDownload.remove();
            }
        });
    })
</script>

견적서

간단하게는 이 코드를 사용하여 div ID를 html2canvas로 정의해야 하는 특정 영역의 스크린샷을 캡처할 수 있습니다. 2div-: 2div-를 사용하고 있습니다.

id = "div id = "car"
id =div id ="chartContainer"
차량만 캡처하고 싶다면 car를 사용하십시오.여기서 캡처하는 차량만 변경할 수 있습니다.그래프 html2canvas($('#car')를 캡처하기 위한 컨테이너는 이 코드를 복사하여 붙여넣습니다.

<html>
    <head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.5/jspdf.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<script>
    window.onload = function () {
    
    var chart = new CanvasJS.Chart("chartContainer", {
        animationEnabled: true,
        theme: "light2",
        title:{
            text: "Simple Line Chart"
        },
        axisY:{
            includeZero: false
        },
        data: [{        
            type: "line",       
            dataPoints: [
                { y: 450 },
                { y: 414},
                { y: 520, indexLabel: "highest",markerColor: "red", markerType: "triangle" },
                { y: 460 },
                { y: 450 },
                { y: 500 },
                { y: 480 },
                { y: 480 },
                { y: 410 , indexLabel: "lowest",markerColor: "DarkSlateGrey", markerType: "cross" },
                { y: 500 },
                { y: 480 },
                { y: 510 }

            ]
        }]
    });
    chart.render();
    
    }
</script>
</head>

<body bgcolor="black">
<div id="wholebody">  
<a href="javascript:genScreenshotgraph()"><button style="background:aqua; cursor:pointer">Get Screenshot of Cars onl </button> </a>

<div id="car" align="center">
    <i class="fa fa-car" style="font-size:70px;color:red;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    <i class="fa fa-car" style="font-size:50px;color:red;"></i>
    <i class="fa fa-car" style="font-size:20px;color:red;"></i>
    <i class="fa fa-car" style="font-size:50px;color:red;"></i>
    <i class="fa fa-car" style="font-size:60px;color:red;"></i>
    <i class="fa fa-car" style="font-size:70px;color:red;"></i>
</div>
<br>
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="box1">
</div>
</div>>
</body>

<script>

function genScreenshotgraph() 
{
    html2canvas($('#car'), {
        
      onrendered: function(canvas) {

        var imgData = canvas.toDataURL("image/jpeg");
        var pdf = new jsPDF();
        pdf.addImage(imgData, 'JPEG', 0, 0, -180, -180);
        pdf.save("download.pdf");
        
      
      
      }
     });

}

</script>

</html>

네가 그럴 수 없다는 걸 내가 아는 한 내가 틀릴 수도 있어.그러나 나는 이것을 php로 하고, php 표준 함수를 사용하여 JPEG를 생성하고, 이미지를 표시하는 것은 매우 어려운 일이 아니지만, DIV의 내용이 얼마나 화려한지에 따라 달라집니다.

** 이것은 ~11년 전의 답변입니다.이 답변은 무시하고 최근 답변은 이쪽**에서 확인하시기 바랍니다.Javascript에서는 불가능할 것으로 알고 있습니다.

모든 결과에 대해 당신이 할 수 있는 것은 스크린샷을 만들고, 그것을 어디에 저장하고, 저장 결과를 클릭했을 때 사용자를 가리킬 수 있습니다.(결과 없음은 10개뿐이므로 10개의 jpeg 이미지를 만드는 것은 큰 문제가 되지 않습니다.)

언급URL : https://stackoverflow.com/questions/6887183/how-to-take-screenshot-of-a-div-with-javascript