这是从网上找的代码 但是生成图片比想象的大//点击截图
function doScreenShot() {
hidden();
// 由于html2canvas方法只能加载可视区域中的内容,因此需要将要下载的内容整个拷贝下来
var cBody = document.getElementById("cBody");
var wrapcanvas = cBody.cloneNode(true); //克隆 cBody区域
document.getElementById('body').appendChild(wrapcanvas);
var wid = $("#cBody")[0].scrollWidth;
var hei = $("#cBody")[0].scrollHeight;
var imgWid = $(".img").width();
wrapcanvas.style.width = wid+'px' //130 90
wrapcanvas.style.height = hei+'px'
console.log(wid);
html2canvas(wrapcanvas, {
onrendered: function(canvas) {
document.getElementById('body').removeChild(wrapcanvas);
canvas.id = "mycanvas";
var img = convertCanvasToImage(canvas);
img.onload = function() {
img.onload = null;
canvas = convertImageToCanvas(img, 20, 20, wid, hei); //设置图片大小和位置
img.src = convertCanvasToImage(canvas).src;
$(img).css({
background: "#fff",
});
//调用下载方法
if(browserIsIe()) { //假如是ie浏览器
DownLoadReportIMG(img.src);
} else {
download(img.src)
}
}
}
});
}
//绘制显示图片
function convertCanvasToImage(canvas) {
var image = new Image();
image.src = canvas.toDataURL("image/png"); //获得图片地址
return image;
}
//生成canvas元素,相当于做了一个装相片的框架
function convertImageToCanvas(image, startX, startY, width, height) {
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var context =canvas.getContext("2d").drawImage(image, startX, startY, width, height, 20, 20, width-65, height-65); //在这调整图片中内容的显示(大小,放大缩小,位置等)
return canvas;
}
function DownLoadReportIMG(imgPathURL) {
//如果隐藏IFRAME不存在,则添加
if(!document.getElementById("IframeReportImg"))
$(
''
).appendTo("body");
if(document.all.IframeReportImg.src != imgPathURL) {
//加载图片
document.all.IframeReportImg.src = imgPathURL;
} else {
//图片直接另存为
DoSaveAsIMG();
}
}
function DoSaveAsIMG() {
if(document.all.IframeReportImg.src != "about:blank")
window.frames["IframeReportImg"].document.execCommand("SaveAs");
}
// 另存为图片
function download(src) {
show();
var $a = $("").attr("href", src).attr("download", "img.png");
$a[0].click();
}
//判断是否为ie浏览器
function browserIsIe() {
if(!!window.ActiveXObject || "ActiveXObject" in window)
return true;
else
return false;
}