1. 首页
  2. 分类
  3. javascript
nodejs中使用ffmpeg零基础教程（electron+vue3）
System
2024-08-24
所有,javascript



// 安装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文件
System
2024-08-24
所有,javascript

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

  1. 将外部JavaScript文件放置在项目的static目录下（如果没有此目录，请创建一个）。
  2. 在需要使用该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的方法及使用建议（以例子说明）
System
2024-08-24
所有,javascript



<!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 中的使用
System
2024-08-24
所有,javascript



<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字符串图片的颜色，封装函数
System
2024-08-24
所有,javascript

在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简单易懂）
System
2024-08-24
所有,javascript

以下是一个使用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-router.esm.js:2046 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to c
System
2024-08-23
所有,javascript

报错解释：

这个错误是由 Vue.js 的路由管理器 vue-router 抛出的。错误类型是 NavigationDuplicated，意味着在处理一个导航到一个给定的路由时，发生了一个新的导航尝试去到同一个路由。这通常发生在用户快速连续点击同一链接或者在短时间内进行多次路由跳转时。

解决方法：

  1. 在你的 Vue 应用中，你可以监听路由对象的 beforeEach 钩子，并在这里处理这个错误。
  2. 检查正在发生的导航即将进行到的路由路径，如果发现是相同的路径，并且已经有一个导航在进行中，你可以使用 router.onError 方法来防止这个错误。

示例代码：




router.onError((err) => {
  if (err.name === 'NavigationDuplicated') {
    // 清除错误，不做进一步处理
    console.log('Navigation duplicated, ignoring error');
  } else {
    // 处理其它错误
    console.error(err);
  }
});

或者，如果你想要完全避免这个错误，可以在 beforeEach 钩子中进行检查：




router.beforeEach((to, from, next) => {
  if (router.currentRoute.path === to.path) {
    // 当前路由就是即将跳转的路由，避免错误
    console.log('Avoiding navigation duplication');
    next(false); // 停止当前的导航
  } else {
    next(); // 允许导航继续
  }
});

选择哪种方法取决于你的应用逻辑和用户体验的需求。通常，第二种方法在用户体验上更好，因为它不会让用户看到错误消息，而第一种方法更为简单。

- 阅读更多 -
【Three.js】使用精灵图Sprite创建面朝相机的文本标注
System
2024-08-23
所有,javascript



import * as THREE from 'three';
 
// 创建一个新的精灵材质
const spriteMaterial = new THREE.SpriteMaterial({
    color: 0xffffff, // 设置精灵材质的颜色
    transparent: true, // 允许透明度
    alphaTest: 0.5, // 设置透明度测试，低于此值的部分将被忽略
    depthWrite: false, // 禁止深度写入，确保文字总是在前面显示
    sizeAttenuation: false // 禁用尺寸衰减，确保精灵不会随着距离缩小
});
 
// 创建精灵对象
const sprite = new THREE.Sprite(spriteMaterial);
sprite.position.set(0, 0, 0); // 设置精灵的位置
 
// 创建文字标注
const label = new THREE.TextGeometry('你好', {
    font: new THREE.FontLoader().parse(fontJSON), // 使用FontLoader加载的字体
    size: 0.5, // 设置文字大小
    height: 0.2, // 设置文字的高度
    curveSegments: 12, // 文字的曲线分段数
    bevelEnabled: true, // 使贝塞尔斜面有效
    bevelThickness: 0.15, // 设置贝塞尔斜面的厚度
    bevelSize: 0.1, // 设置贝塞尔斜面的大小
    bevelOffset: 0, // 设置贝塞尔斜面的偏移量
    bevelSegments: 5 // 贝塞尔斜面的分段数
});
 
// 创建精灵的几何体
const spriteGeometry = new THREE.BoxBufferGeometry(label.boundingBox.max.x, label.boundingBox.max.y, label.boundingBox.max.z);
 
// 创建精灵的几何体
const spriteGeometry = new THREE.BoxBufferGeometry(label.boundingBox.max.x, label.boundingBox.max.y, label.boundingBox.max.z);
 
