分类前端技术下的文章

2024-08-17




<template>
  <div>
    <video ref="video" width="640" height="480" autoplay></video>
    <canvas ref="canvas" width="640" height="480"></canvas>
    <div v-if="lastDetection">
      <p>Face found at position: {{ lastDetection.relativeBox }}</p>
    </div>
  </div>
</template>
 
<script>
import * as faceapi from 'face-api.js';
 
export default {
  data() {
    return {
      lastDetection: null
    };
  },
  async mounted() {
    await faceapi.loadModels('/models'); // 确保路径指向了正确的模型文件夹
    await this.startVideo();
    setInterval(this.detectFaces, 100);
  },
  methods: {
    async startVideo() {
      const video = this.$refs.video;
      const stream = await navigator.mediaDevices.getUserMedia({ video: {} });
      video.srcObject = stream;
      await video.play();
    },
    async detectFaces() {
      const video = this.$refs.video;
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');
      context.drawImage(video, 0, 0, canvas.width, canvas.height);
 
      const detections = await faceapi.detectAllFaces(video, new faceapi.TinyFaceDetectorOptions());
      this.lastDetection = detections.slice(-1)[0];
      if (this.lastDetection) {
        const resizedDetection = this.lastDetection.forSize(width, height);
        faceapi.drawDetection(canvas, resizedDetection, { withScore: false });
      }
    }
  }
};
</script>

这个例子展示了如何在Vue组件中使用face-api.js进行人脸检测。它首先加载必要的模型，然后开始视频流，并每隔100毫秒检测一次视频中的人脸。检测到的人脸位置会被标记在视频的画面上。

- 阅读更多 -

html结合css实现浏览器展示3D相册

System

2024-08-17

所有,css3




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D相册</title>
<style>
  .album {
    width: 400px;
    height: 400px;
    perspective: 600px;
    margin: 50px auto;
  }
  .album img {
    width: 100%;
    height: 100%;
    transform: translateZ(-1px);
    position: absolute;
    backface-visibility: hidden;
  }
  .album:hover img {
    transform: rotateY(360deg);
    transition: transform 10s ease-in-out;
  }
</style>
</head>
<body>
<div class="album">
  <img src="path_to_your_image_1.jpg" alt="Image 1">
  <img src="path_to_your_image_2.jpg" alt="Image 2">
  <img src="path_to_your_image_3.jpg" alt="Image 3">
  <!-- 更多图片 -->
</div>
</body>
</html>

这个简单的HTML和CSS代码示例展示了如何创建一个基本的3D相册。当鼠标悬停在相册容器上时，所有的图片会旋转一周。你需要替换src属性的值为你自己的图片路径。这个例子使用了transform和transition属性来实现动画效果，并且通过backface-visibility属性来确保在旋转时不会显示图片的背面。

- 阅读更多 -

前端使用highlight.js代码高亮显示(服务端返回前端代码的字符串格式)

System

2024-08-17

所有,jquery

要在前端使用highlight.js来高亮显示从服务端返回的代码字符串，你需要按照以下步骤操作：

引入highlight.js库及相关语言高亮样式。
在页面中准备一个用于显示代码的元素。
使用highlight.js提供的API将返回的代码字符串进行高亮渲染。

以下是一个简单的示例代码：

HTML:




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Highlight Code Example</title>
    <!-- 引入 highlight.js 样式 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/styles/default.min.css">
    <!-- 引入 highlight.js 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.0.1/highlight.min.js"></script>
</head>
<body>
    <pre><code id="code-container"></code></pre>
 
    <script>
        // 假设这是从服务端获取的代码字符串
        var codeString = "console.log('Hello, World!');";
 
        // 高亮渲染代码
        hljs.highlightAuto(codeString).value;
 
        // 将高亮后的代码设置到页面上的元素中
        document.getElementById('code-container').innerHTML = hljs.highlightAuto(codeString).value;
    </script>
</body>
</html>

在这个例子中，我们假设codeString是从服务端接收到的代码字符串。highlightAuto函数自动检测代码语言并应用相应的高亮样式。然后，我们将高亮后的代码字符串设置到页面上的<code>元素内。

请确保服务器返回的内容类型是正确的（如application/json），以便正确处理从服务端接收到的字符串。如果服务端返回的内容是HTML格式，你可能需要对返回的代码字符串进行HTML实体编码，以避免XSS攻击。

- 阅读更多 -

HTML5新增表单元素和表单属性

System

2024-08-17

所有,html5

