截屏功能是在实现了右键自定义菜单上做的，上篇
需要用到两个js
html2canvas.js和jquery-xxx.js
右键菜单最终如下：
<div id="menu">
<div id="pd" class="menu">页面派单</div>
<div id="jp" class="menu"><a id="jpdownload">截屏派单</a></div>
<div id="refresh" class="menu"><a id="jpdownload">刷新</a></div>
<div style="display:none"><a id="jphidden">截屏派单下载隐藏域</a></div>
</div>右键菜单的响应事件：
// 点击menu事件--因该绑定导致第一次点击菜单无效，故注释掉
//menu.onclick = function(e) {
var pd = document.getElementById("pd");
var jp = document.getElementById("jp");
var refresh = document.getElementById("refresh");
var jpdownload = document.getElementById("jpdownload");
var jphidden = document.getElementById("jphidden");
pd.onclick = function(e){
alert("pd");
}
refresh.onclick = function(e){
location.reload();
};
// 截屏点击事件
jp.onclick = function(e){
// 注意此处参数要使用Body或Div，若整个iframe的<html></html>则无效
html2canvas(document.getElementById("mainFrame").contentWindow.document.body,{
allowTaint: true, //允许污染
taintTest: true, //在渲染前测试图片
useCORS: true, //使用跨域
onrendered:function(canvas){
// 将整个页面图片转成Base64位
dataURL =canvas.toDataURL("image/png");
console.log(dataURL);
// 若要点击下载，要使用<a href="xxx.jpg" download="name">，故给截屏属性赋值
// 需求是用户点击截屏就开始截屏并自动下载，所以在生成图片并转码赋值后要执行一次点击事件
// 但再执行菜单截屏的点击事件会导致该方法进入死循环，故大佬教导，再加一个隐藏的<a>
// 即每次点击后将值赋给隐藏的a标签，再执行隐藏的a标签的点击事件，完美解决
$('#jphidden').attr( 'href' , dataURL ) ;
$('#jphidden').attr( 'download' , 'myjobdeer.png' ) ;
jphidden.click();
},
width:320,
height:400
})
}
//}效果
点截屏派单左下角自动下载图片
2665
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
