System 发布的文章

js中截取字符串前几位的方法

2024-08-24

在JavaScript中，可以使用substring()、slice()或substr()方法来截取字符串的前几位。

substring(start, end): 从start索引开始到end索引（不包括end）之间的字符。
slice(start, end): 从start索引开始到end索引（不包括end）之间的字符。
substr(start, length): 从start索引开始，截取长度为length的字符串。

例如，要截取字符串前5位：




let str = "Hello World";
let substr5 = str.substring(0, 5); // "Hello"
let sliced5 = str.slice(0, 5); // "Hello"
let substr5_2 = str.substr(0, 5); // "Hello"

如果只需要截取到字符串的末尾，这些方法可以只用一个参数：




let str = "Hello World";
let substrToEnd = str.substring(0); // "Hello World"
let slicedToEnd = str.slice(0); // "Hello World"
let substrToEnd_2 = str.substr(0); // "Hello World"

注意：substr()方法在最新的JavaScript标准中已不被推荐使用，因其行为不一致，建议使用substring()或slice()。

nodejs中使用ffmpeg零基础教程（electron+vue3）

2024-08-24




// 安装electron和vue3依赖
npm install electron vue@next electron-builder --save-dev
 
// 在src/main/index.js中配置electron主进程
const { app, BrowserWindow } = require('electron');
const path = require('path');
 
function createWindow() {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
    },
  });
  win.loadFile('dist/index.html');
}
 
app.whenReady().then(createWindow);
 
// 在src/main/preload.js中配置electron的预加载脚本
const { contextBridge, ipcRenderer } = require('electron');
 
contextBridge.exposeInMainWorld('electron', {
  send: (channel, args) => ipcRenderer.send(channel, args),
  receive: (channel, func) => ipcRenderer.on(channel, func),
});
 
// 在Vue组件中使用electron和ffmpeg
<template>
  <div>
    <button @click="startConversion">转换视频</button>
  </div>
</template>
 
<script>
export default {
  methods: {
    startConversion() {
      this.electron.send('convert-video', 'video-input.mp4');
    }
  },
  mounted() {
    this.electron.receive('video-converted', (event, args) => {
      console.log('视频转换完成', args);
    });
  }
};
</script>
 
// 在src/main/index.js中处理ffmpeg转码逻辑
const { app, ipcMain } = require('electron');
const ffmpeg = require('ffmpeg-static');
const { exec } = require('child_process');
 
ipcMain.on('convert-video', (event, videoPath) => {
  const outputPath = 'output-video.mp4';
  exec(`${ffmpeg.path} -i ${videoPath} ${outputPath}`, (error, stdout, stderr) => {
    if (error) {
      console.error(`执行出错: ${error}`);
      return;
    }
    event.reply('video-converted', outputPath);
  });
});
 
// 注意：以上代码仅为示例，实际使用时需要处理错误和异常，确保安全性。

这个示例展示了如何在一个使用Vue 3和Electron的项目中集成ffmpeg。它包括了主进程和渲染进程的基本配置，并演示了如何在渲染进程中触发视频转码，以及在主进程中处理转码逻辑。这个示例提供了一个简单的开始，对于想要了解如何在Electron应用中使用ffmpeg的开发者来说，是一个很好的起点。

uni-app引用外部js文件

2024-08-24

在uni-app中引用外部JavaScript文件，可以通过以下步骤进行：

将外部JavaScript文件放置在项目的static目录下（如果没有此目录，请创建一个）。
在需要使用该JavaScript文件的页面的<script>标签中，使用require关键字来引用该文件。

例如，假设你有一个名为example.js的外部JavaScript文件，放置在static目录下，你可以在pages/index/index.vue页面中这样引用：




// 在 pages/index/index.vue 文件中
<template>
  <view>
    <!-- 页面内容 -->
  </view>
</template>
 
<script>
// 引用外部JS文件
var externalModule = require('@/static/example.js');
 
export default {
  data() {
    return {
      // 数据定义
    };
  },
  onLoad() {
    // 使用外部JS文件的函数
    externalModule.someFunction();
  },
  // 其他选项
};
</script>
 
<style>
/* 页面样式 */
</style>

在example.js文件中，你可以定义一些函数供页面使用：




// 在 static/example.js 文件中
function someFunction() {
  console.log('Function from external JS file');
}
 
module.exports = {
  someFunction: someFunction
};

以上就是在uni-app中引用外部JavaScript文件的方法。

