How to download HTML element as a image. Visiting card designer Video Tutorial Code Articles you may find Useful

2025-06-07

如何将 HTML 元素下载为图片。名片设计器

视频教程

代码

您可能觉得有用的文章

您好，今天的文章将教您如何创建精美的名片设计器。您可以添加公司徽标、公司标语、网站链接和支持邮箱。您还可以更改名片的背景。最棒的是，您还可以将设计好的名片下载到您的系统中。

如果您想观看演示或完整的编码教程视频以更好地理解，您可以观看下面的教程。

视频教程

如果您能订阅我的 YouTube 频道来支持我，我将不胜感激。

代码

对于这个项目，我们有 3 个文件。index.html，style.css和app.js。

因此，从 HTML 基本结构开始，链接style.css并app.js归档到其中。之后，为标题添加一个 h1 元素。

<h1 class="heading">design your <span>visiting card</span></h1>
Enter fullscreen mode Exit fullscreen mode 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background: #f6f6f6;
    font-family: 'roboto', sans-serif;
    padding: 50px;
}

.heading{
    text-align: center;
    text-transform: capitalize;
    font-size: 70px;
    font-weight: 400;
    margin-bottom: 5vh;
}

.heading span{
    color: #467aff;
}
Enter fullscreen mode Exit fullscreen mode
输出

捕获

现在，创建一个div元素，左侧包含卡片，右侧包含设计选项。div也创建一个卡片元素。

<div class="main">
    <div class="card">

    </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.main{
    display: flex;
    padding: 50px;
    flex-wrap: wrap;
}

.card{
    width: 45%;
    margin-right: 5%;
    min-width: 500px;
    height: 300px;
    background: #fff;
    position: relative;
    border-radius: 5px;
    padding: 20px;
    background-image: url(img/img1.png);
    background-size: cover;
    overflow: hidden;
}

.card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2;
}
Enter fullscreen mode Exit fullscreen mode
输出

捕获2

现在在卡片元素内制作一个徽标容器。

<div class="logo"></div>
Enter fullscreen mode Exit fullscreen mode 
.logo{
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    margin: 5px auto;
    background-image: url('img/logo.png');
    background-size: cover;
}
Enter fullscreen mode Exit fullscreen mode

现在当然要命名卡片元素里面的一些输入。

<input type="text" class="name" maxlength="30" placeholder="business name">
<input type="text" class="slogan" maxlength="50" placeholder="business slogan">

<input type="text" class="website-link" placeholder="website">
<input type="text" class="email" placeholder="email">
Enter fullscreen mode Exit fullscreen mode 
input{
    position: relative;
    text-align: center;
    outline: none;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 10px;
    background: none;
    width: 100%;
    border: none;
    font-size: 30px;
    color: #fff;
    transition: .5s;
}

::placeholder{
    text-transform: capitalize;
    color: #fff;
}

.slogan{
    font-size: 20px;
    margin: 5px 0;
}

input:focus{
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.website-link, .email{
    font-size: 16px;
    opacity: .75;
    position: absolute;
    text-align: left;
    width: 50%;
    height: auto;
    bottom: 10px;
}

.website-link{
    left: 20px;
}

.email{
    right: 20px;
    text-align: right;
}
Enter fullscreen mode Exit fullscreen mode
输出

Capture4

太棒了！卡片设计完成了。现在，您可以根据需要在输入框中快速输入详细信息。现在，让我们在右侧添加选项。

<!-- settings -->
<div class="setting">
    <input type="file" accept="*image" id="upload" hidden>
    <label for="upload" class="btn upload">upload logo</label>
</div>
Enter fullscreen mode Exit fullscreen mode

在上面的代码中，我只是在元素div内部创建了一个单独的元素main。在这个元素内部setting，我创建了一个上传输入框。hidden属性用于隐藏输入框。

.setting{
    width: 50%;
}

.btn{
    font-size: 16px;
    text-transform: capitalize;
    padding: 10px 20px;
    border-radius: 5px;
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
}

.btn:focus, .btn:hover{
    background-color: rgba(0, 0, 0, 0.1);
}
Enter fullscreen mode Exit fullscreen mode
输出

Capture5

现在当然要制作背景图像。

<!-- backgrounds -->
<div class="backgrounds">
    <img src="img/img1.png" class="active" alt="">
    <img src="img/img2.png" alt="">
    <img src="img/img3.png" alt="">
    <img src="img/img4.png" alt="">
    <img src="img/img5.png" alt="">
    <img src="img/img6.png" alt="">
</div>
Enter fullscreen mode Exit fullscreen mode 
.backgrounds{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 20px 0;
}

.backgrounds img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    transition: .5s;
    border: 0;
    cursor: pointer;
}

.backgrounds img:hover{
    opacity: 0.5;
}

.backgrounds img.active{
    border: 5px solid #fff;
}
Enter fullscreen mode Exit fullscreen mode
输出

Capture6

现在我们已经完成了样式设置。接下来只需创建一个下载按钮。并添加一个锚链接，但不要添加任何文字。

<a href="#" id="link" download="visiting card.png"></a>
<button class="btn download-btn">download design</button>
Enter fullscreen mode Exit fullscreen mode

上面的代码在.setting元素内部。

download属性用于设置下载链接。download 属性的值是下载图片的文件名。我们将使用该link元素进行下载。

输出

Capture7

现在让我们快速编写一些 JS。打开app.js文件。确保将其导入到index文件中。

首先，让我们实现徽标上传功能。选择upload输入和logo元素。

// setting up logo
const uploadBtn = document.querySelector('#upload');
const logo = document.querySelector('.logo');
Enter fullscreen mode Exit fullscreen mode

