分类前端技术下的文章

VueVite使用 html2canvas 把Html生成canvas转成图片并保存，以及填坑记录

2024-08-13




<template>
  <div>
    <div id="capture" ref="captureRef">
      <!-- 需要生成图片的内容 -->
    </div>
    <button @click="capture">生成图片</button>
  </div>
</template>
 
<script setup>
import { ref } from 'vue';
import html2canvas from 'html2canvas';
import { saveAs } from 'file-saver';
 
const captureRef = ref(null);
 
async function capture() {
  try {
    const canvas = await html2canvas(captureRef.value);
    const dataURL = canvas.toDataURL('image/png');
    const blob = await fetch(dataURL).then(r => r.blob());
    saveAs(blob, 'capture.png');
  } catch (error) {
    console.error('生成图片失败:', error);
  }
}
</script>

这段代码使用了Vue3的<script setup>语法糖，简化了组件的编写。它定义了一个函数capture，当按钮点击时，会尝试捕获captureRef中的DOM元素并使用html2canvas将其转换为Canvas，然后将Canvas保存为图片文件。在捕获过程中，可能会出现错误，这些错误会被捕获并在控制台中输出。

System

2024-08-13

所有,html

这个错误信息是不完整的，但根据提供的部分信息，可以推测这是一个JavaScript错误，通常出现在尝试使用URL.createObjectURL方法时。这个错误表明在调用createObjectURL方法时，方法的重载解析失败了。

URL.createObjectURL是一个方法，它允许你为一个文件或者Blob对象创建一个临时的URL，这在需要在浏览器中显示文件内容（如在<img>标签中显示图片，或在<a>标签中提供下载链接）时非常有用。

解决这个问题的方法通常包括以下几个步骤：

确保你传递给createObjectURL的是一个File对象或者Blob对象。
如果你正在使用TypeScript，确保类型声明正确。
确保你的代码在支持该方法的浏览器中运行。

例如，如果你正在使用JavaScript，你可能会这样使用createObjectURL：




const file = document.querySelector('input[type="file"]').files[0];
const url = URL.createObjectURL(file);

如果你确认以上都没有问题，但错误依然存在，可能是浏览器的BUG或者某些特定环境下的问题。在这种情况下，尝试在不同的浏览器中打开你的页面，或者检查是否有其他与URL.createObjectURL相关的错误。

如果你正在使用TypeScript，并且错误信息是关于重载解析的，确保你的类型声明是正确的，并且你传递的参数类型与声明的类型匹配。

如果你能提供完整的错误信息，可能会有更具体的解决方案。

- 阅读更多 -

HTML星空特效

System

2024-08-13

所有,html

HTML 星空特效可以通过CSS和JavaScript实现。以下是一个简单的HTML页面示例，展示了如何创建星空背景：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>星空特效</title>
<style>
  body, html {
    margin: 0;
    padding: 0;
    height: 100%;
  }
  .stars {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
  }
  .star {
    position: absolute;
    top: 0;
    width: 2px;
    height: 2px;
    background: white;
    border-radius: 50%;
    box-shadow: 
      #fff 0 0 1px,
      #fff 0 0 2px,
      #fff 0 0 3px,
      #fff 0 0 4px,
      #fff 0 0 5px,
      #fff 0 0 6px,
      #fff 0 0 7px,
      #fff 0 0 8px,
      #fff 0 0 9px,
      #fff 0 0 10px;
    animation: twinkle 1s infinite alternate ease-in-out;
  }
  @keyframes twinkle {
    0% { opacity: .5; }
    100% { opacity: 1; }
  }
</style>
</head>
<body>
<div class="stars">
  <div class="star"></div>
  <!-- 可以添加多个.star来增加星星数量 -->
</div>
 
<script>
  const stars = document.querySelectorAll('.star');
  const numStars = stars.length;
 
  function init() {
    c.height = window.innerHeight;
    c.width = window.innerWidth;
    for (let i = 0; i < numStars; i++) {
      stars[i].style.left = Math.random() * window.innerWidth + 'px';
      stars[i].style.top = Math.random() * window.innerHeight + 'px';
    }
  }
 
  window.onresize = init;
 
  init();
</script>
</body>
</html>

这段代码通过CSS创建了一个星光的样式，并通过JavaScript随机分配给每个星星。窗口大小改变时，星星位置也会重新计算并调整。这是一个简单的示例，你可以根据需要增加更多的复杂性，比如添加不同大小和颜色的星星，或者使用WebGL来创建更真实的星空效果。

- 阅读更多 -

【HTML】html纯常用代码

System

2024-08-13

所有,html

HTML 是用于创建网页的标准标记语言。以下是一些常用的 HTML 标签的示例代码：

基本页面结构：




<!DOCTYPE html>
<html>
<head>
    <title>页面标题</title>
