jquery 把页面自动生成图片保存

最新推荐文章于 2024-07-21 02:55:21 发布

oso_kill

最新推荐文章于 2024-07-21 02:55:21 发布

阅读量5k

点赞数 2

分类专栏：网页特效代码

网页特效代码专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>htmltopic</title>
<!-- <script type="text/javascript" src="/h5/js/jquery-1.11.0.min.js"></script> -->
<script src="https://cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.js"></script>
<style>
* {
margin: 0;
}
html{
background: #fff;
}
.test {
width: 100%;
height: 100%;
text-align: center;
line-height: 100px;
background-color: #fff;
display: inline-block;
vertical-align: top;
}
canvas {
margin-right: 5px;
}
.down {
float: left;
margin: 40px 10px;
}
.down2 {
float: left;
margin: 40px 30px;
}
</style>
</head>
<body>
<div class="test">测试</div>
<div class="test">测试</div>
    <div class="test">测试</div>
    <div class="test">测试</div>
    <div class="test">测试</div>
<div><a class="down" href="" download="downImg">生成图片</a>
</div>
<!-- <div><a class="down2" href="" download="downImg">生成图片</a></div> -->
<script>
//直接选择要截图的dom，就能截图，但是因为canvas的原因，生成的图片模糊
//html2canvas(document.querySelector('div')).then(function(canvas) {
// document.body.appendChild(canvas);
//});
//创建一个新的canvas
var canvas2 = document.createElement("canvas");
let
_canvas = document.querySelector('html');
//此处可换body，或div等
var w = parseInt(window.getComputedStyle(_canvas).width);
var h = parseInt(window.getComputedStyle(_canvas).height);
//将canvas画布放大若干倍，然后盛放在较小的容器内，就显得不模糊了
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";

//可以按照自己的需求，对context的参数修改,translate指的是偏移量
// var context = canvas.getContext("2d");
// context.translate(0,0);
var context = canvas2.getContext("2d");
context.scale(2, 2);
html2canvas(document.querySelector('html'), { canvas: canvas2 }).then(function(canvas) {
//此处html可换body，或div等
//document.body.appendChild(canvas);
//canvas转换成url，然后利用a标签的download属性，直接下载，绕过上传服务器再下载
document.querySelector(".down").setAttribute('href', canvas.toDataURL());
});
</script>
<script language="javascript">
//这是另一种写法
// $(function () {
// $(".down2").click(function () {
// html2canvas($(".test")).then(function (canvas) {
// var imgUri = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); // 获取生成的图片的url
// window.location.href = imgUri; // 下载图片
// });
//html2canvas($('.tongxingzheng_bg'), {
// onrendered: function (canvas) {
// var data = canvas.toDataURL("image/png");//生成的格式
// //data就是生成的base64码啦
// alert(data);
// }
//});
// });
// });
</script>
</body>
</html>