HTML页面中引入CSS和JS的方法及使用建议（以例子说明）

2024-08-24




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS和JS引入示例</title>
    <!-- 引入外部CSS文件 -->
    <link rel="stylesheet" href="styles.css">
    <!-- 内联CSS样式 -->
    <style>
        body {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <p>这是一个段落。</p>
    <!-- 引入外部JS文件 -->
    <script src="script.js"></script>
    <!-- 内联JavaScript代码 -->
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            console.log('页面已加载完成！');
        });
    </script>
</body>
</html>

在这个示例中，我们展示了如何在HTML页面中引入外部CSS文件和JS文件，以及如何使用内联的CSS和JavaScript代码。通过这样的方式，我们可以更好地组织我们的代码，使得HTML标记语言和样式、行为分离，便于维护和优化。

【PDF.js】2023 最新 PDF.js 在 Vue3 中的使用

2024-08-24




<template>
  <div>
    <canvas ref="pdfCanvas"></canvas>
  </div>
</template>
 
<script>
import { onMounted, ref } from 'vue';
import * as pdfjsLib from 'pdfjs-dist/build/pdf';
 
export default {
  setup() {
    const pdfCanvas = ref(null);
 
    onMounted(async () => {
      const canvas = pdfCanvas.value;
      const context = canvas.getContext('2d');
      const url = 'path/to/your/pdf/file.pdf';
 
      // 加载PDF文档
      const loadingTask = pdfjsLib.getDocument(url);
      const pdf = await loadingTask.promise;
 
      // 获取第一页
      const page = await pdf.getPage(1);
 
      // 计算视口大小以适应画布
      const viewport = page.getViewport({ scale: 1.5 });
      canvas.width = viewport.width;
      canvas.height = viewport.height;
 
      // 渲染页面
      const renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      await page.render(renderContext).promise;
    });
 
    return {
      pdfCanvas
    };
  }
};
</script>

这个示例代码展示了如何在Vue 3中使用PDF.js来加载和渲染一个PDF文件的第一页。代码使用了Composition API，其中setup函数负责加载和渲染PDF页面。注意，你需要先安装pdfjs-dist npm包才能使用。

js实现任意更改base64字符串图片的颜色，封装函数

2024-08-24

在JavaScript中，可以通过Canvas API来修改base64编码的图片颜色。以下是一个简单的函数，用于将base64字符串的图片转换为灰度图像，并返回新的base64字符串。




function convertToGrayscale(base64Image) {
  // 创建Image对象
  var img = new Image();
  img.src = base64Image;
 
  // 等待图片加载完成
  img.onload = function() {
    // 创建Canvas元素
    var canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
 
    // 获取Canvas 2D上下文
    var ctx = canvas.getContext('2d');
 
    // 绘制图片到Canvas
    ctx.drawImage(img, 0, 0);
 
    // 获取图片数据
    var imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
    // 转换为灰度图
    for (var i = 0; i < imageData.data.length; i += 4) {
      var r = imageData.data[i];
      var g = imageData.data[i + 1];
      var b = imageData.data[i + 2];
 
      // 计算灰度值
      var gray = 0.3 * r + 0.59 * g + 0.11 * b;
 
      // 设置新的颜色值
      imageData.data[i] = gray; // Red channel
      imageData.data[i + 1] = gray; // Green channel
      imageData.data[i + 2] = gray; // Blue channel
    }
 
    // 将修改后的图片数据放回Canvas
    ctx.putImageData(imageData, 0, 0);
 
    // 导出为base64字符串
    var newBase64Image = canvas.toDataURL();
 
    // 返回新的base64字符串
    return newBase64Image;
  };
}
 
// 使用示例
var base64Image = 'data:image/png;base64,...'; // 这里是原始的base64字符串
var grayscaleBase64Image = convertToGrayscale(base64Image);

这个函数首先创建了一个Image对象，然后在图片加载完成后，创建了一个Canvas，并将图片绘制到Canvas上。使用getImageData获取到图片的像素数据，然后通过计算转换为灰度图像，最后使用putImageData将转换后的图像数据放回Canvas，并使用toDataURL方法获取新的base64字符串。

注意：这个函数是异步执行的，因为它依赖于图片加载完成的事件。如果需要在图片加载完成之前执行其他操作，可以使用Promise或者其他异步处理方式来改写这个函数。

YOLOv5部署到web端（flask+js简单易懂）

2024-08-24