</head>
<body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="http://www.example.com">这是一个链接</a>
</body>
</html>

图像插入：




<img src="image.jpg" alt="描述文字" />

创建列表：

无序列表：




<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>

有序列表：




<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>

表格：




<table>
    <tr>
        <th>表头1</th>
        <th>表头2</th>
    </tr>
    <tr>
        <td>单元格1</td>
        <td>单元格2</td>
    </tr>
</table>

表单和输入控件：




<form action="submit.php" method="post">
    <label for="name">姓名:</label>
    <input type="text" id="name" name="name" />
    <input type="submit" value="提交" />
</form>

视频嵌入：




<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持视频标签。
</video>

这些代码示例涵盖了 HTML 的基本元素，可以根据需要进行扩展和修改。

System

2024-08-13

所有,html

dangerouslyInsertHtml 方法是 WangEditor 富文本编辑器中用于插入任意 HTML 的方法。该方法在 5.0 版本中仍然存在，但是由于插入任意 HTML 可能会带来安全风险，因此方法名称中包含 "dangerously" 这一警告性词汇。在使用时，应确保所插入的 HTML 内容是安全的，以避免 XSS 攻击等安全问题。

以下是一个使用 dangerouslyInsertHtml 方法的示例代码：




// 首先，获取编辑器实例
const editor = new wangEditor('editor-container');
editor.create();
 
// 然后，使用 dangerouslyInsertHtml 方法插入 HTML
// 假设你已经有了安全可信的 HTML 内容
const safeHtmlContent = '<div>安全的 HTML 内容</div>';
editor.dangerouslyInsertHtml(safeHtmlContent);

在实际应用中，你应该确保 safeHtmlContent 是经过严格的过滤和清洗，以确保它不含有可能会执行恶意脚本的标签或属性。如果你插入的 HTML 是用户提供的内容，那么你需要在插入之前对内容进行严格的过滤和清洗，以防止 XSS 攻击。

- 阅读更多 -

Html+QtWeb服务器开发

System

2024-08-13

所有,html

在Qt中使用Html+QtWeb服务器开发，你可以使用Qt的网络模块来创建一个HTTP服务器，并使用Qt的WebEngine模块来提供能够运行HTML和JavaScript的浏览器引擎。以下是一个简单的示例，展示如何设置一个基本的HTTP服务器，并在服务器上提供一个HTML文件：




#include <QCoreApplication>
#include <QTcpServer>
#include <QTcpSocket>
#include <QFile>
#include <QTextStream>
#include <QDebug>
 
class HttpServer : public QTcpServer
{
    Q_OBJECT
public:
    HttpServer(QObject *parent = nullptr) : QTcpServer(parent) {}
 
protected:
    void incomingConnection(qintptr socketDescriptor) override {
        QTcpSocket *socket = new QTcpSocket(this);
        if (!socket->setSocketDescriptor(socketDescriptor)) {
            socket->deleteLater();
            return;
        }
 
        connect(socket, &QTcpSocket::disconnected, socket, &QObject::deleteLater);
        QFile file("index.html");
        if (!file.open(QIODevice::ReadOnly)) {
            qDebug() << "Cannot open file for reading";
            return;
        }
 
        QTextStream out(socket);
        out << "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n";
        out << file.readAll();
        file.close();
        socket->flush();
        socket->close();
    }
};
 
int main(int argc, char *argv[])
{
    QCoreApplication a(argc, argv);
 
    HttpServer server;
    if (!server.listen(QHostAddress::Any, 8080)) {
        qDebug() << "Server could not start";
        return -1;
    }
 
    qDebug() << "Server running on port 8080...";
    return a.exec();
}

在这个例子中，我们创建了一个HttpServer类，它继承自QTcpServer。当有新的连接进入时，它将尝试打开一个名为index.html的文件，并将其内容通过HTTP响应发送回客户端。这个简单的HTTP服务器可以作为开始学习Qt网络编程和Web开发的起点。

请注意，这个代码示例没有处理并发连接、错误处理或HTTP请求解析。在实际应用中，你需要添加这些功能来创建一个健壮的HTTP服务器。

System

2024-08-13

所有,html

HTML中的<table>标签用于创建表格。表格通常由行（<tr>）组成，每行包含单元格（<td>）或表头单元格（<th>）。

表格属性

border：定义表格边框的宽度。
cellpadding：定义单元格内容与单元格边界的距离。
cellspacing：定义单元格之间的距离。
width 和 height：定义表格的宽度和高度。

语义化表格

HTML5推荐使用<thead>、<tbody>、<tfoot>分别代表表格的头部、主体和脚部。

简易表格




<table>
  <tr>
    <td>Row 1, Cell 1</td>
    <td>Row 1, Cell 2</td>
  </tr>
  <tr>
    <td>Row 2, Cell 1</td>
    <td>Row 2, Cell 2</td>
  </tr>
