哎，哎，哎，哎，哎...
什麼破html2canvas...
太不好用了，但是沒辦法，也只有這個插件目前比較完善，寫個DEMO分享給大家
效果演示
解決圖片跨域問題，添加下方參數
allowTaint: true
添加後，useCORS: true 這個就不需要了，可刪除
生成圖片偏移問題
生成圖片偏移問題，網上看是要修改X和Y的偏移量爲0，我修改了沒反應，最後我引入最新版本的html2canvas就解決了，真無語，可能自己太菜了，好像本來就很菜。
二維碼區域生成，可去查看我另篇文章 https://blog.csdn.net/tianpeng1996/article/details/106281528
附完整代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>海報生成器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="http://html2canvas.hertzen.com/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.cn/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.com/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.cn/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.net/download/tianpeng1996/12530166
個人博客
前端博客 http://sharedblog.cn
資源博客 http://iqzhan.com
從興趣到放棄
哎，不會php，獲取不了文章封面，懶得研究了，實現不了我需要的效果，放棄，放棄，放棄了，最終半成品代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>海報生成器</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="http://html2canvas.hertzen.com/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.cn/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.com/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.cn/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.com/api.php?bg=ffffff&fg=333333&text=' + siteurlres + '&logo=http://cdn.iqzhan.com/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>