利用html将html-css生成一张图片并下载

最新推荐文章于 2024-07-17 16:38:37 发布

CodePerfectionist

最新推荐文章于 2024-07-17 16:38:37 发布

阅读量451

点赞数 9

文章标签： html 前端

本文链接：https://blog.csdn.net/weixin_55159917/article/details/136529828

版权

本文介绍了如何使用HTML和html2canvas库，将C++项目的UI截图转换为HTML并自动生成Logo图片，同时提到在线工具可以制作浏览器的Favicon。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近需要将一个c++的项目转为前端web项目，后端直接给了一个产品ui的各个页面截图，没得logo原图怎么办呢，那就自己写一个html来生成图片吧，另：如果想要把图片生成为浏览器网址图标favicon.ico 前往（在线制作ico图标 | 在线ico图标转换工具方便制作favicon.ico - 比特虫 - Bitbug.net）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Style</title>
    <style>
        .logo {
            width: 96px;
            height: 96px;
            border-radius: 12px;
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            text-align: center;
            background-color: #fee800;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
    <div class="logo">look me</div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
    <script>
        const element = document.querySelector('.logo');
        html2canvas(element, {
            onrendered: function (canvas) {
                const imgData = canvas.toDataURL('image/png');
                const link = document.createElement('a');
                link.download = 'logo-image.png';
                link.href = imgData;
                link.click();
            }
        });
    </script>
</body>

</html>