js实现纯前端截屏（可以对iframe的内容进行截取）
1. 最近在碰到一个需求需要，在系统中增加一个可以对系统页面进行自由截图的功能，又不通过后端辅助，开始在网上找资源发现一个叫kscreenshot的插件可以实现截屏（https://github.com/kejiacheng/kscreenshot），这个工具已经集成了添加标注等功能，比较接近qq和微信自带的截图功能，但是坑爹的是这个工具不能在ie下运行，也不能对iframe下的内容进行截取，无法满足需求，次数pass掉，只能另谋它路了。
2. 继续找资源，发现可以使用cropper.js（https://github.com/fengyuanchen/cropperjs）进行截图，这个插件可以在ie下运行，但是只能对img标签元素进行截取，其他的元素不生效，所以大体思路是在截图的时候将其他元素转为img的图片格式，退出截图后还原为原来的标签格式。根据这个思路所以需要使用html2canvas（https://github.com/niklasvh/html2canvas），因为html2canval中使用promise异步函数，所以想要在ie下运行还需要bluebird.js（http://bluebirdjs.com/docs/api-reference.html），此时需要的工具都已经齐全了，开始写示例。
步骤：
1. 将iframe的内容转换成canvas返回给父页面
子页面中引入bluebird.js和html2canvas.min.js，然后定义函数getContent接受一个回调函数作为参数，将iframe的内容转成的canvas返回出去
function getContent(callback){
html2canvas(document.querySelector(".jimu-main-font"), {//jimu-main-font是iframe的内容的类名
x:window.pageXOffset, //页面在水平方向的滚动距离
y:window.pageYOffset,//页面在垂直方向的滚动距离
foreignObjectRendering : true,
allowTaint :false,
taintTest: true,
scale: 1,
dpi:150,
width: $(".jimu-main-font").width(),
height: $(".jimu-main-font").height(),
useCORS:true,//保证跨域图片的显示，如果为不添加改属性，或者值为false,地图底图不显示
onrendered: function (canvas) {//内容获取完后执行
callback(canvas);//执行回调
}
});
}
2. 在父页面中引入bluebird.js、cropper.css和cropper.js
然后嵌入iframe，并且多定义一个img标签用于显示iframe的内容
当启动截屏的时候调用iframe中的getContent函数传入一个回调函数，接受iframe的内容，
var result = null;
var $image = $('#image1');
var downLoadImg = {};
//开始截图
$("#startJt1").on("click",function () {
$("#testIframe")[0].contentWindow.getContent(function (canvas) {//获取iframe的内容
//canvas是iframe的内容
var imgUrl = canvas.toDataURL();//toDataURL是转url
console.log(imgUrl);
$("#testIframe").css("display","none");//隐藏iframe
$("#image1").css("display","");//设置预先添加用来显示iframe的img可见
$("#image1").attr("src",imgUrl);//将iframe内容的url设置为图片的地址
$image.cropper({
// aspectRatio: 16 / 9,
// viewMode:2,
preview: '.small',
modal:false,//显示图片上方的黑色模态并在裁剪框下面
background:false,
autoCrop:false,//自动显示裁剪框
scalable:false,
zoomOnTouch:false,
zoomOnWheel:false,
wheelZoomRatio:0,
zoomable:false,
ready:function(){//初始化完执行一次
//$('#image1').cropper('move',0, -280);
},
crop: function(event) {//截屏框改变时执行
downLoadImg.width = event.width;//event.width截图框的宽度
downLoadImg.height = event.height;//event.height截图框的高度
}
});
});
});
//点击按钮执行
$('.docs-buttons').on('click', '[data-method]', function () {
var $this = $(this);
var data = $this.data();
result = $image.cropper("getCroppedCanvas", {
height: downLoadImg.height?downLoadImg.height:90,
width: downLoadImg.width?downLoadImg.width:180
});
switch (data.method) {
case 'scaleX':
case 'scaleY':
$(this).data('option', -data.option);
break;
case 'getCroppedCanvas'://下载截图
if (result) {
var imgBase=result.toDataURL("image/png", 1.0);
console.log(imgBase);
downloadFile('测试.png', imgBase);//下载截图
}
break;
}
});
//下载
function downloadFile(fileName, content){
var blob = base64ToBlob(content); //new Blob([content]);
if (!!window.ActiveXObject || "ActiveXObject" in window) {//ie浏览器下下载
window.navigator.msSaveOrOpenBlob(blob, 'chart-download' + '.' + 'png');
} else {//其他浏览器下下载
var aLink = document.createElement('a');
var evt = document.createEvent("HTMLEvents");
evt.initEvent("click", true, true);//initEvent 不加后两个参数在FF下会报错 事件类型，是否冒泡，是否阻止浏览器的默认行为
aLink.download = fileName;
aLink.href = URL.createObjectURL(blob);
aLink.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));//兼容火狐
}
}
//base64转blob
function base64ToBlob(code){
var parts = code.split(';base64,');
var contentType = parts[0].split(':')[1];
var raw = window.atob(parts[1]);
var rawLength = raw.length;
var uInt8Array = new Uint8Array(rawLength);
for (var i = 0; i < rawLength; ++i) {
uInt8Array[i] = raw.charCodeAt(i);
}
return new Blob([uInt8Array], {type: contentType});
}
//停止截图
$("#stopJt").on("click",function (){
// $('#image1').cropper('enable');
$('#image1').cropper('destroy');
$("#image1").css("display","none");
$("#testIframe").css("display","");
});
到这里截图的功能已经完成了。
如果有好的方法或建议，欢迎提出，谢谢！