<!DOCTYPE html>
<html lang="en" style="font-size:42px;">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Cache-Control" content="private,max-age=0,no-cache">
<meta name="viewport" content="width=1080,target-densitydpi=device-dpi">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>html2canvas.js整个区域的截取图片</title>
<link rel="stylesheet" href="material.css">
</head>
<body>
<div id="app" style="">
<div class="main-box">
<div class="header-box">
<div class="cartoonsheader">
<a href="" class="previous">
<img src="img/circlequare.png">
</a>
<div class="detailright">
<a href=""><img src="img/circledetail.png"></a>
<a href="#" id="confirm-btn"><img src="img/circleright.png"></a>
</div>
</div>
</div>
<div class="bigimg_box">
<!-- crossOrigin="*" -->
<img src="img/t-goods.png" id="pic" >
</div>
</div>
</div>
<!--上面两个是移动图片的为的是分辨截到的图和上一个截到的不同；不需要可以删除-->
<script src="js/hammer.min.js"></script>
<script src="js/fdxz.js"></script>
<!--下面是jquery和html2的截图代码-->
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/html2canvas.js"></script>
<script>
$(document).ready( function(){
$("#confirm-btn").on("click", function(event) {
event.preventDefault();
html2canvas(document.getElementsByClassName("bigimg_box"),{
allowTaint: true,
taintTest: false,
onrendered: function(canvas) {
canvas.id = "mycanvas";
// document.body.appendChild(canvas);
//生成base64图片数据
var dataUrl = canvas.toDataURL();
var newImg = document.createElement("img");
newImg.setAttribute("crossOrigin",'Anonymous');
newImg.src = dataUrl;
console.log(dataUrl);
$(".main-box").append(newImg);
}
});
});
});
</script>
</body>
</html>
html2canvas.js实现整个区域甚至整个页面的截取
1星 需积分: 49 131 浏览量
2018-06-29
15:20:42
上传
评论 1
收藏 148KB RAR 举报 
htmlcanvas2.rar （14个子文件） 
htmlcanvas2 img 
circleright.png 4KB circlequare.png 3KB T-shirt.png 435KB circledetail.png 4KB t-goods.png 9KB js 
jquery-1.11.1.min.js 94KB fdxz.js 3KB html2canvas.js 144KB hammer.min.js 20KB .idea workspace.xml 11KB htmlcanvas2.iml 458B inspectionProfiles modules.xml 274B
material.html 2KB material.css 1KB资源评论
WWJZYQ2019-01-24可以使用，建议增加使用方法- qq_434824342019-04-24能用是能用 这与网上页面上就写了的代码有区别吗？个人看法：不建议下载
颗粒季2022-02-09这是啥？不知所云
IOTJOE2018-11-05啥玩意啊 运行还报错