然后将change事件添加到upload输入。

uploadBtn.addEventListener('change', () => {
    if(uploadBtn.files && uploadBtn.files[0]){
        let reader = new FileReader(); // init the file reader

        reader.addEventListener('load', () => {
            // reader.result will return the src of the uploaded image
            logo.style.backgroundImage = `url('${reader.result}')`;
        })

        reader.readAsDataURL(uploadBtn.files[0]);
    }
})
Enter fullscreen mode Exit fullscreen mode

在事件内部change。
if(uploadBtn.files && uploadBtn.files[0])这一行检查上传文件是否存在。只有文件上传后，此条件才会成立。
获取文件后，我们需要一个文件读取器来读取该图像文件。因此，我们使用了这个方法。let reader = new FileReader();初始化读取器后，为其添加 load 事件，并logo在那里更改元素的背景。

reader.addEventListener('load', () => {
            // reader.result will return the src of the uploaded image
            logo.style.backgroundImage = `url('${reader.result}')`;
        })
Enter fullscreen mode Exit fullscreen mode

最后，reader.readAsDataURL(uploadBtn.files[0]);这一行告诉读者需要读取哪个文件。在本例中，我们希望将第一个上传的文件放入文件数组中。

太棒了！上传徽标已生效。现在，我们必须允许用户更改卡片的背景。选择所有背景图片元素，以及卡片元素。

const bgs = document.querySelectorAll('.backgrounds img');
const card = document.querySelector('.card');
let activeBg = 0; //default background
Enter fullscreen mode Exit fullscreen mode

activeBg将存储当前选定的背景索引。因此，我们可以减少执行 for 循环的次数来实现结果。

现在使用forEach循环遍历bgs并将click事件添加到所有图像。在该更改中切换类active，并更改activeBg值。

bgs.forEach((item, i) => {
    item.addEventListener('click', () => {
        bgs[activeBg].classList.remove('active');
        item.classList.add('active');
        card.style.backgroundImage = `url('${item.src}')`;
        activeBg = i;
    })
})
Enter fullscreen mode Exit fullscreen mode

最后一步，我们必须实现下载功能。为此，我们将使用html2canvas一个库。这个库将帮助我们将 HTML 元素转换为画布。之后，我们就可以下载画布了。

不要忘记在文件html2canvas中添加 CDN index。

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

在脚本之前添加此内容app.js。

现在，选择download中的按钮app.js。并创建一个exportCard导出卡片的函数。exportCard点击download按钮时调用该函数。

// download button
let downloadBtn = document.querySelector('.download-btn');

let exportCard = () => {

}

downloadBtn.addEventListener('click', () => {
    exportCard();
})
Enter fullscreen mode Exit fullscreen mode

现在在里面编码exportCard。

let exportCard = () => {
    html2canvas(card)
    .then(canvas => {
        let link = document.getElementById('link');
        link.href = canvas.toDataURL();
        link.click(); // click on the link
    })
}
Enter fullscreen mode Exit fullscreen mode

html2canvas是库方法。它将元素转换为画布。此方法的第一个参数是element。在本例中，我传递了card元素。然后使用方法获取画布then。在这个方法中，选择我们在文件link中创建的元素。将其设置为（这将返回画布的 src/link）。最后通过调用点击链接。HTMLhrefcanvas.toDataURL()link.click()

如果您运行该网站并尝试下载，您可能会在控制台中看到此错误。

错误

Capture8

好吧，出现这个错误只是因为浏览器阻止了你将画布转换为链接。因为你无法访问用户系统上的本地文件。如果你托管了这个网站，那么你就不会看到这个错误。但在视频教程中，我搭建了一个 Node 服务器来运行这个程序localhost。所以现在让我们来搭建一个服务器。

  1. npm init在终端中运行命令来初始化节点应用程序。

  2. 然后运行npm i express.js nodemon安装epxress和nodemon库。

  3. 现在在你的 中进行一些更改package.json。将 更改main为server.js。并将 更改为scripts。

"main": "server.js",
"scripts": {
    "start": "nodemon server.js"
  },
Enter fullscreen mode Exit fullscreen mode
  1. 现在在你的目录中创建server.js文件。并编写服务器代码。
服务器.js
const express = require('express');

const app = express();
app.use(express.static(__dirname));

app.get('/', (req, res) => {
    res.sendFile('index.html');
})

app.listen(3000, () => {
    console.log('listening......')
})
Enter fullscreen mode Exit fullscreen mode

npm start通过在终端中运行命令来启动您的服务器。

太棒了！现在网站已经在本地运行了。现在你可以下载设计了。今天就到这里，希望大家理解了所有内容。如果你有疑问或者我遗漏了什么，请在评论区留言。

您可能觉得有用的文章

  1. 最佳 CSS 效果
  2. 无限 CSS 加载器
  3. Disney+ 克隆版
  4. Youtube API - Youtube 克隆
  5. TMDB - Netflix 克隆

如果您能订阅我的YouTube频道，我将不胜感激。我创作了非常棒的网络内容。

源代码

您的捐赠真的激励我创作更多类似的精彩教程。请在Patreon上支持我，请我喝杯咖啡，或在 PayPal 上捐款。

感谢您的阅读。

文章来源：https://dev.to/themodernweb/how-to-make-a-designing-website-with-html-css-and-js-visiting-card-designer-4ml4
Devto 翻译
PREV
快速 CSS 技巧：制作渐变文字描边。渐变文字描边视频教程，让我们开始吧，你可能会觉得有用的文章
NEXT
🔥🔥 如何在 css 中设置选择输入的样式演示视频教程 - 让我们开始编码吧