前端生成海报图：html2canvas 生成海报图

html2canvas 生成海报图

<html>

<head>
<title>生成海报图Demotitle>
head>

<body>
<div id="poster" style="width: 400px; height: 300px;overflow: hidden;">
    <h1>海报图标题h1>
    <img src="https://www.w3school.com.cn/i/html_editor_notepad.gif" style="width:100%;"/>
div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js">script>
<script src="https://cdn.bootcdn.net/ajax/libs/html2canvas/1.4.1/html2canvas.js">script>
<script>
$(function(){
    html2canvas(document.getElementById('poster')).then(function(canvas) {
        console.log(canvas.toDataURL());
        document.body.appendChild(canvas);
    });
});
script>

body>
html>
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

执行效果：
在这里插入图片描述

图片跨域

html2canvas 依赖 HTMLCanvasElement，HTMLCanvasElement 存在跨域问题。当 HTMLCanvasElement 跨域时，图片将显示异常。
在这里插入图片描述

图片跨域解决办法

在这里插入图片描述

参考

html在线编辑器：https://www.w3school.com.cn/tiy/t.asp?f=eg_html_basic
html2canvas官网：https://github.com/niklasvh/html2canvas
html2canvas镜像：https://gitee.com/mirrors/html2canvas
Vue使用html2canvas将页面转化为图片
https://html2canvas.hertzen.com/

相关阅读:
KT6368A距离_以及蓝牙的性能描述和远距离怎么办
K8S：配置资源管理 Secret和configMap
如何在JavaScript中使用for循环
自学 TypeScript 第二天编译选项
【双目视觉】 SGBM算法应用（Python版）
Modbus转Profinet网关连接皖仪氦质谱检漏仪SFJ-16M通信配置案例
H4TCPE；H4ETTC；四[4-(4‘-羧基苯基)苯基]乙烯；AIE聚集诱导发光材料
日志文件_3
2023年【安全生产监管人员】考试题及安全生产监管人员找解析
单源最短路的建图

原文地址：https://blog.csdn.net/sayyy/article/details/126155608