将网页元素生成图片保存 div生成图片 html2canvas完美解决跨域 html2canvas图片不显示 html2canvas生成偏移 填坑之路


哎，哎，哎，哎，哎...

什么破html2canvas...

太不好用了，但是没办法，也只有这个插件目前比较完善，写个DEMO分享给大家

效果演示

解决图片跨域问题，添加下方参数

1
allowTaint: true

添加后，useCORS: true 这个就不需要了，可删除

生成图片偏移问题

生成图片偏移问题，网上看是要修改X和Y的偏移量为0，我修改了没反应，最后我引入最新版本的html2canvas就解决了，真无语，可能自己太菜了，好像本来就很菜。

二维码区域生成，可去查看我另篇文章 https://blog.csdn.net/tianpeng1996/article/details/106281528

附完整代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海报生成器</title>
    <script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="//i2.wp.com/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="//i2.wp.com/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="//i2.wp.com/iqzhan.com/zb_users/theme//tx_resource/include/logo.png" alt="">
                    </div>
                    <span>长按识别  二维码</span>
                    <span>精彩内容  享不停</span>
                </div>
                <!-- 当前海报二维码 -->
                <div class="tp-qr-code">
                    <img src="//i2.wp.com/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，获取不了文章封面，懒得研究了，实现不了我需要的效果，放弃，放弃，放弃了，最终半成品代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>海报生成器</title>
    <script src="//i2.wp.com/cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="//i2.wp.com/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="//i2.wp.com/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="//i2.wp.com/iqzhan.com/zb_users/theme//tx_resource/include/logo.png" alt="">
                </div>
                <span>长按识别  二维码</span>
                <span>精彩内容  享不停</span>
            </div>
            <!-- 当前海报二维码 -->
            <div class="tp-qr-code">
                <img src="//i2.wp.com/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>