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

相关阅读:
动态顺序串的基本实现
leetcode 83. Remove Duplicates from Sorted List 删除排序链表中的重复元素(简单)
Mysql进阶优化篇03——多表查询的优化
二、基础算法精讲：二分
【云原生】docker+k8微服务容器化实战（下篇）
STC 51单片机50——中断问题演示
双十一数码产品开箱体验当贝NEW D3X，颜值高功能多，不愧是三千元性价比最高
计算机保研er历程分享（浙软、厦大、华师、东南网安、东北、西电、中南......）
Sqlmap 22.05.22.01
都是星光赶路人

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