标签 Javascript 下的文章

2024-08-10

要使用pdf.js实现PDF预览，你需要按照以下步骤操作：

引入pdf.js库。
在HTML中设置canvas元素来渲染PDF页面。
使用PDF.js API加载并渲染PDF文件。

以下是一个简单的实现示例：

HTML:




<!DOCTYPE html>
<html>
<head>
  <title>PDF.js Preview</title>
</head>
<body>
  <canvas id="pdf-canvas"></canvas>
  <script src="https://mozilla.github.io/pdf.js/build/pdf.js"></script>
  <script src="pdf-preview.js"></script>
</body>
</html>

JavaScript (pdf-preview.js):




// 此函数将在PDF文档加载完成后调用
function renderPdf(pdfUrl) {
  // 使用PDF.js加载PDF文档
  pdfjsLib.getDocument(pdfUrl).promise.then(function(pdf) {
    // 获取第一页
    pdf.getPage(1).then(function(page) {
      var viewport = page.getViewport({ scale: 1.5 });
      var canvas = document.getElementById('pdf-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      // 渲染页码
      var renderContext = {
        canvasContext: context,
        viewport: viewport
      };
      page.render(renderContext).promise.then(function() {
        console.log('PDF渲染完成');
      });
    });
  });
}
 
// 调用函数，传入PDF文件的URL
renderPdf('path/to/your/pdf/file.pdf');

确保替换 'path/to/your/pdf/file.pdf' 为你的PDF文件的实际路径。这段代码会将PDF文件的第一页渲染到canvas元素中。如果需要渲染更多页面，可以修改代码以循环通过pdf.getPage方法获取每一页，并对每一页重复渲染过程。

- 阅读更多 -

vue使用particle.js实现前端可交互的粒子效果（含代码）

System

2024-08-10

所有,javascript




<template>
  <div id="particles-js"></div>
</template>
 
<script>
import Particles from 'particles.js'
 
export default {
  name: 'ParticlesBackground',
  mounted() {
    this.initParticlesJS()
  },
  methods: {
    initParticlesJS() {
      /* 配置particles.js参数 */
      const particlesParams = {
        particles: {
          number: { value: 80, density: { enable: true, value_area: 800 } },
          color: { value: '#ffffff' },
          shape: {
            type: 'circle',
            stroke: { width: 0, color: '#000000' },
            polygon: { nb_sides: 5 }
          },
          opacity: { value: 0.5, random: false, anim: { enable: false, speed: 1, opacity_min: 0.25, sync: false } },
          size: { value: 5, random: true, anim: { enable: false, speed: 20, size_min: 0.1, sync: false } },
          line_linked: { enable: true, distance: 150, color: '#ffffff', opacity: 0.4, width: 1 },
          move: { enable: true, speed: 2, direction: 'none', random: false, straight: false, out_mode: 'out' }
        },
        interactivity: {
          detect_on: 'canvas',
          events: { onhover: { enable: true, mode: 'repulse' }, onclick: { enable: true, mode: 'push' }, resize: true },
          modes: {
            grab: { distance: 400, line_linked: { opacity: 1 } },
            bubble: { distance: 400, size: 40, duration: 2, opacity: 8, speed: 3 },
            repulse: { distance: 200, duration: 0.4 },
            push: { particles_nb: 4 },
            remove: { particles_nb: 2 }
          }
        },
        retina_detect: true
      }
 
      /* 初始化particles.js */
      this.particlesJS = Particles.init('particles-js', particlesParams)
    }
  },
  beforeDestroy() {
    if (this.particlesJS) {
      this.particlesJS.destroy()
    }
  }
}
</script>
 
<style>
/* 确保particles.js覆盖整个父元素 */
#particles-js {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #b61924;
}
</style>

这段代码展示了如何在Vue组件中使用particles.js库来创建一个背景粒子效果。在mounted钩子中初始化粒子，并在beforeDestroy钩子中清理资源，以防止内存泄漏。这个例子简洁明了，并包含了注释，以便理解。

System

2024-08-10

所有,javascript

题目描述：