// 将文字标注应用于精灵几何体
const spriteMesh = new THREE.Mesh(spriteGeometry, spriteMaterial);
 
// 将精灵添加到场景
scene.add(spriteMesh);

这段代码展示了如何在Three.js中创建一个面朝相机的文字标注。首先，我们创建了一个精灵材质并对其进行配置，然后创建了一个精灵对象，并为它设置了位置。接着，我们使用TextGeometry来创建文字的几何体，并将其与精灵材质结合起来创建一个可以渲染文字的精灵网格模型。最后，我们将这个精灵添加到场景中，它将始终面向相机进行渲染。

- 阅读更多 -
JS 获取浏览器声音、麦克风、通知权限
System
2024-08-23
所有,javascript

在JavaScript中，获取浏览器的声音、麦克风、通知权限可以通过调用相应的API完成。以下是获取这些权限的示例代码：




// 获取声音权限
function getAudioPermission() {
    return new Promise((resolve, reject) => {
        if ('AudioContext' in window) {
            let context = new AudioContext();
            context.resume().then(() => {
                resolve('Granted');
            }).catch(err => {
                reject(err);
            });
        } else {
            reject(new Error('AudioContext not supported'));
        }
    });
}
 
// 获取麦克风权限
function getMicrophonePermission() {
    return navigator.mediaDevices.getUserMedia({ audio: true })
        .then(stream => {
            // 流（stream）是麦克风音频输入。
            // 你可以通过创建一个新的 MediaStreamAudioSourceNode 来使用它。
            // 如果你只是想检查麦克风权限，可以在这里停止流
            stream.getTracks().forEach(track => track.stop());
            return 'Granted';
        })
        .catch(err => {
            console.error('Microphone permission denied', err);
            return 'Denied';
        });
}
 
// 获取通知权限
function getNotificationPermission() {
    let permission = Notification.permission;
    if (permission === 'granted') {
        return 'Granted';
    } else if (permission === 'denied') {
        return 'Denied';
    } else {
        // 如果未询问过，则请求权限
        Notification.requestPermission().then(newPermission => {
            return newPermission;
        });
    }
}
 
// 使用示例
getAudioPermission()
    .then(permission => console.log('Audio permission:', permission))
    .catch(err => console.error('Error getting audio permission:', err));
 
getMicrophonePermission()
    .then(permission => console.log('Microphone permission:', permission))
    .catch(err => console.error('Error getting microphone permission:', err));
 
console.log('Notification permission:', getNotificationPermission());

请注意，获取通知权限时，Notification.requestPermission() 是异步的，因此返回值不会立即可用。相反，你应该在回调中处理权限结果。上面的代码为了简洁起见，没有这样做，而是直接返回了可能的权限值。在实际应用中，你应该使用回调或者Promise来处理权限请求的结果。

- 阅读更多 -
【WP】猿人学_2_js混淆_动态cookie
System
2024-08-23
所有,javascript

这个问题看起来是关于如何使用JavaScript代码来处理动态cookie的。这里提供一个简单的示例，展示如何在客户端动态地设置和读取cookie。




// 设置cookie函数
function setCookie(name, value, days) {
    var expires = "";
    if (days) {
        var date = new Date();
        date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
        expires = "; expires=" + date.toUTCString();
    }
    document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
 
// 获取cookie函数
function getCookie(name) {
    var nameEQ = name + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
    }
    return null;
}
 
// 使用示例
// 设置一个名为"user"的cookie，有效期为7天
setCookie("user", "张三", 7);
 
// 读取名为"user"的cookie
var user = getCookie("user");
console.log(user); // 输出: 张三

这段代码提供了setCookie和getCookie两个函数，分别用于设置和获取cookie。设置cookie时可以指定cookie的有效期，获取cookie时如果cookie不存在则返回null。这是一个非常基础的cookie处理方式，适合作为学习和理解如何在JavaScript中操作cookie的起点。

- 阅读更多 -
Copyright © 2024 Tech Blog
All Right Reserved | 京ICP备19053165号