HTML5引入了一些新的表单控件和表单属性，以下是一些常见的示例：

色彩选择器（<input type="color">）:




<input type="color" name="favcolor">

日期选择器（<input type="date">）:




<input type="date" name="birthday">

时间选择器（<input type="time">）:




<input type="time" name="appointment">

日期时间选择器（<input type="datetime-local">）:




<input type="datetime-local" name="meetingtime">

周选择器（<input type="week">）:




<input type="week" name="week">

月份选择器（<input type="month">）:




<input type="month" name="month">

数值输入控制（<input type="number">）:




<input type="number" name="quantity" min="1" max="5" step="1">

电子邮件输入（<input type="email">）:




<input type="email" name="email">

网址输入（<input type="url">）:




<input type="url" name="homepage">

必填字段（required属性）:




<input type="text" name="username" required>

模式验证（pattern属性）:




<input type="text" name="code" pattern="[0-9]{4}" title="Enter a four-digit code">

插入提示（placeholder属性）:




<input type="text" name="username" placeholder="Enter your username">

自动对焦（autofocus属性）:




<input type="text" name="username" autofocus>

禁用输入（disabled属性）:




<input type="text" name="username" disabled>

只读输入（readonly属性）:




<input type="text" name="username" readonly>

多行文本输入（<textarea>）:




<textarea name="comments"></textarea>

隐藏字段（<input type="hidden">）:




<input type="hidden" name="session_id" value="12345">

选项分组（<optgroup>）:




<select name="country">
  <optgroup label="Europe">
    <option value="de">Germany</option>
    <option value="fr">France</option>
  </optgroup>
  <optgroup label="America">
    <option value="us">USA</option>
    <option value="ca">Canada</option>
  </optgroup>
</select>

输出标签（<output>）:




<output name="result">0</output>

富文本编辑器（<textarea>与contenteditable属性）:




<div c

- 阅读更多 -

SpringBoot使用jsoup爬取HTML

System

2024-08-17

所有,html




import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
 
@RestController
public class JsoupController {
 
    @GetMapping("/parseHtml")
    public String parseHtml() {
        try {
            // 目标网页URL
            String url = "http://example.com";
            // 使用Jsoup连接网页
            Document doc = Jsoup.connect(url).get();
            // 解析你感兴趣的内容，例如标题
            String title = doc.title();
 
            return title;
        } catch (Exception e) {
            e.printStackTrace();
            return "Error parsing HTML";
        }
    }
}

这段代码展示了如何在Spring Boot应用中使用Jsoup库来解析HTML。当访问/parseHtml端点时，它会连接到指定的URL，获取HTML内容，并返回页面的标题。这是一个简单的示例，实际应用中可能需要根据具体需求来解析HTML文档中的其他部分。

- 阅读更多 -

leaflet学习笔记-leaflet-ajax获取数据

System

2024-08-17

所有,ajax

在Leaflet中，我们可以使用AJAX请求从服务器获取数据，并将其作为图层添加到地图上。以下是一个使用Leaflet和AJAX从服务器获取GeoJSON数据并将其添加到地图上的示例代码：




// 创建地图实例
var map = L.map('mapid').setView([51.505, -0.09], 13);
 
// 添加地图层
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);
 
// 使用AJAX获取GeoJSON数据
$.ajax({
    url: 'path/to/your/geojson', // 你的GeoJSON数据的URL
    dataType: 'json',
    success: function(data) {
        // 将GeoJSON数据添加到地图上
        L.geoJSON(data).addTo(map);
    },
    error: function(error) {
        console.error('Error loading GeoJSON data:', error);
    }
});

在这个例子中，我们首先创建了一个地图实例，并设置了一个视图中心和缩放级别。然后，我们添加了一个使用OpenStreetMap瓦片的基本图层。接下来，我们使用$.ajax()函数从服务器获取GeoJSON数据。在请求成功完成时，我们使用L.geoJSON()函数将获取的数据转换为Leaflet图层，并将其添加到地图上。如果请求失败，我们在控制台中记录错误信息。

请注意，你需要有一个有效的GeoJSON数据URL，并且确保你的服务器允许跨域请求（CORS），否则AJAX请求可能会失败。

- 阅读更多 -

Vue TypeScript 使用eval函数的坑

System

2024-08-17

所有,typescript

在Vue TypeScript项目中，如果你尝试使用eval()函数，你可能会遇到类型检查错误。这是因为TypeScript默认将eval()视为不安全的函数，并为其分配了一个更宽泛的类型，这可能不符合你的期望。