在一个虚拟的游戏中，有一个财库系统，用户可以存钱或者消费。系统会记录每一笔交易，包括交易时间和交易金额。现在给你一系列的交易记录，请你计算在给定时间范围内，用户的财富变化情况。

输入描述：

第一行包含两个整数n和m，表示交易记录的数量和询问的时间范围数量。

接下来n行，每行包含两个整数ti和vi，表示第i笔交易的时间和金额。

接下来m行，每行包含两个整数ai和bi，表示查询的时间范围，[ai, bi]。

输出描述：

对于每个查询时间范围，输出一个整数，表示在该时间范围内用户的财富总变化。

示例输入：

5

2 6

3 7

4 8

5 9

6 10

1 5

4 6

示例输出：

-15

解决方案：

这是一个典型的动态规划问题，可以通过维护一个前缀和数组来解决。

Java代码示例：




import java.util.Arrays;
import java.util.Scanner;
 
public class Main {
    public static void main(String[] args) {
        Scanner scanner = new Scanner(System.in);
        int n = scanner.nextInt();
        int m = scanner.nextInt();
        int[][] transactions = new int[n][2];
        for (int i = 0; i < n; i++) {
            transactions[i][0] = scanner.nextInt(); // ti
            transactions[i][1] = scanner.nextInt(); // vi
        }
        scanner.close();
 
        // 对交易按时间进行排序
        Arrays.sort(transactions, (a, b) -> a[0] - b[0]);
 
        long[] prefixSum = new long[n];
        for (int i = 0; i < n; i++) {
            if (i > 0) {
                prefixSum[i] = prefixSum[i - 1] + transactions[i][1];
            } else {
                prefixSum[i] = transactions[i][1];
            }
        }
 
        for (int i = 0; i < m; i++) {
            int start = scanner.nextInt();
            int end = scanner.nextInt();
            // 二分查找确定时间范围内的交易下标
            int left = 0, right = n - 1;
            while (left < right) {
                int mid = left + (right - left) / 2;
                if (transactions[mid][0] >= start) {
                    right = mid;
                } else {
                    left = mid + 1;
                }
            }
            int startIndex = left;
            left = 0;
            right = n - 1;
            while (left < right) {
                int mid = left + (right - left + 1) / 2;
                if (transactions[mid][0] <= end) {
                    left = mid;
                } else {
                    right = mid - 1;
                }
            }
            int endInd

- 阅读更多 -

Vue项目，在js文件里获取路由参数以及路由跳转

System

2024-08-10

所有,javascript

在Vue项目中，可以使用this.$route对象来获取当前路由的参数以及执行路由跳转。

获取路由参数：




// 在Vue组件的方法中
export default {
  methods: {
    getRouteParams() {
      const params = this.$route.params; // 获取路由参数
      console.log(params);
    }
  }
}

路由跳转：




// 在Vue组件的方法中
export default {
  methods: {
    navigateTo(path) {
      this.$router.push(path); // 跳转到指定路由
    },
    navigateToNamedRoute(name, params) {
      this.$router.push({ name, params }); // 使用命名路由跳转并传递参数
    }
  }
}

在js文件中使用路由：




import router from './router'; // 假设router是Vue Router实例
 
function someFunction() {
  const currentRoute = router.currentRoute;
  const params = currentRoute.params;
  console.log(params);
 
  // 跳转到一个指定的路径
  router.push('/new-path');
 
  // 使用命名路由和参数跳转
  router.push({ name: 'NamedRoute', params: { userId: 123 } });
}

请确保在js文件中正确地引入了Vue Router实例，并且这个文件在Vue项目的上下文中被正确加载。

- 阅读更多 -

AES 加解密（包含JS、VUE、JAVA、MySQL）工具方法

System

2024-08-10

所有,javascript

以下是一个简化的AES加解密工具方法示例，包括JavaScript、Vue.js、Java和MySQL的实现。

JavaScript (使用CryptoJS库):




// 引入CryptoJS库
const CryptoJS = require("crypto-js");
 
function encryptAES(data, secretKey) {
  return CryptoJS.AES.encrypt(JSON.stringify(data), secretKey).toString();
}
 
function decryptAES(ciphertext, secretKey) {
  const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
  return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
}
 
// 使用示例
const secretKey = "your-secret-key";
const data = { message: "Hello, World!" };
const encrypted = encryptAES(data, secretKey);
const decrypted = decryptAES(encrypted, secretKey);

Vue.js (使用axios和CryptoJS库):




// Vue方法部分
methods: {
  encryptData(data, secretKey) {
    return CryptoJS.AES.encrypt(JSON.stringify(data), secretKey).toString();
  },
  decryptData(ciphertext, secretKey) {
    const bytes = CryptoJS.AES.decrypt(ciphertext, secretKey);
    return JSON.parse(bytes.toString(CryptoJS.enc.Utf8));
  },
  async sendData() {
    const secretKey = "your-secret-key";
    const data = { message: "Hello, World!" };
    const encryptedData = this.encryptData(data, secretKey);
 
    try {
      const response = await axios.post('/api/data', { encryptedData });
      // 处理响应
    } catch (error) {
      // 处理错误
    }
  }
}

Java (使用AES库，需要添加依赖):




import javax.crypto.Cipher;
import javax.crypto.spec.SecretKeySpec;
import java.nio.charset.StandardCharsets;
import java.util.Base64;
 
public class AESUtil {
    public static String encryptAES(String data, String secretKey) throws Exception {
        Cipher cipher = Cipher.getInstance("AES");
        cipher.init(Cipher.ENCRYPT_MODE, new SecretKeySpec(secretKey.getBytes(StandardCharsets.UTF_8), "AES"));
        byte[] encryptedBytes = cipher.doFinal(data.getBytes(StandardCharsets.UTF_8));
        return Base64.getEncoder().encodeToString(encryptedBytes);
    }
 
    public static String decryptAES(String ciphertext, String secretKey) throws Exception {
        Cipher cipher = Cipher.getInstance("AES");
        cipher.init(Cipher.DECRYPT_MODE, new SecretKeySpec(secretKey.getBytes(StandardCharsets.UTF_8), "AES"));

System

2024-08-10

所有,javascript

canvas-toBlob.js 是一个用于将 HTML5 Canvas 内容转换为 Blob 对象的轻量级 JavaScript 库。以下是如何使用该库的示例代码：

首先，确保你已经加载了 canvas-toBlob.js 库。你可以通过 script 标签在 HTML 中引入它，或者通过模块管理器如 npm 或 yarn 来安装并在 JavaScript 文件中引入。




<script src="path/to/canvas-toBlob.js"></script>

或者使用 npm/yarn：




npm install canvas-toblob




import { toBlob } from 'canvas-toblob';

然后，你可以使用 toBlob 函数将 Canvas 转换为 Blob 对象。以下是一个简单的例子：




// 假设你有一个 canvas 元素
const canvas = document.getElementById('myCanvas');
 
// 使用 toBlob 函数将 canvas 转换为 Blob
toBlob(canvas, 'image/png').then(blob => {
  // 现在你有了一个 Blob 对象，可以使用它做进一步的操作，例如上传到服务器或创建一个 URL
  console.log(blob);
});

在上面的代码中，toBlob 函数接受两个参数：canvas 对象和一个表示所需输出格式的 MIME 类型字符串。该函数返回一个 Promise，当转换完成时，它将解析为生成的 Blob 对象。

- 阅读更多 -

在vue项目里使用js-web-screen-shot 实现截图的功能

System

2024-08-10

所有,javascript

在Vue项目中使用js-web-screen-shot插件实现截图功能，首先需要安装该插件：




npm install js-web-screen-shot --save

然后在Vue组件中引入并使用该插件：




<template>
  <div>
    <button @click="takeScreenshot">截图</button>
  </div>
</template>
 
<script>
import { takeScreenshot } from 'js-web-screen-shot';
 
export default {
  methods: {
    async takeScreenshot() {
      try {
        const img = await takeScreenshot();
        console.log(img); // 这里可以处理截图后的图片，例如显示、下载等
      } catch (error) {
        console.error('截图失败:', error);
      }
    }
  }
};
</script>

在上面的例子中，点击按钮会触发takeScreenshot方法，该方法会调用js-web-screen-shot插件进行截图，并将截图的结果以Base64字符串的形式返回。然后你可以将这个字符串用于展示、下载或其他需要的操作。

- 阅读更多 -

深入理解Vue3.js响应式系统设计之调度执行

System

2024-08-10

所有,javascript

在Vue3.0中，响应式系统的设计是通过一个名为Tracking（追踪）和Scheduler（调度器）的过程来实现的。以下是一个简化的例子，展示了如何实现这样的系统：




let activeEffect;
const targetMap = new WeakMap();
 
// 追踪函数，开始追踪一个响应式属性的变化
function track(target, key) {
  if (activeEffect) {
    let depsMap = targetMap.get(target);
    if (!depsMap) {
      targetMap.set(target, (depsMap = new Map()));
    }
    let dep = depsMap.get(key);
    if (!dep) {
      depsMap.set(key, (dep = new Set()));
    }
    if (!dep.has(activeEffect)) {
      dep.add(activeEffect);
    }
  }
}
 
// 触发器函数，当响应式属性发生变化时调用
function trigger(target, key) {
  const depsMap = targetMap.get(target);
  if (depsMap) {
    const effects = new Set([...(depsMap.get(key) || [])]);
    effects.forEach(effect => effect());
  }
}
 
// 调度器函数，用于在异步情况下合理执行effect
function schedule(fn) {
  Promise.resolve().then(fn);
}
 
// 效应函数，定义了响应式系统的响应方式
class ReactiveEffect {
  constructor(fn) {
    this.fn = fn;
    this.deps = [];
  }
 
  run() {
    activeEffect = this;
    this.fn();
    activeEffect = null;
  }
}
 
// 示例使用
const data = { count: 0 };
 
let effect;
 
// 创建效应
effect = new ReactiveEffect(() => {
  console.log(data.count);
});
 
// 启动效应
effect.run();
 
// 追踪数据变化
data.count++; // 触发效应

在这个例子中，我们定义了track和trigger函数来追踪依赖和触发依赖的变化。schedule函数用于在异步情况下合理地调度效应的执行。ReactiveEffect类用于定义响应式系统的响应方式。通过这样的机制，Vue3.0实现了一个高效的响应式系统。

- 阅读更多 -

【vuejs】首次页面加载时触发那些声明周期钩子函数

System

2024-08-10

所有,javascript

在Vue.js中，当组件首次加载到页面上时，会触发的声明周期钩子函数包括：

beforeCreate：在实例初始化之后，数据观测(data observer)和事件/watcher 设置之前被调用。
created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount：在挂载开始之前被调用，相关的 render 函数首次被调用。
mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。

示例代码：




new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  beforeCreate: function () {
    console.log('beforeCreate: 实例被创建之初，数据观测和事件/watcher 设置之前')
  },
  created: function () {
    console.log('created: 实例已经创建完成，属性和方法的运算，watch/event 事件回调')
  },
  beforeMount: function () {
    console.log('beforeMount: 挂载开始之前，相关的 render 函数首次被调用')
  },
  mounted: function () {
    console.log('mounted: el 被新创建的 vm.$el 替换，并挂载到实例上去之后')
  }
})

当你访问页面时，控制台将显示这些消息。

System

2024-08-10

所有,javascript

这个错误信息看起来像是在使用Webpack打包JavaScript应用时遇到的问题，与Babel和Cache-loader这几个工具有关。但是，这个错误信息不完整，没有提供足够的上下文来确定确切的问题。

通常，这种类型的错误可能是由以下原因造成的：

配置错误：Webpack配置文件中可能存在错误。
版本不兼容：项目中的某些依赖可能不兼容。
缓存问题：缓存可能导致加载器（loader）或插件（plugin）不正确地工作。

解决方法：

检查Webpack配置文件（如webpack.config.js），确保所有loader和插件都正确配置。
确保所有依赖项都兼容并且是正确的版本。
尝试清除Webpack的缓存，可以通过运行webpack --cache-reset来实现。
如果错误信息中有更多细节，请根据详细信息进行针对性的调试。

如果能提供完整的错误信息或者更详细的上下文，可能会有更具体的解决方案。

- 阅读更多 -