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

在浏览器控制台查看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(“”),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部分：

开始截图

测试文字测试文字测试文字测试文字测试文字测试文字测试文字测试文字

测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试

好好好

跨域图片

最后

四轮技术面+一轮hr面结束，学习到了不少，面试也是一个学习检测自己的过程，面试前大概复习了 一周的时间，把以前的代码看了一下，字节跳动比较注重算法，面试前刷了下leetcode和剑指offer， 也刷了些在牛客网上的面经。大概就说这些了，写代码去了~

祝大家都能收获大厂offer~

篇幅有限，仅展示部分内容