web对页面截图复制功能

1、web页面的截图原理：html2canvas.js 插件把要截图的页面内容生成画布图片，然后把画布的图片的base64的值赋到页面的<img>标签上，再把<img>的图片进行复制

2、需要的js插件 

<script src="~/Scripts/html2canvas.min.js"></script>
<script src="~/Scripts/canvas2image.js"></script>

<script src="~/Scripts/jquery.js"></script>

3.html的结构

截图

代码

<div class="alert" id="chongzhixq" style="width:620px;height:450px;">
<div class="alert-header">
<h1>赠送详情</h1>
<img src="../../images/close_btn.png" alt="" class="alert-close" onclick="$('.window-mask1').hide(); $('#chongzhixq').hide();" />
</div>
<div class="alert-list">
<div class="alert-info" style="max-height: 382px;">
<div class="layui-tab-item layui-show" id="pagecontent">
<fieldset class="layui-elem-field site-demo-button" style="margin-top: 10px;">
<legend>赠送详情</legend>
<div class="layui-fluid padding-0 margin-top-20 font-size-16">
<table class="layui-table" lay-skin="nob" style="background: url('../../images/bb.png') repeat; ">
<colgroup>
<col width="200">
<col width="200">
<col width="200">
</colgroup>
<tbody>
<tr>
<td style="text-align:right">赠送人昵称：</td>
<td id="td_Accounts"></td>
<td rowspan="7"><img class="ceshi" src="../../images/success.png" /></td>
</tr>
<tr>
<td style="text-align:right">赠送人ID：</td>
<td id="td_GameID"></td>
</tr>
<tr>
<td style="text-align:right">接收人昵称：</td>
<td id="td_tarAcc"></td>
</tr>
<tr>
<td style="text-align:right">接收人ID：</td>
<td id="td_tarGameID"></td>
</tr>
<tr>
<td style="text-align:right">赠送金币：</td>
<td id="td_SwapScore"></td>
</tr>
<tr>
<td style="text-align:right">大写：</td>
<td id="td_chscore"></td>
</tr>
<tr>
<td style="text-align:right">赠送日期：</td>
<td id="td_CollectDate"></td>
</tr>
<tr>
@*data-clipboard-text='@ViewBag.climp'*@
<td colspan="3" style="text-align:center;"><button class="layui-btn scopecope" data-type="reload" onclick="fuzhi();">关闭</button></td>
</tr>
</tbody>
</table>
</div>
</fieldset>
</div>
<div id="img">
<canvas width="600" height="600" id="thecanvas"></canvas>
</div>
<span class="layui-layer-content">
<img id="paysocreimg" class='' src='' style='width: 600px; height: 600px;'>
</span>
</div>
</div>
</div>

脚本代码

 <script type="text/javascript">

    

//把页面生成图片
var htmlContent = document.getElementById("pagecontent");
html2canvas(htmlContent, {
background:"#fff",
onrendered: function (canvas) {
//添加属性
canvas.setAttribute('id', 'thecanvas');
//读取属性值
// var value= canvas.getAttribute('id');
document.getElementById('img').innerHTML = '';

document.getElementById('img').appendChild(canvas);
//复制画布到图片
var imgSrc = document.getElementById("thecanvas").toDataURL("image/png");

document.getElementById("paysocreimg").src = imgSrc;
//$("#pagecontent").hide();
//保存到服务器
//$.post("/Home/UploadImage", { data: imgSrc, GameID: returnData.GameID, tarGameID: returnData.tarGameID, date: returnData.CollectDate }, function (result) {
// $("#paysocreimg").attr("src", result.Url);
//});
//uploadData("/Home/UploadImage", imgSrc);
}
});

//复制图片

function fuzhi() {
var div = document.getElementById('paysocreimg');
//var div = document.getElementById('thecanvas');
div.contentEditable = 'true';
var controlRange;
if (document.body.createControlRange) {
controlRange = document.body.createControlRange();
controlRange.addElement(div);
controlRange.execCommand('Copy');
alert("复制成功");
} else {
alert("浏览器不支持黏贴");
}
div.contentEditable = 'false';
$('.window-mask1').hide();
$('#chongzhixq').hide();
window.location.reload();
}

</script>