哎，哎，哎，哎，哎...
什么破html2canvas...
太不好用了，但是没办法，也只有这个插件目前比较完善，写个DEMO分享给大家
效果演示
解决图片跨域问题，添加下方参数
allowTaint: true添加后，useCORS: true 这个就不需要了，可删除
生成图片偏移问题
生成图片偏移问题，网上看是要修改X和Y的偏移量为0，我修改了没反应，最后我引入最新版本的html2canvas就解决了，真无语，可能自己太菜了，好像本来就很菜。
二维码区域生成，可去查看我另篇文章 https://blog.csdn/tianpeng1996/article/details/106281528
附完整代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>海报生成器</title>
<script src="https://cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="http://html2canvas.hertzen/dist/html2canvas.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.tp-posters-layer{
/*position: fixed;*/
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
display: flex;
align-items: center;
justify-content: center;
/*visibility: hidden;*/
/*z-index: -1000;*/
}
.tp-posters{
width: 90%;
max-width: 500px;
background: #fff;
border: 1px solid rgba(0,0,0,.2);
padding: 10px;
box-sizing: border-box;
/*visibility: hidden;*/
/*position: absolute;*/
/*z-index: -1000;*/
}
.tp-posters-cover{
width: 100%;
text-align: center;
}
.tp-posters-cover img{
width: 100%;
max-width: 100%;
max-height: 280px;
border-radius: 8px;
}
.tp-posters h3{
color: #000;
font-size: 16px;
line-height: 30px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tp-posters p{
color: rgba(0,0,0,.6);
font-size: 14px;
line-height: 20px;
text-indent: 28px;
}
.tp-posters-bottom{
width: 100%;
display: flex;
justify-content: space-between;
border-top: 1px dashed rgba(0,0,0,.4);
margin-top: 15px;
}
.tp-qr-txt{
width: 70%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tp-posters-logo{
width: 100%;
text-align: center;
}
.tp-posters-logo img{
width: 40%;
}
.tp-qr-txt span{
color: rgba(255,0,0,.6);
font-size: 16px;
font-weight: 600;
line-height: 30px;
}
.tp-qr-code{
width: 30%;
padding: 15px;
box-sizing: border-box;
}
.tp-qr-code img{
width: 100%;
border: 1px solid rgba(0,0,0,.6);
padding: 5px;
box-sizing: border-box;
}
.tp-posters-picture{
width: 90%;
max-width: 500px;
}
</style>
</head>
<body>
<div class="tp-posters-layer">
<div class="tp-posters">
<!-- 当前海报封面图 -->
<div class="tp-posters-cover">
<img src="http://cdn.sharedblog/sharedblog/img/19.png" alt="">
</div>
<!-- 当前海报标题 -->
<h3>我是标题呀</h3>
<!-- 当前海报详情 -->
<p>我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍</p>
<!-- bottom -->
<div class="tp-posters-bottom">
<div class="tp-qr-txt">
<!-- logo图片 -->
<div class="tp-posters-logo">
<img src="http://iqzhan/zb_users/theme//tx_resource/include/logo.png" alt="">
</div>
<span>长按识别 二维码</span>
<span>精彩内容 享不停</span>
</div>
<!-- 当前海报二维码 -->
<div class="tp-qr-code">
<img src="http://cdn.sharedblog/sharedblog/img/1.png" alt="">
</div>
</div>
</div>
<!-- 海报显示区域 -->
<div class="tp-posters-picture">
</div>
</div>
<a href="javascript:;" onclick="copy()">生成海报</a>
</body>
</html>
<script>
function copy(){
var pic;
var canvas2 = document.createElement("canvas");
var w = $('.tp-posters').outerWidth();
var h = $('.tp-posters').outerHeight();
//先放大2倍，后期缩小，处理模糊问题
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
var context = canvas2.getContext("2d");
// 进行缩放
context.scale(2,2);
html2canvas(document.querySelector('.tp-posters'),{
canvas: canvas2,
allowTaint: true, //允许污染
taintTest: true, //在渲染前测试图片
// useCORS: true //使用跨域
}).then(function(canvas) {
pic = canvas;
document.querySelector(".tp-posters-picture").appendChild(pic);
});
}
</script>
以上只是完整demo，可以正常使用，不是我的最终效果，自行修改吧。
demo中的图片使用的外链形式，不会出现跨域问题，放心使用吧。
发现的坑，生成时候，文字内容有空格，无法识别，还需要 才可以；本来文字详情区域，我用css写了多行显示省略号，不支持，生成图片之后为空白，如果需要实现，请使用js自行写吧。
demo下载
https://download.csdn/download/tianpeng1996/12530166
个人博客
前端博客 http://sharedblog
资源博客 http://iqzhan
从兴趣到放弃
哎，不会php，获取不了文章封面，懒得研究了，实现不了我需要的效果，放弃，放弃，放弃了，最终半成品代码
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>海报生成器</title>
<script src="https://cdn.bootcdn/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="http://html2canvas.hertzen/dist/html2canvas.min.js"></script>
<style>
*{
margin: 0;
padding: 0;
}
.tp-posters{
width: 90%;
max-width: 500px;
background: #fff;
border: 1px solid rgba(0,0,0,.2);
padding: 10px;
box-sizing: border-box;
position: fixed;
z-index: -1000;
}
.tp-posters-cover{
width: 100%;
text-align: center;
}
.tp-posters-cover img{
width: 100%;
max-width: 100%;
max-height: 280px;
border-radius: 8px;
}
.tp-posters h3{
color: #000;
font-size: 16px;
line-height: 30px;
width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.tp-posters p{
color: rgba(0,0,0,.6);
font-size: 14px;
line-height: 20px;
text-indent: 28px;
}
.tp-posters-bottom{
width: 100%;
display: flex;
justify-content: space-between;
border-top: 1px dashed rgba(0,0,0,.4);
margin-top: 15px;
}
.tp-qr-txt{
width: 70%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.tp-posters-logo{
width: 100%;
text-align: center;
}
.tp-posters-logo img{
width: 40%;
}
.tp-qr-txt span{
color: rgba(255,0,0,.6);
font-size: 16px;
font-weight: 600;
line-height: 30px;
}
.tp-qr-code{
width: 30%;
padding: 15px;
box-sizing: border-box;
}
.tp-qr-code img{
width: 100%;
border: 1px solid rgba(0,0,0,.6);
padding: 5px;
box-sizing: border-box;
}
.tp-posters-layer{
position: fixed;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
display: none;
align-items: center;
justify-content: center;
}
.tp-posters-picture{
width: 90%;
max-width: 500px;
position: relative;
}
#TpPostersBtn{
color: #fff;
font-size: 16px;
line-height: 28px;
text-align: center;
display: none;
width: 90px;
margin: 0 auto;
background: #333;
margin: 0 auto;
border-radius: 3px;
}
#TpPostersBtn:hover{
background: #6F8EC5;
}
.shut-down-posters{
color: #fff;
font-size: 24px;
line-height: 40px;
text-align: center;
position: absolute;
bottom: -10px;
left: 50%;
margin-left: -20px;
z-index: 5;
display: block;
width: 40px;
height: 40px;
background: #000;
border-radius: 50%;
box-shadow: 0 0 4px rgba(0,0,0,.3);
}
.shut-down-posters:hover{
color: #fff;
background: #6F8EC5;
}
</style>
</head>
<body>
<div class="tp-posters" style="top: 100000px;left: -10000px;">
<!-- 当前海报封面图 -->
<div class="tp-posters-cover">
<img src="http://cdn.sharedblog/sharedblog/img/19.png" alt="">
</div>
<!-- 当前海报标题 -->
<h3 class="tp-posters-title">我是标题呀</h3>
<!-- 当前海报详情 -->
<p class="tp-posters-details">我a3是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍我是详情介绍</p>
<!-- bottom -->
<div class="tp-posters-bottom">
<div class="tp-qr-txt">
<!-- logo图片 -->
<div class="tp-posters-logo">
<img src="http://iqzhan/zb_users/theme//tx_resource/include/logo.png" alt="">
</div>
<span>长按识别 二维码</span>
<span>精彩内容 享不停</span>
</div>
<!-- 当前海报二维码 -->
<div class="tp-qr-code">
<img src="http://cdn.sharedblog/sharedblog/img/1.png" alt="">
</div>
</div>
</div>
<div class="tp-posters-layer">
<!-- 海报显示区域 -->
<div class="tp-posters-picture">
<a href="javascript:;" class="shut-down-posters">×</a>
</div>
</div>
<a href="javascript:;" id="TpPostersBtn">生成海报</a>
</body>
</html>
<script>
// 获取当前地址并生成二维码
var siteurl = window.location.href;
var siteurlres = siteurl.replace(/&/g,"%26");
$(".tp-qr-code img").attr("src",'http://qr.topscan/api.php?bg=ffffff&fg=333333&text=' + siteurlres + '&logo=http://cdn.iqzhan/qzhan/img/140.jpg');
window.setTimeout(function (){
if(/Android|webOS|iPhone|iPad|BlackBerry/i.test(navigator.userAgent)) {
var Scale = 1;
} else {
var Scale = 2;
}
var pic;
var canvas2 = document.createElement("canvas");
var w = $('.tp-posters').outerWidth();
var h = $('.tp-posters').outerHeight();
canvas2.width = w * 2;
canvas2.height = h * 2;
canvas2.style.width = w + "px";
canvas2.style.height = h + "px";
var context = canvas2.getContext("2d");
context.scale(Scale,Scale);
html2canvas(document.querySelector('.tp-posters'),{
canvas: canvas2,
allowTaint: true,
taintTest: true,
}).then(function(canvas) {
pic = canvas;
document.querySelector(".tp-posters-picture").appendChild(pic);
});
$("#TpPostersBtn").css("display","block");
},1500);
// 生成海报
$("#TpPostersBtn").click(function(){
$(".tp-posters-layer").css("display","flex");
})
// 关闭海报
$(".shut-down-posters").click(function(){
$(".tp-posters-layer").css("display","none");
})
</script>
更多推荐
将网页元素生成图片保存 div生成图片 html2canvas完美解决跨域 html2canvas图片不显示 html2canvas生成偏移 填坑之路
发布评论