为了在TypeScript中使用eval()并确保类型安全，你可以使用类型断言来指定eval()的返回类型。

例如，如果你想要在Vue的methods中使用eval()来动态执行一些JavaScript代码，并且确保返回的类型是你期望的，你可以这样做：




<template>
  <div>
    <button @click="dynamicFunction">Run Dynamic Code</button>
  </div>
</template>
 
<script lang="ts">
import Vue from 'vue';
 
export default Vue.extend({
  methods: {
    dynamicFunction() {
      // 假设你有一段动态生成的JavaScript代码
      const code = '1 + 1';
      // 使用eval执行代码，并指定返回类型
      const result = (eval(code) as number);
      console.log(result);
    }
  }
});
</script>

在这个例子中，我们使用了TypeScript的类型断言(eval(code) as number)来告诉TypeScripteval()返回的结果应该是一个number类型。这样就可以避免TypeScript的类型检查错误，并确保你可以按照期望的方式使用eval()函数。

System

2024-08-17

所有,npm

解释：

这个错误表明在使用npm安装依赖时，特别是在安装node-sass版本4.14.1时，安装脚本执行失败了。node-sass是一个Node.js的库，用于将Sass编译成CSS，而且它需要编译本地代码，因此在安装时可能需要一些系统级的依赖。

解决方法：

确保你的Node.js版本与node-sass版本兼容。node-sass的最新版本可能不支持旧的Node.js版本。
检查是否有足够的权限运行npm。如果没有，使用管理员权限运行或者更改文件夹权限。
清除npm缓存：npm cache clean --force。
删除node_modules文件夹和package-lock.json文件，然后重新运行npm install。
如果你在Windows上，确保安装了Windows构建工具，比如windows-build-tools。
尝试安装其他版本的node-sass，可能是4.14.1版本的特定依赖在你的环境中不兼容。
查看npm的输出日志，寻找更具体的错误信息，根据具体错误进一步解决问题。

如果以上方法都不能解决问题，可以考虑使用其他的Sass编译工具，如dart-sass，它不依赖于本地编译，可能会更容易安装和使用。

System

2024-08-17

所有,npm

报错解释：

这个错误表明你尝试使用 cnpm（一个用于中国地区的 npm 镜像服务）时出现了问题。具体来说，是在尝试向 https://registry.npm.taobao.org/cnpm 发送请求时失败了。可能的原因包括网络问题、DNS 解析问题、代理设置问题或者 cnpm 服务本身不可用。

解决方法：

检查网络连接：确保你的设备可以正常访问互联网。
检查代理设置：如果你在使用代理，确保 cnpm 配置正确地设置了代理。
检查 DNS 解析：尝试更换 DNS 服务器，例如使用 8.8.8.8（Google DNS）或者 1.1.1.1（Cloudflare DNS）。
临时使用原始 npm 仓库：可以尝试使用 npm --registry https://registry.npm.taobao.org install cnpm 来临时使用 cnpm。
清理 npm 缓存：运行 npm cache clean --force 清理缓存后再尝试。
重新安装 cnpm：如果以上方法都不行，可以尝试重新安装 cnpm。

如果问题依然存在，可以查看 npm 或 cnpm 的官方文档，或者在相关社区寻求帮助。

- 阅读更多 -

html5中播放rtsp流实现监控、直播等方案

System

2024-08-17

所有,html5

在HTML5中播放RTSP流通常需要使用一些JavaScript库，这些库能够将RTSP转换为可以在浏览器中播放的格式，比如RTMP或HLS。以下是一个使用WebRTC和jsmpeg的简单示例：

首先，确保你的浏览器支持WebRTC。
引入jsmpeg.js库。




<!DOCTYPE html>
<html>
<head>
    <title>RTSP Stream to HTML5</title>
    <script src="jsmpeg.min.js"></script>
</head>
<body>
    <canvas id="video-canvas"></canvas>
    <script>
        var video = new JSMpeg.Player("rtsp://your_rtsp_stream_url", {
            canvas: document.getElementById('video-canvas')
        });
    </script>
</body>
</html>

请注意，由于浏览器的安全限制和技术的复杂性，直接通过HTML5播放RTSP流可能会遇到很多问题，比如兼容性、性能和加密等问题。因此，更常见的做法是使用媒体服务器将RTSP流转换为支持的格式，然后通过HLS或DASH在HTML5播放器中播放。

- 阅读更多 -