如何用JavaScript截取div的截图？

Question

我正在构建一个名为"HTML测验"的东西.它完全使用JavaScript运行,非常酷.

最后,弹出一个结果框,上面写着"你的结果:",它显示了他们花了多少时间,他们得到了多少百分比,以及他们从10中得到了多少问题.我想有一个按钮说"捕获结果"并以某种方式获取屏幕截图或div的某些内容,然后只显示在页面上捕获的图像,他们可以右键单击并"将图像另存为".

我真的很想这样做,所以他们可以与他人分享他们的成果.我不希望他们"复制"结果,因为他们可以很容易地改变它.如果他们改变图像中的内容,那么哦.

有没有人知道这样做的方法或类似的东西？

Answer 1

不,我不知道一种"截图"元素的方法,但你可以做的是将测验结果绘制到canvas元素中,然后使用该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 */

当用户单击"Capture"时,请执行以下操作:

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

这将打开一个带有"屏幕截图"的新标签或窗口,允许用户保存它.没有办法调用各种各样的"另存为"对话框,所以这是我认为最好的.

Answer 2

这是使用html2canvas和FileSaver.js扩展@Dathan的答案.

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


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

此代码块等待具有btnSave要单击的id的按钮.如果是,它将widgetdiv转换为canvas元素,然后使用saveAs()FileSaver接口(通过本机不支持它的浏览器中的FileSaver.js)将div保存为名为"Dashboard.png"的图像.

这个工作的一个例子是这个小提琴.

Answer 3

经过几个小时的研究,我终于找到了一个截取元素截图的解决方案,即使origin-clean设置了FLAG(以防止XSS),这就是为什么你甚至可以捕获例如谷歌地图(在我的情况下).我写了一个通用函数来获取截图.此外,您唯一需要的是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
    });
}

Answer 4

如果您希望"另存为"对话框,只需将图像传递到php脚本,这将添加适当的标题

示例"all-in-one"脚本 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>

Answer 5

将此脚本添加到您的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();
}