① jquery库(看个人需要):
②dom-to-image.js: https://github.com/tsayen/dom-to-image
③FileSaver.js:https://github.com/eligrey/FileSaver.js
<html>
<head>
<script type="text/javascript" src="C:/Users/liushuofu/Desktop/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="C:/Users/liushuofu/Desktop/dom-to-image.js"></script>
<script type="text/javascript" src="C:/Users/liushuofu/Desktop/FileSaver.js"></script>
<script type="text/javascript">
$(function(){
//
$("#btn").click(function(){
//插入图片到html
// var node = document.getElementById('table');
// domtoimage.toPng(node)
// .then(function (dataUrl) {
// console.log(dataUrl)
// var img = new Image();
// img.src = dataUrl;
// document.body.appendChild(img);
// });
// 下载png图片
domtoimage.toBlob(document.getElementById('table'))
.then(function (blob) {
console.log(blob)
window.saveAs(blob, 'my-node.png');
});
// 下载jpeg图片
// domtoimage.toJpeg(document.getElementById('my-node'), { quality: 0.95 })
// .then(function (dataUrl) {
// var link = document.createElement('a');
// link.download = 'my-image-name.jpeg';
// link.href = dataUrl;
// link.click();
// });
// var node = document.getElementById('table');
// domtoimage.toPixelData(node)
// .then(function (pixels) {
// for (var y = 0; y < node.scrollHeight; ++y) {
// for (var x = 0; x < node.scrollWidth; ++x) {
// pixelAtXYOffset = (4 * y * node.scrollHeight) + (4 * x);
// /* pixelAtXY is a Uint8Array[4] containing RGBA values of the pixel at (x, y) in the range 0..255 */
// pixelAtXY = pixels.slice(pixelAtXYOffset, pixelAtXYOffset + 4);
// }
// }
// });
})
})
</script>
</head>
<body>
<input type="button" id="btn" value="do it" />
<h4>两行三列:</h4>
<table id="table" border="1" style="width:200px;border-collapse: collapse;border:1px solid black;">
<tr style="background:green;">
<td rowspan="3">200</td>
<td>200</td>
<td>300</td>
</tr>
<tr style="background:green;">
<td rowspan="2">500</td>
<td>600</td>
</tr>
<tr style="background:green;">
<td>600</td>
</tr>
<tr style="background:skyblue;">
<td rowspan="3">100</td>
<td>200</td>
<td>300</td>
</tr>
<tr style="background:skyblue;">
<td>500</td>
<td>600</td>
</tr>
<tr style="background:skyblue;">
<td>600</td>
<td>600</td>
</tr>
</table>
</body>
</html>
另一种写法 引入html2canvas.js
<!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 type="text/javascript" src="js/html2canvas.min.js"></script>
<style>
* {
margin: 0;
}
.test {
width: 100px;
height: 100px;
text-align: center;
line-height: 100px;
background-color: #87CEEB;
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><a class="down" href="" download="downImg">下载</a>
</div>
<div><a class="down2" href="" download="downImg">下载2</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('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('div'), { canvas: canvas2 }).then(function(canvas) {
//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>