使用html2canvas将html元素截取到canvas显示，再由canvas转换为图片。注意：要截取的元素里面不能使用跨域名的图片链接，否则会污染canvas。
html2canvas的github链接：https://github.com/niklasvh/html2canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.my-div{
background-color: antiquewhite;
}
</style>
<script type="application/javascript" src="html2canvas.js"></script>
</head>
<body>
<div class="my-div">
this is source
<img src="girls%20day.jpg"/>
</div>
<div class="content">
<span>next node is a img tag</span>
<img id="img"/>
</div>
<script>
//要转换为图片的dom对象
var element = document.querySelector('.my-div');
//要显示图片的img标签
var image = document.querySelector('#img');
//调用html2image方法
html2image(element,image);
/**
* create by lrj
* @param source 要转换为图片的dom对象
* @param image 要显示图片的img标签
*/
function html2image(source,image) {
html2canvas(source).then(function(canvas) {
var imageData = canvas.toDataURL(1);
image.src = imageData;
});
}
</script>
</body>
</html>
扫一扫
1191
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
