前端生成海报图：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/

相关阅读:
约瑟夫环实现
大二Web课程设计：服装网页设计题材——HTML+CSS汉服文化带背景音乐素材带视频（12页）
BLUE引擎变量数据分析
【FreeRTOS】04 FreeRTOS 创建任务相关API函数
【python毕业设计源码】汽车销售系统
【蜂鸟E203内核解析】Chap.1 RISC-V指令集架构与硬件结构)
计算机视觉之三维重建——第八章：SLAM系统设计《深入浅出sfm和SLAM核心算法 (鲁鹏)》
【计算机网络】HTTP 重定向的应用场景
TypeScript对象类型
国际市场中的量子计算软件平台研究中心与部署重心介绍

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