Fatal编程技术网
  • javascript/
  • 如何使用JavaScript拍摄div的屏幕截图？

如何使用JavaScript拍摄div的屏幕截图？

javascript jquery html

如何使用JavaScript拍摄div的屏幕截图？,javascript,jquery,html,Javascript,Jquery,Html,我正在构建一个叫做“HTML测验”的东西。它完全在JavaScript上运行，非常酷 最后，会弹出一个结果框，上面写着“你的结果：”并显示他们花了多少时间，他们得到了多少百分比，以及他们从10个问题中得到了多少问题。我想有一个按钮，上面写着“捕获结果”，让它以某种方式拍摄一个屏幕截图或div的某个部分，然后在页面上显示捕获的图像，他们可以右键单击并“将图像另存为” 我真的很想这样做，这样他们就可以与其他人分享他们的成果。我不希望他们“复制”结果，因为他们可以很容易地改变这一点。如果他们改变了图片

我正在构建一个叫做“HTML测验”的东西。它完全在JavaScript上运行，非常酷

最后，会弹出一个结果框，上面写着“你的结果：”并显示他们花了多少时间，他们得到了多少百分比，以及他们从10个问题中得到了多少问题。我想有一个按钮，上面写着“捕获结果”，让它以某种方式拍摄一个屏幕截图或div的某个部分，然后在页面上显示捕获的图像，他们可以右键单击并“将图像另存为”

我真的很想这样做，这样他们就可以与其他人分享他们的成果。我不希望他们“复制”结果，因为他们可以很容易地改变这一点。如果他们改变了图片上的内容，好吧

有人知道这样做的方法吗

据我所知你不能那样做，我可能错了。然而，我会用php实现这一点，使用php标准函数生成一个JPEG，然后显示图像，这应该不是一项很难的工作，但是取决于DIV的内容有多华而不实，据我所知，使用javascript是不可能的

您可以为每个结果执行的操作创建一个屏幕截图，将其保存在某个位置，并在单击“保存结果”时指向用户。（我想没有结果只有10，所以创建10个jpeg结果图像没什么大不了的）

没有，我不知道如何“截屏”元素，但你可以做的是，将测验结果绘制到画布元素中，然后使用
HTMLCanvasElement
对象的
toDataURL
函数获取包含图像内容的
数据：
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());
当用户单击“捕获”时，请执行以下操作：

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());
这将打开一个带有“屏幕截图”的新选项卡或窗口，允许用户保存它。无法调用“另存为”对话框，因此我认为这是您能做的最好的选择。

您不能截屏：让您这样做会带来不负责任的安全风险。但是，您可以：

  • 在服务器端执行操作并生成映像
  • 绘制类似于画布的内容并将其渲染为图像（在支持它的浏览器中）
  • 使用其他图形库直接绘制到图像（速度慢，但可在任何浏览器上使用）
这是@Dathan的扩展，使用和

此代码块等待单击id为
btnSave
的按钮。如果是，它会将
小部件
div转换为画布元素，然后使用saveAs（）FileSaver接口（在本机不支持它的浏览器中通过FileSaver.js）将div保存为名为“Dashboard.png”的图像

这个工作的一个例子可以在这里找到。

如果您希望有“另存为”对话框，只需将图像传递到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>


拯救
$（文档）.ready（函数（）{
var canvas=document.getElementById（'canvas'）；
var oCtx=canvas.getContext（“2d”）；
oCtx.beginPath（）；
oCtx.moveTo（0,0）；
oCtx.lineTo（300150）；
oCtx.stroke（）；
$（'#btn'）。在（'click'，function（）上{
//打开对话框，但位置不会因“另存为”对话框而更改
document.location.href='/script.php？image='+canvas.toDataURL（）；
});
});
查看软件包，然后深入检查客户端部分：

npm install htmlshot


$（“#下载”）。在（'click'，function（）上{
html2canvas（$（“#打印表单”）{
onrendered：函数（画布）{
var url=canvas.toDataURL（）；

var triggerDownload=$（“
经过数小时的研究，我终于找到了一个解决方案，可以截取一个元素的屏幕截图，即使设置了
origin clean
标志（防止XSS），这就是为什么你甚至可以捕获例如谷歌地图（在我的例子中）。我编写了一个通用函数来获取屏幕截图。除此之外，您唯一需要的就是html2canvas库（）

示例：


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);
});



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
    });
}



很简单，您可以使用此代码捕获特定区域的屏幕截图
您必须在html2canvas中定义div id。我在这里使用的是2 div-：


div id=“汽车”

div id=“chartContainer”

如果您只想捕获汽车，请使用汽车我在这里捕获汽车，您可以更改图表容器以捕获图形
html2canvas（$（'car'）
复制并粘贴此代码




window.onload=函数（）{
var chart=new CanvasJS.chart（“chartContainer”{
animationEnabled：没错，
主题：“light2”，
标题：{
正文：“简单折线图”
},
axisY：{
包括：错
},
数据：[{
键入：“行”，
数据点：[
{y:450}，
{y:414}，
{y:520，索引标签：“最高”，标记颜色：“红色”，标记类型：“三角形”}，
{y:460}，
{y:450}，
{y:500}，
{y:480}，
{y:480}，
{y:410，indexLabel:“最低”，markerColor:“深灰色”，markerType:“交叉”}，
{y:500}，
{y:480}，
{y:510}
]
}]
});
chart.render（）；
}


>
函数gensscreenshotgraph（）
{
html2canvas（$（'car'）{
onrendered：函数（画布）{
var imgData=canvas.toDataURL（“image/jpeg”）；
var pdf=新的jsPDF（）；
pdf.addImage（imgData，'JPEG'，0,0，-180，-180）；
pdf.save（“download.pdf”）；
}
});
}


在index.html中添加此脚本


OP从来没有建议他使用服务器端处理，不过如果他是，这也没关系。是的，我不能使用服务器端的东西

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
    });
}



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



  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();
}