以下是一个使用Flask和JavaScript实现的简单的YOLOv5模型部署到web端的示例。

首先，确保你已经安装了Flask和相关的依赖库。




# app.py
from flask import Flask, request, render_template, Response
import numpy as np
import cv2
import time
 
app = Flask(__name__)
 
# 加载YOLOv5模型
def load_model(model_path):
    # 这里应该是你加载模型的代码
    pass
 
# 模型推理函数
def infer(model, image):
    # 这里应该是你模型推理的代码
    pass
 
# 初始化模型
model = load_model('path_to_your_yolov5_model')
 
@app.route('/')
def index():
    return render_template('index.html')
 
@app.route('/predict', methods=['POST'])
def predict():
    # 获取图像
    file = request.files['image']
    img = cv2.imdecode(np.frombuffer(file.read(), np.uint8), cv2.IMREAD_COLOR)
 
    # 模型推理
    start_time = time.time()
    predictions = infer(model, img)
    elapsed = time.time() - start_time
 
    # 返回结果
    return Response(str(predictions), mimetype='application/json')
 
if __name__ == '__main__':
    app.run(debug=True)

然后，创建一个HTML文件用于前端展示：




<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
    <title>YOLOv5 Detection</title>
</head>
<body>
    <h1>YOLOv5 Object Detection</h1>
    <input type="file" id="image-selector" />
    <img id="image-preview" src=""/>
    <button id="predict-button">Predict</button>
    
    <script>
        const inputImage = document.getElementById('image-selector');
        const previewImage = document.getElementById('image-preview');
        const predictButton = document.getElementById('predict-button');
 
        inputImage.addEventListener('change', function() {
            const file = inputImage.files[0];
            const reader = new FileReader();
 
            reader.onload = function(event) {
                previewImage.src = event.target.result;
            }
 
            reader.readAsDataURL(file);
        });
 
        predictButton.addEventListener('click', function() {
            const formData = new FormData();
            formData.append('image', previewImage.src);
 
            fetch('/predict', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                console.log(data);
                // 处理模型的预测结果
            })
            .catch(error => console.error('Prediction error:', error));
        });
    </script>
</body>
</html>

vue中el-pagination分页属性:total总数不显示问题

2024-08-24

所有,vue.js

在Vue中，如果你遇到了el-pagination组件的total属性不显示的问题，可能是因为以下几个原因：

total属性没有正确绑定到组件的实例数据中。
数据绑定有问题，可能是使用了错误的变量或者没有正确更新变量的值。
组件的数据可能没有被正确初始化或者在数据更新后没有被正确更新。

解决方法：

确保total属性已经绑定到了组件的data中，并且是响应式的。




data() {
  return {
    total: 0 // 初始化total值
  };
}

确保你在数据更新时，total的值也相应更新。




methods: {
  updateTotal(newTotal) {
    this.total = newTotal;
  }
}

如果你使用的是异步数据加载，确保在数据加载完成后更新total值。
检查是否有其他的CSS样式影响了total显示，或者是否有同名的属性覆盖了你的设置。
确保你使用的是最新版本的Element UI，如果不是，请更新到最新版本。

如果以上方法都不能解决问题，可以考虑查看Vue开发者工具的控制台是否有相关的错误信息，或者检查是否有其他的组件或样式影响了el-pagination组件的显示。

2024-08-24

所有,vue.js

报错信息为npm WARN deprecated通常意味着npm在安装过程中发现了一个已经不再维护的包（deprecated package）。这并不是一个阻止安装的错误，只是一个警告，提醒用户该包可能不再被推荐使用。

解决方法：

检查是否有最新版本的Vue CLI可用，通过运行以下命令来更新Vue CLI到最新版本：
```
npm install -g @vue/cli
```
如果你已经是最新版本，或者不是因为已废弃的包导致的问题，则忽略这个警告。
如果你确实需要使用最新版本的包，可以尝试更新npm到最新版本，以确保最佳兼容性：
```
npm install -g npm@latest
```
如果警告信息中提到了具体的包，并且你确定需要使用这个包的新版本，可以尝试单独更新这个包：
```
npm install <package>@latest
```
如果npm WARN deprecated是由于某个特定包引起的，可以查看该包的npm页面或者GitHub仓库以获取更新和维护信息。
如果npm WARN deprecated是由于npm版本引起的，可以查看npm的官方文档或者社区获取关于如何解决版本兼容性问题的建议。

请根据实际情况选择适当的解决方法。