JavaScript实现浏览器特定区域截屏和下载功能

最新推荐文章于 2024-10-03 16:04:43 发布

Sheldon一蓑烟雨任平生

最新推荐文章于 2024-10-03 16:04:43 发布

阅读量5.4k

点赞数 7

分类专栏：百宝箱文章标签： js实现网页区域截图和下载功能完整demo

本文链接：https://blog.csdn.net/qq_39055970/article/details/118993553

版权

百宝箱专栏收录该内容

7 篇文章 0 订阅

订阅专栏

JavaScript实现浏览器特定区域截屏功能

需求介绍
尝试一：使用Jtopo.js自带的保存图片方法（不能对资源进行下载）
尝试二：对saveImageInfo进行改写（功能能用，但是会因为跨域问题污染canvas）：
尝试三：对浏览器进行区域截屏并下载（可用）

需求介绍

最近使用Jtopo进行一个简单版拓扑图编辑器的开发。其中有一个需求就是将编辑器canvas部分进行截图并进行下载。
在这里插入图片描述

尝试一：使用Jtopo.js自带的保存图片方法（不能对资源进行下载）

使用Jtopo的stage.saveImageInfo()原生方法，发现该方法只是将canvas部分制作成base64并且在跳转到新的页面进行展示。
在这里插入图片描述

在这里插入图片描述
在浏览器控制台查看stage.saveImageInfo方法，可以看到该方法总共只有3条语句：

ƒ (a,b){
	var c=this.eagleEye.getImage(a,b),	// 通过Jtopo.js自带的方法获取canvas的截图base64资源
	d=window.open("about:blank");	// 打开新的浏览器标签页
	return d.document.write("<img src='"+c+"' alt='from canvas'/>"),this	// 将截取的base64资源作为图片资源放置到新的浏览器标签页img标签中
}

尝试二：对saveImageInfo进行改写（功能能用，但是会因为跨域问题污染canvas）：

于是，就需要对原有的方法进行扩展或者重写（功能虽然能用，但是会有bug）：

	// 重写JTopo下载源码，提供下载图片功能
    function saveImage() {
        let imgData = stage.eagleEye.getImage();
        imgData = imgData.replace("image/png", "image/octet-stream")
        var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
        save_link.href = imgData;
        // 保存的文件名
        save_link.download = (new Date()).getTime() + '.png';
        	
        scene.background = save_link.download

        var event = document.createEvent('MouseEvents');
        event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
        save_link.dispatchEvent(event);
    };

在这里插入图片描述
虽然改写后的方法确实能够做到将canvas的部分进行截图，但是因为跨域问题，原来绘制的canvas会被破坏。

尝试三：对浏览器进行区域截屏并下载（可用）

该尝试参考了文章https://www.cnblogs.com/xinchenhui/p/10886140.html
考虑到canvas的污染问题，于是思考不对原来的canvas进行操作，而是直接对整个浏览器进行区域截屏的方式，发现果然可用。
html部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>测试截取保存或打印</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
    <script type="text/javascript" src="js/html2canvas.js"></script>
    <script type="text/javascript" src="js/jQuery.print.js"></script>
    <script type="text/javascript" src="js/jcanvas.min.js"></script>
    <script type="text/javascript" src="js/screenshotsPrint.js"></script>
    <style>
        body, html {
            width: 100%;
            height: 100%;
        }
        .print {
            position: relative;
            z-index: 100;
        }
        h1 {
            color: orangered;
        }
        h2 {
            color: darkblue;
        }
        h2 {
            color: forestgreen;
        }
        #bg_canvas {
            position: absolute;
            z-index: 500;
            left: 0;
            top: 0;
        }
    </style>
</head>
<body>
<button class="print">开始截图</button>
<div>
    <h1>测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字</h1>
    <h2>测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试</h2>
    <h3>好好好</h3>
    <br/>
    <p>跨域图片</p>
    <img src="http://p7.qhimg.com/t01ceede0272d4b5a8b.png" alt="来个跨区的图片">
</div>
<!-- 用于画选取框的canvas -->
<canvas id="bg_canvas" width="100%" height="100%" style="display: none;"/>
<script>
    $(function(){
        var clientWidth = document.documentElement.clientWidth || document.body.clientWidth
        var clientHeight = document.documentElement.clientHeight || document.body.clientHeight
        // 更新canvas宽高
        $("#bg_canvas").attr("width", clientWidth);
        $("#bg_canvas").attr("height", clientHeight);
        $(".print").click(function(){
            $("#bg_canvas").show()
            //调用选取截屏
            clipScreenshots("bg_canvas");
            $("#bg_canvas").hide()
        });


    });
</script>
</body>
</html>

核心js部分——screenshotsPrint.js：

function clipScreenshots(){
     // 把body转成canvas
     html2canvas(document.body, {
        scale: 1,
        // allowTaint: true,
        useCORS: true  //跨域使用
    }).then(canvas => {
        printClip(canvas, 10, 10, 100, 100)
    });
 }
 
 /**
  * 打印截取区域
  * @param canvas 截取的canvas
  * @param capture_x 截取的起点x
  * @param capture_y 截取的起点y
  * @param capture_width 截取的起点宽
  * @param capture_height 截取的起点高
  */
 function printClip(canvas, capture_x, capture_y, capture_width, capture_height) {
     // 创建一个用于截取的canvas
     var clipCanvas = document.createElement('canvas')
     clipCanvas.width = capture_width
     clipCanvas.height = capture_height
     // 截取
     clipCanvas.getContext('2d').drawImage(canvas, capture_x, capture_y, capture_width, capture_height, 0, 0, capture_width, capture_height)
     var clipImgBase64 = clipCanvas.toDataURL()
     // 生成图片
     var clipImg = new Image()
     clipImg.src = clipImgBase64
         downloadIamge(clipImgBase64)
 }
 
 /**
  * 下载保存图片
  * @param imgUrl 图片地址
  */
 function downloadIamge(imgUrl) {
     // 图片保存有很多方式，这里使用了一种投机的简单方法。
     // 生成一个a元素
     var a = document.createElement('a')
     // 创建一个单击事件
     var event = new MouseEvent('click')
     // 生成文件名称
     var timestamp = new Date().getTime();
     var name = imgUrl.substring(22, 30) + timestamp + '.png';
     a.download = name
     // 将生成的URL设置为a.href属性
     a.href = imgUrl;
     // 触发a的单击事件 开始下载
     a.dispatchEvent(event);
 }