使用html2canvas将页面生成图片
2020-09-11 本文已影响0人
请叫我小中中
前言：
html2canvas可以直接在用户浏览器上截取网页或部分网页形成图片。该脚本通过理解网页的DOM元素来构建图片，但是并不是所有的DOM元素它都能理解，所以并不是所有的页面样式都能画的出来，不过一般的页面都没有问题。
为什么要使用html2canvas：
以前要把内容生成图片是怎么做的呢？使用canvas画布，自己在画的时候要控制好图片、文字的大小位置等等问题，而且极容易让自己崩溃，因为要考虑的太多了。
html2canvas的好处是什么呢？自己的网页已经是调整好样式的了，自己只需要把要画的元素交给html2canvas就可以了，它会按照网页的样式自己画，自己就不用在一点一点的调整了。
使用方式：
html2canvas($('#htmlbody')[0]).then(function(canvas) {
//对canvas操作
});
我的使用场景：生成快讯图片。
页面+JS
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片生成</title>
<link rel="stylesheet" rev="stylesheet" href="./css/html2canvas.css" type="text/css">
<script type="text/javascript" src="../js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="./js/html2canvas.js"></script>
</head>
<body>
</body>
<script type="text/javascript">
$(function() {
createImg()
});
function createImg(){
var title = '链诸葛财经区块链项目宣发方案';
var times = '2020-03-11 16:33';
var content = '<img alt="" src="./img/logo.png">'
+ '<br>链诸葛财经已经与100+家优质区块链媒体已建立良好合作关系，可以快速将项目文案等信息发布到各大媒体平台，实现全国全网曝光。'
+ '<br><br>100+家优质区块链媒体快讯、通稿能快速被百度等搜索平台收录，实现项目信息高效率传播。'
+ '<br><br>宣发效果：快速实现项目曝光，增加项目热度.<br><br>链诸葛财经区块链项目宣发方案：'
+ '<br>1.朋友圈+社群：朋友圈（3000以上好友）转发、五个以上币圈群炸群（群人数300以上）；'
+ '<br>2.快讯：精简传播；'
+ '<br>3.长文：文字加图片，详情传播；'
+ '<br><img alt="" src="./img/btc.jpeg">';
if(content.indexOf("</p>") != -1 ){
var content = content.replace(/<p[^><]*>/g,'<p>');
var content = content.replace(/<\/?[^p|^\/][^><]*>/g,'');
var content = content.replace(/\s+/g,'');
var content = content.replace(' ','');
var content = content.replace(/<p><\/p>/g,'');
var content = content.replace(/<p>/g,'<p class="xc">');
}else{
var content = '<p class="xc">' + content + '</p>';
}
var restr = '<div class="warper">'
+' <div class="xmsg">正在生成图片，请稍后...</div>'
+' <div class="html2img">'
+' <div class="toimger" id="htmlbody">'
+' <div class="top">'
+' <img style="width:720px;height:250px;" src="./img/kuaixuntop.png"/>'
+' </div>'
+' <div class="tocontent">'
+' <h1>' + title + '</h1>'
+' <p class="time">'
+' <span>' + times + '</span>'
+' </p>'
+' <div class="xouter">' + content + '</div>'
+' </div>'
+' <div class="bott">'
+' <img style="width:720px;height:250px;" src="./img/kuaixunbottom.png"/>'
+' </div>'
+' </div>'
+' </div>'
+' <a href="" download="1.jpg" id="saveImage"><div title="点击保存图片" class="htmltarget"></div></a>'
+' <div title="点击关闭图片" class="xnote" onclick="closeImg();">图片已生成，点击图片下载，点击这里关闭</div>'
+'</div>';
$("body").append($(restr));
$(".xmsg").fadeIn('fast');
//设置延迟的作用：保证在文字、图片完全加载后才启动canvas画布画出图片
setTimeout(function(){
html2canvas($("#htmlbody")[0]).then(function(canvas) {
var image = new Image();
var imgUrl = canvas.toDataURL("image/png");
if(imgUrl == 'data:,'){
alert('图片生成失败，请重试');
$(".warper").remove();
}else{
image.src = imgUrl;
$('#saveImage').attr('href', imgUrl);
$(image).appendTo($(".htmltarget"));
$(".htmltarget").fadeIn();
$(".xnote").fadeIn();
}
$(".xmsg").fadeOut('fast');
});
},1000);
}
function closeImg(){
$(".xnote").fadeOut();
$(".htmltarget").fadeOut();
$(".warper").fadeOut();
$(".warper").remove();
}
</script>
</html>
代码说明：
1.页面使用<!DOCTYPE html>。
2.使用setTimeout设置延迟的作用：保证在文字、图片完全加载后才启动canvas画布画出图片。
3.在生成的图片外层加上download类型的超链接，点击图片可以下载图片。
效果图：
快讯图.jpg
CSS样式
@charset "utf-8";
.warper {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: rgba(0, 0, 0, .7);
}
.warper .xmsg {
position: fixed;
width: 200px;
height: 80px;
left: 50%;
top: 50%;
transform: translate(-100px, -40px);
background: white;
line-height: 80px;
text-align: center;
border-radius: 10px;
display: none;
}
.warper .xnote {
position: fixed;
width: 720px;
height: 60px;
left: 50%;
bottom: 10px;
transform: translateX(-400px);
background: white;
line-height: 60px;
text-align: center;
border-radius: 10px;
font-size: 28px;
display: none;
}
.html2img {
height: 0;
overflow: scroll;
}
.htmltarget {
position: absolute;
top: 10px;
left: 50%;
transform: translateX(-400px);
background: #eee;
width: 720px;
height: calc(100% - 100px);
overflow-y: scroll;
border-radius: 5px;
display: none;
}
.htmltarget img {
width: 100%;
}
.html2img::-webkit-scrollbar {
display: none
}
.htmltarget::-webkit-scrollbar {
display: none
}
.html2img .toimger {
position: relative;
width: 720px;
background: #FFF;
}
.html2img .toimger .top {
height:250px;
width: 720px;
}
.html2img .toimger .tocontent {
position: relative;
margin: 0 50px 0;
background: white;
width: 620px;
}
.html2img .toimger .tocontent h1 {
font-size: 38px;
line-height: 50px;
font-weight: bold;
}
.html2img .toimger .tocontent .time {
color: #D9D9D9;
background: url(../img/time.gif) no-repeat 0px 2px;
background-size: 33px;
padding-left: 45px;
height:45px;
line-height:45px;
}
.html2img .toimger .tocontent .xouter {
line-height: 55px;
}
.html2img .toimger .tocontent .time img {
display: inline-block;
}
.html2img .toimger .tocontent .time span {
padding: 0px;
font-size: 35px;
line-height: 35px;
font-family: Sim sun;
}
.html2img .toimger .tocontent .xc {
font-size: 28px;
margin: 20px 0;
}
.html2img .toimger .tocontent .xc img {
max-width: 100%;
padding: 10px;
text-align: center;
vertical-align: top;
-webkit-tap-highlight-color: transparent;
box-sizing: border-style: none;
display: block;
margin: 10px auto;
}
.html2img .toimger .bott {
height: 250px;
width:720px;
}
@media screen and (max-width:720px) {
.htmltarget {
width: calc(100% - 20px);
position: fixed;
top: 10px;
left: 10px;
transform: translateX(0);
height: calc(100% - 70px);
}
.warper .xnote {
width: 100%;
position: fixed;
bottom: 0;
left: 0;
transform: translateX(0);
height: 50px;
line-height: 50px;
font-size: 18px;
border-radius: 0;
}
.html2img {
position: fixed;
top: 0;
left: 0;
transform: translateX(0);
width: 0;
height: 0;
overflow: scroll;
border-radius: 0;
}
}