</table>

合并单元格

使用rowspan合并同一行的单元格，使用colspan合并同一列的单元格。

合并单元格示例




<table border="1">
  <tr>
    <td>1</td>
    <td rowspan="2">2-3</td>
    <td colspan="2">4-5</td>
  </tr>
  <tr>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

在这个例子中，第一行的第二个单元格跨越2行，第二行的第二个单元格跨越2列。

- 阅读更多 -

【简单html静态网页代码】用HTML+CSS制作一个简单的学校网页(9页)

System

2024-08-13

所有,html

由于原始代码中存在的问题是代码过于冗长和冗余，我们可以使用更简洁的HTML和CSS来重构这个示例。以下是一个简化版的示例代码：




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学校主页</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  header, footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px 0;
  }
  nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
  }
  nav ul li {
    display: inline;
    margin-right: 10px;
  }
  a {
    color: white;
    text-decoration: none;
  }
  section {
    margin: 10px;
    padding: 20px;
    background-color: #EEE;
  }
  .clearfix::after {
    content: "";
    clear: both;
    display: table;
  }
  aside {
    float: right;
    width: 200px;
    background-color: #EEE;
    padding: 10px;
  }
</style>
</head>
<body>
<header>
  <h1>欢迎来到XX学校</h1>
</header>
<nav>
  <ul>
    <li><a href="index.html">首页</a></li>
    <li><a href="about.html">关于我们</a></li>
    <!-- 其他链接 -->
  </ul>
</nav>
<section class="clearfix">
  <article>
    <h2>学校新闻</h2>
    <p>这里是新闻内容...</p>
  </article>
  <aside>
    <h3>活动信息</h3>
    <ul>
      <li>活动1</li>
      <li>活动2</li>
      <!-- 其他活动 -->
    </ul>
  </aside>
</section>
<!-- 其他section内容 -->
<footer>
  <p>版权所有 © XX学校</p>
</footer>
</body>
</html>

这个简化版的代码使用了更现代的CSS语法，并且去除了冗余的结构和样式代码。它使用了<header>, <nav>, <section>, <article>和<aside>等语义化标签来提高代码的可读性和可维护性。同时，它使用了<style>标签内嵌CSS代码，这样可以避免外部CSS文件的引用，使得整个页面可以在一个HTML文件中自给自足。

- 阅读更多 -

js 实现拖拽效果

System

2024-08-13

所有,css3

在JavaScript中实现拖拽效果通常涉及监听鼠标事件并更新元素的位置。以下是一个简单的实现示例：

HTML:




<div id="draggable" style="width: 100px; height: 100px; background: red; position: absolute; cursor: pointer;"></div>

JavaScript:




var dragItem = document.getElementById('draggable');
var active = false;
var currentX;
var currentY;
var initialX;
var initialY;
var xOffset = 0;
var yOffset = 0;
 
dragItem.addEventListener('mousedown', function(event) {
    initialX = event.clientX - xOffset;
    initialY = event.clientY - yOffset;
 
    if (event.target === dragItem) {
        active = true;
    }
});
 
document.addEventListener('mouseup', function() {
    active = false;
});
 
document.addEventListener('mousemove', function(event) {
    if (active) {
        currentX = event.clientX - initialX;
        currentY = event.clientY - initialY;
        
        xOffset = currentX;
        yOffset = currentY;
 
        setTranslate(currentX, currentY, dragItem);
    }
});
 
function setTranslate(xPos, yPos, el) {
    el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
}

这段代码实现了一个可拖拽的红色方块。当用户点击方块时，mousedown 事件被触发，并记录下鼠标相对元素位置的偏移量。随后在 mousemove 事件中更新元素的位置。当用户释放鼠标按钮时，mouseup 事件被触发，停止拖拽操作。

- 阅读更多 -

CSS动画实现音频播放时柱状波动效果

System

2024-08-13

所有,css3




/* 定义音频播放时的柱状波动效果样式 */
.audio-wave-effect {
    position: relative;
    height: 100px; /* 波形的高度 */
    background: linear-gradient(to right, #5788fe, #b24592); /* 渐变背景色 */
    overflow: hidden; /* 超出容器部分隐藏 */
}
 
.audio-wave-effect::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 20px; /* 波形的高度 */
    background: linear-gradient(to right, #5788fe, #b24592); /* 渐变背景色 */
    animation: wave-animation 1s infinite; /* 应用波动动画 */
}
 
@keyframes wave-animation {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100%); /* 波动范围 */
    }
}

这段代码定义了一个.audio-wave-effect类，它可以被用来创建一个音频播放时的柱状波动效果。::after伪元素用来生成波动的视觉效果，通过@keyframes定义了一个水平方向的波动动画。这个效果可以被应用在音频播放器的视觉表现上，以提升用户体验。

- 阅读更多 -