js或jQuery将页面生成图片
<
html>
<
head>
<
meta
charset=
"UTF-8">
<
title>htmltopictitle>
<
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:
100
px;
background-color:
#fff;
display:
inline-block;
vertical-align:
top;
}
canvas {
margin-right:
5
px;
}
.down {
float:
left;
margin:
40
px
10
px;
}
.down2 {
float:
left;
margin:
40
px
30
px;
}
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>
<
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>