你有遇到过同样的需求吗？告诉我你的第一想法。存 Session storage ？可以，但是我更建议你使用 router.replace 。

为什么建议使用 router.replace 而不是浏览器自带的存储空间呢？

增加实用性，你有没有考虑过这种场景，也就是当我筛选好之后进行搜索，我需要将它发给我的同事。当使用storage时是实现不了的，同事只会得到一个初始的页面。那我们将这个筛选结果放入url中是不是就可以解决这个问题了。

router.replace

先给大家介绍一下 router.replace 的用法吧。

router.replace 是 Vue Router 提供的一个方法，用于替换当前的历史记录条目。与 router.push 不同的是，replace 不会在浏览器历史记录中添加新记录，而是替换当前的记录。这对于需要在 URL 中保存状态但不想影响浏览器导航历史的场景非常有用。

// 假设我们正在使用 Vue 2 和 Vue Router

methods: {

  updateFilters(newFilters) {

    // 将筛选条件编码为查询字符串参数

    const query = {

      ...this.$route.query,

      ...newFilters,

    };



    // 使用 router.replace 更新 URL

    this.$router.replace({ query });

  }

}

在这个示例中，updateFilters 方法接收新的筛选条件，并将它们合并到当前的查询参数中。然后使用 router.replace 更新 URL，而不会在历史记录中添加新条目。

具体实现

将筛选条件转换为适合 URL 的格式，例如 JSON 字符串或简单的键值对。以下是一个更详细的实现：

methods: {

  applyFilters(filters) {

    const encodedFilters = JSON.stringify(filters);



    this.$router.replace({

      path: this.$route.path,

      query: { ...this.$route.query, filters: encodedFilters },

    });

  },



  getFiltersFromUrl() {

    const filters = this.$route.query.filters;

    return filters ? JSON.parse(filters) : {};

  }

}

在这个实现中，applyFilters 方法将筛选条件编码为 JSON 字符串，并将其存储在 URL 的查询参数中。getFiltersFromUrl 方法用于从 URL 中读取筛选条件，并将其解析回 JavaScript 对象。

注意事项

• 编码和解码：在将复杂对象存储到 URL 时，确保使用 encodeURIComponent 和 decodeURIComponent 来处理特殊字符。


• URL 长度限制：浏览器对 URL 长度有一定的限制，确保不要在 URL 中存储过多数据。


• 数据安全性：考虑 URL 中数据的敏感性，避免在 URL 中存储敏感信息。


• url重置：不要忘了在筛选条件重置时也将 url 重置，在取消筛选时同时去除 url 上的筛选。

一些其他的应用场景

小结

简单来说就是把你的 url 当成浏览器的 sessionstorage 了。其实这就是我上周收到的任务，当时我甚至纠结的是该用localStorage还是sessionStorage，忙活半天，不停转类型，然后在开周会我讲了下我的思路。我的tl便说出了我的问题，讲了更加详细的需求，我才开始尝试 router.replace ，又是一顿忙活。。

背景简介

我们日常开发中，经常会遇到点击一个按钮或者进行搜索时，请求接口的需求。

如果我们不做优化，连续点击按钮或者进行搜索，接口会重复请求。

首先，这会导致性能浪费！最重要的，如果接口响应比较慢，此时，我们在做其他操作会有一系列bug！

那么，我们该如何规避这种问题呢？

如何避免接口重复请求

防抖节流方式（不推荐）

使用防抖节流方式避免重复操作是前端的老传统了，不多介绍了

防抖实现

<template>

  <div>

    <button @click="debouncedFetchData">请求</button>

  </div>

</template>

<script setup>

import { ref } from 'vue';

import axios from 'axios';



const timeoutId = ref(null);



function debounce(fn, delay) {

  return function(...args) {

    if (timeoutId.value) clearTimeout(timeoutId.value);

    timeoutId.value = setTimeout(() => {

      fn(...args);

    }, delay);

  };

}



function fetchData() {

  axios.get('http://api/gcshi)  // 使用示例API

    .then(response => {

      console.log(response.data);

    })

}



const debouncedFetchData = debounce(fetchData, 300);

</script>

防抖（Debounce） ：

• 在setup函数中，定义了timeoutId用于存储定时器ID。


• debounce函数创建了一个闭包，清除之前的定时器并设置新的定时器，只有在延迟时间内没有新调用时才执行fetchData。


• debouncedFetchData是防抖后的函数，在按钮点击时调用。

节流实现

<template>

  <div>

    <button @click="throttledFetchData">请求</button>

  </div>

</template>

<script setup>

import { ref } from 'vue';

import axios from 'axios';



const lastCall = ref(0);



function throttle(fn, delay) {

  return function(...args) {

    const now = new Date().getTime();

    if (now - lastCall.value < delay) return;

    lastCall.value = now;

    fn(...args);

  };

}



function fetchData() {

  axios.get('http://api/gcshi')  //

    .then(response => {

      console.log(response.data);

    })

}



const throttledFetchData = throttle(fetchData, 1000);

</script>

节流（Throttle） ：

• 在setup函数中，定义了lastCall用于存储上次调用的时间戳。


• throttle函数创建了一个闭包，检查当前时间与上次调用时间的差值，只有大于设定的延迟时间时才执行fetchData。


• throttledFetchData是节流后的函数，在按钮点击时调用。

节流防抖这种方式感觉用在这里不是很丝滑，代码成本也比较高，因此，很不推荐！

请求锁定（加laoding状态）

请求锁定非常好理解，设置一个laoding状态，如果第一个接口处于laoding中，那么，我们不执行任何逻辑！

<template>

  <div>

    <button @click="fetchData">请求</button>

  </div>

</template>



<script setup>

import { ref } from 'vue';

import axios from 'axios';



const laoding = ref(false);



function fetchData() {

  // 接口请求中，直接返回，避免重复请求

  if(laoding.value) return

  laoding.value = true

  axios.get('http://api/gcshi')  //

    .then(response => {

      laoding.value = fasle

    })

}



const throttledFetchData = throttle(fetchData, 1000);

</script>

这种方式简单粗暴，十分好用！

但是也有弊端，比如我搜索A后，接口请求中；但我此时突然想搜B，就不会生效了，因为请求A还没响应！

因此，请求锁定这种方式无法取消原先的请求，只能等待一个请求执行完才能继续请求。

axios.CancelToken取消重复请求

基本用法

axios其实内置了一个取消重复请求的方法：axios.CancelToken，我们可以利用axios.CancelToken来取消重复的请求，爆好用！

首先，我们要知道，aixos有一个config的配置项，取消请求就是在这里面配置的。

<template>

  <div>

    <button @click="fetchData">请求</button>

  </div>

</template>



<script setup>

import { ref } from 'vue';

import axios from 'axios';



let cancelTokenSource = null;





function fetchData() {

  if (cancelTokenSource) {

    cancelTokenSource.cancel('取消上次请求');

    cancelTokenSource = null;

  }

  cancelTokenSource = axios.CancelToken.source();

  

  axios.get('http://api/gcshi',{cancelToken: cancelTokenSource.token})  //

    .then(response => {

      laoding.value = fasle

    })

}



</script>

我们测试下，如下图：可以看到，重复的请求会直接被终止掉！

CancelToken官网示例

官网使用方法传送门：http://www.axios-http.cn/docs/cancel…

const CancelToken = axios.CancelToken;

const source = CancelToken.source();



axios.get('/user/12345', {

  cancelToken: source.token

}).catch(function (thrown) {

  if (axios.isCancel(thrown)) {

    console.log('Request canceled', thrown.message);

  } else {

    // 处理错误

  }

});



axios.post('/user/12345', {

  name: 'new name'

}, {

  cancelToken: source.token

})



// 取消请求（message 参数是可选的）

source.cancel('Operation canceled by the user.');

也可以通过传递一个 executor 函数到 CancelToken 的构造函数来创建一个 cancel token：

const CancelToken = axios.CancelToken;

let cancel;



axios.get('/user/12345', {

  cancelToken: new CancelToken(function executor(c) {

    // executor 函数接收一个 cancel 函数作为参数

    cancel = c;

  })

});



// 取消请求

cancel();

注意: 可以使用同一个 cancel token 或 signal 取消多个请求。

在过渡期间，您可以使用这两种取消 API，即使是针对同一个请求：

const controller = new AbortController();



const CancelToken = axios.CancelToken;

const source = CancelToken.source();



axios.get('/user/12345', {

  cancelToken: source.token,

  signal: controller.signal

}).catch(function (thrown) {

  if (axios.isCancel(thrown)) {

    console.log('Request canceled', thrown.message);

  } else {

    // 处理错误

  }

});



axios.post('/user/12345', {

  name: 'new name'

}, {

  cancelToken: source.token

})



// 取消请求 (message 参数是可选的)

source.cancel('Operation canceled by the user.');

// 或

controller.abort(); // 不支持 message 参数

在 React Scan 的 github 有这么一张 gif 图片。当用户在页面上操作时，对应的组件会有一个闪烁，表示当前组件更新了。用这样的方式来排查程序的性能是一个很直观的方式。

根据 React Scan 自己的介绍，React Scan 可以 通过自动检测和突出显示导致性能问题的渲染。

Vue Scan

但是我主要使用 vue 来开发我的应用，看到这个功能非常眼馋，所以就动手自己做了一个 demo，目前也构建了一个 chrome 扩展，不过扩展仅支持识别 vue3 项目 现在已经支持 vue2 和 vue3 项目了。

项目地址：Vue Scan

简单介绍，Vue Scan 通过组件的 onBeforUpdate 钩子，当组件更新时，在组件对应位置绘制一个闪烁的边框。看起来的效果就像这样。

用法

我更推荐在开发环境使用它，Vue Scan 提供一个 vue plugin，允许你在 mount 之前注入相关的内容。

// vue3

import { createApp } from 'vue'

import VueScan, { type VueScanOptions } from 'z-vue-scan/src'



import App from './App.vue'



const app = createApp(App)

app.use<VueScanOptions>(VueScan, {})

app.mount('#app')

// vue2

import Vue from 'vue'

import VueScan, { type VueScanBaseOptions } from 'z-vue-scan/vue2'

import App from './App.vue'



Vue.use<VueScanBaseOptions>(VueScan, {})



new Vue({

  render: h => h(App),

}).$mount('#app')

浏览器扩展

如果你觉得看自己的网站没什么意思，那么我还构建了一个浏览器扩展，允许你注入相关方法到别人的 vue 程序中。

你可以在 Github Release 寻找一下最新版的安装包，然后解压安装到浏览器中。

安装完成后，你的扩展区域应该会多一个图标，点击之后会展开一个面板，允许你控制是否注入相关的内容。

这是如果你进入一个使用 vue 构建的网站，可以看控制台看到相关的信息，当你在页面交互时，页面应该也有相应的展示。

缺陷

就像 React Scan 的介绍中提到的，它能自动识别性能问题，单目前 Vue Scan 只是真实地反映组件的更新，并不会区分和识别此次更新是否有性能问题。

结语

通过观察网站交互时组件的更新状态，来尝试发现网站的性能问题，我觉得这是一个很好的方式。希望这个工具可以给大家带来一点乐趣和帮助。

// 解决白屏问题

app.whenReady().then(() => {

  // 将创建窗口的代码放在 `app.whenReady` 事件回调中，确保主进程启动完成后再创建窗口

  const mainWindow = new BrowserWindow({ show:false });

  // 加载页面

  mainWindow.loadURL('index.html');

  // 在 ready-to-show 事件中显示窗口

  mainWindow..once("ready-to-show", () => {

     mainWindow.show();

  });

});

app.whenReady().then(() => {

  // 将创建窗口的代码放在 `app.whenReady` 事件回调中，确保主进程启动完成后再创建窗口

  const mainWindow = new BrowserWindow({ show:false });

  // 加载页面

  mainWindow.loadURL(indexPage);

  // 通过 webContents 对应事件来处理窗口显示

  mainWindow.webContents.on("did-finish-load", () => {

     mainWindow.show();

  });

});

此方案与上述方案的唯一区别就是，第一个使用的是 BrowserWindow 的事件来处理，而此方案通过判断 BrowserWindow.webContents 这个对象，这个对象是 Electron 中用来渲染以及控制 Web 页面的，因此我们可以更直接的使用 did-finish-load 或者直接 dom-ready 这两个事件来判断页面是否加载完成，这两个 API 的含义相信前端开发者都不陌生，页面加载完成以及 DOM Ready 都是前端的概念，通过这种方式也是可以解决启动白屏的。

相关文档：BrowserWindow、webCotnents

最后解决完成的效果如下：

总结

从上图来看最终的效果还是不错的，当窗口出现的一瞬间页面就直接加载完成了，不过细心的小伙伴应该会发现，这个方案属于偷梁换柱，给用户的感觉是窗口出现的时候页面就有内容了，但是其实窗口没出现的时间是有空档期的，大概就是下面这个意思：

从上图以及实际效果来看，其实我们的启动时间是没有发生改变的，但是因为端上应用和我们纯 Web 应用的使用场景不同，它自身就是有应用的启动时间，所以空档期如果不长，这个方案的体验还是可以的。但是如果前面的空档期过长，那么可能就是 Electron 启动的时候加载资源过多造成的了，就需要其他优化方案了。由此也可以见得其实对于用户体验来说，可能我们的产品性能并不一定有提升，只要从场景出发从用户角度去考虑问题，其实就能提升整个应用的体验。

回归本篇文章，我们从问题入手分析了 Electron 启动白屏出现的原因并提供了对应的解决方案，笔者其实对 Electron 的开发也并不深入，只是解决了一个需求一个问题用文章做记录，欢迎大家交流心得，共同进步~

浏览器这种东西工程量很唬人，但是有了electron+webview我们就相当于只需要干组装的活就可以了，而且产品目标就是给自己玩，
成品的效果

😄本来想写成专业的技术博客，但是发现大家好像对那种密密麻麻，全是代码的技术博客不感兴趣，我就挑重点来写吧。

下载拦截功能

下载逻辑如果不做拦截处理的话，默认就是我们平常写web那种弹窗的方式，既然是浏览器肯定不能是那样的。
electron中可以监听BrowserWindow的页面下载事件，并把拿到的下载状态传给渲染线程，实现类似浏览器的下载器功能。

//这个global.WIN =   global.WIN = new BrowserWindow({ ...})

 global.WIN.webContents.session.on('will-download', (evt, item) => {

 //其他逻辑

       item.on('updated', (evt, state) => {

       //实时的下载进度传递给渲染线程

       })

 })

页面搜索功能

当时做这个功能的时候我就觉得完了，这个玩意看起来太麻烦了，还要有一个的功能这不是头皮发麻啊。

查资料和文档发现这个居然是webview内置的功能，瞬间压力小了很多，我们只需要出来ctrl+f的时候把搜索框弹出来这个UI就可以了，关键字变色和下一个都是内部已经实现好了的。

function toSearch() {

  let timer

  return () => {

    if (timer) {

      clearTimeout(timer)

    }



    timer = setTimeout(() => {

      if (keyword.value) {

        webviewRef.value.findInPage(keyword.value, { findNext: true })

      } else {

        webviewRef.value.stopFindInPage('clearSelection')

      }

    }, 200)

  }

}

  function closeSearch() {

  showSearch.value = false

  webviewRef.value.stopFindInPage('clearSelection')

}



function installFindPage(webview) {

  webviewRef.value = webview

  webviewRef.value.addEventListener('found-in-page', (e) => {

    current.value = e.result.activeMatchOrdinal

    total.value = e.result.matches

  })

}

当前标签页打开功能

就是因为chrome和edge这些浏览器每次使用的时候开非常多的标签，挤在一起，所以我想这个浏览器不能主动开标签，打开了一个标签后强制所有的标签都在当前标签覆盖。

app.on('web-contents-created', (event, contents) => {

  contents.setWindowOpenHandler((info) => {

    global.WIN?.webContents.send('webview-url-is-change')

    if (info.disposition === 'new-window') {

      return { action: 'allow' }

    } else {

      global.WIN?.webContents.send('webview-open-url', info.url)

      return { action: 'deny' }

    }

  })

})

渲染线程监听到webview-open-url后也就是tart="_blank"的情况，强制覆盖当前不打开新窗口

ipcRenderer.on('webview-open-url', (event, url) => {

  try {

    let reg = /http|https/g

    if (webviewRef.value && reg.test(url)) {

      webviewRef.value.src = url

    }

  } catch (err) {

    console.log(err)

  }

})

标签页切换功能

这里的切换是css的显示隐藏，借助了vue-router

这里我们看dom就能清晰的看出来。

地址栏功能

地址栏支持输入url直接访问链接、支持关键字直接打开收藏的网站、还支持关键字搜索。优先级1打开收藏的网页 2访问网站 3关键字搜索

function toSearch(keyword) {

    if (`${keyword}`.length === 0) {

      return false

    }

    // app搜索

    if (`${keyword}`.length < 20) {

      let item = null

      const list = [...deskList.value, ...ALL_DATA]

      for (let i = 0; i < list.length; i++) {

        if (

          list[i].title.toUpperCase().search(keyword.toUpperCase()) !== -1 &&

          list[i].type !== 'mini-component'

        ) {

          item = list[i]

          break

        }

      }

      if (item) {

        goApp(item)

        return false

      }

    }



    // 网页访问

    let url

    if (isUrl(keyword)) {

      if (!/^https?:\/\//i.test(keyword)) {

        url = 'http://' + keyword

      } else {

        url = keyword

      }

      goAppNewTab(url)

      return false

    } else {

      // 关键字搜索

      let searchEngine = localStorage.getItem('searchEngine')

      searchEngine = searchEngine || CONFIG.searchEngine

      url = searchEngine + keyword



      if (!router.hasRoute('search')) {

        router.addRoute({

          name: 'search',

          path: '/search',

          meta: {

            title: '搜索',

            color: 'var(--app-icon-bg)',

            icon: 'search.svg',

            size: 1

          },

          component: WebView

        })

        keepAliveInclude.value.push('search')

      }



      router.push({

        path: '/search',

        query: { url }

      })



      setTimeout(() => {

        Bus.$emit('toSearch', url)

      }, 20)

    }

  }

桌面图标任意位置拖动

这个问题困扰了我很久，因为它不像电脑桌面大小是固定的，浏览器可以全屏也可以小窗口，如果最开始是大窗口然后拖成小窗口，那么图标就看不到了。后来想到我干脆给个中间区域固定大小，就可以解决这个问题了。因为固定大小出来起来就方便多了。这个桌面是上下两层

//背景格子

    <div v-show="typeActive === 'me'" class="bg-boxs">

      <div

        v-for="(item, i) in 224"  //这里有点不讲究了直接写死了

        :key="item"

        class="bg-box"

        @dragenter="enter($event, { x: (i % 14) + 1, y: Math.floor(i / 14) + 1 })"

        @dragover="over($event)"

        @dragleave="leave($event)"

        @drop="drop($event)"

      ></div>

    </div>

 // 桌面层

 // ...

import { ref, computed } from 'vue'

import useDesk from '@/store/deskList'

import { storeToRefs } from 'pinia'



export default function useDrag() {

  const dragging = ref(null)

  const currentTarget = ref()

  const desk = useDesk()



  const { deskList } = storeToRefs(desk)

  const { setDeskList, updateDeskData } = desk



  function start(e, item) {

    e.target.classList.add('dragging')

    e.dataTransfer.effectAllowed = 'move'

    dragging.value = item

    currentTarget.value = e

    console.log('开始')

  }

  let timer2

  function end(e) {

    dragging.value = null

    e.target.classList.remove('dragging')

    setDeskList(deskList.value)



    if (timer2) {

      clearTimeout(timer2)

    }

    timer2 = setTimeout(() => {

      updateDeskData()

    }, 2000)

  }

  function over(e) {

    e.preventDefault()

  }



  let timer

  function enter(e, item) {

    e.dataTransfer.effectAllowed = 'move'

    if (timer) {

      clearTimeout(timer)

    }



    timer = setTimeout(() => {

      if (item?.x) {

        dragging.value.x = item.x

        dragging.value.y = item.y

      }

    }, 100)

  }

  function leave(e) {}



  function drop(e) {

    e.preventDefault()

  }



  return { start, end, over, enter, leave, drop }

}

东西太多了就先介绍这些了

安装包地址

github.com/jddk/aweb-b…

也可以到官网后aweb123.com 如何进入微软商店下载，mac版本因为文件大于100mb没有传上去所以暂时还用不了。

背景

前置文章：浏览器: cookie机制完全解析

在考虑token是否应该存储在cookie或localStorage中时，我们需要综合考虑安全性、便利性、两者的能力边界以及设计目的等因素。

安全性：

Cookies的优势:

Set-Cookie: token=abc123; HttpOnly;Secure;SameSite=Strict;Domain=example.com; Path=/

• HttpOnly：将 HttpOnly 属性设置为 true 可以防止 JavaScript 读取 cookie，从而有效防止 XSS（跨站脚本）攻击读取 token。这一特性使得 cookies 在敏感信息存储上更具安全性。


• Secure：设置 Secure 属性后，cookie 只会在 HTTPS 连接时发送，从而防止中间人攻击。这确保了即使有人截获请求，token 也不会被明文传输。


• SameSite：SameSite 属性减少了 CSRF（跨站请求伪造）攻击的风险，通过指示浏览器在同一站点请求时才发送 cookie。


• Domain 和 Path：这些属性限制了 cookie 的作用范围，例如仅在特定子域或者路径下生效，进一步提高安全性。

localStorage的缺点:

XSS 风险：localStorage 对 JavaScript 代码完全可见，这意味着如果应用存在 XSS 漏洞，攻击者即可轻易获取存储在 localStorage 中的 token。

能力层面

Cookies可以做到更前置更及时的页面访问控制，服务器可以在接收到页面请求时，立即通过读取 cookie 判断用户身份，返回响应的页面（例如重定向到登录页）。

// 示例：后端在接收到请求时可以立即判断 

if (!request.cookies.token) { 

response.redirect('/login'); 

}

和cookie相比 localStorage具有一定的滞后性，浏览器必须先加载 HTML 和 JavaScript资源，解析执行后 才能通过在localStorage取到数据后 经过ajax网络请求 发送给服务端判断用户身份，这种方式有滞后性，可能导致临时显示不正确的内容。

管理的便利性

Cookies是由服务端设置的 由浏览器自动管理生命周期的一种方式

服务器可以直接通过 HTTP 响应头设置 cookie，浏览器会自动在后续请求中携带，无需在客户端手动添加。减少了开发和维护负担，且降低了人为错误的风险。

localStorage需要客户端手动管理

使用 localStorage 需要在客户端代码管理 token，你得确保在每个请求中手动添加和删除token，增加了代码复杂度及出错的可能性。

设计目的：

HTTP协议是无状态的 一个用户第二次请求和一个新用户第一次请求 服务端是识别不出来的，cookie是为了让服务端记住客户端而被设计的。

Cookie 设计的初衷就是帮助服务器标识用户的会话状态（如登录状态），因而有很多内建的安全和管理机制，使其特别适合承载 token 等这些用户状态的信息。

localStorage 主要用于存储客户端关心的、较大体积的数据（如用户设置、首选项等），而不是设计来存储需要在每次请求时使用的认证信息。

总结

在大多数需要处理用户身份认证的应用中，将 token 存储在设置了合适属性的 cookie 中，不仅更安全，还更符合 cookie 的设计目的。

通过 HTTP 响应头由服务端设置并自动管理，极大简化了客户端代码，并确保在未经身份验证的情况下阻断对敏感页面的访问。

因此 我认为 在大多数情况下，将 token 存储在 cookies 中更为合理和安全。

补充

然鹅 现实的业务场景往往是复杂多变的 否则也不会有token应该存储在cookie还是localStorage上？这个问题出现了。

localStorage更具灵活性: 不同应用有不同的安全需求，有时 localStorage 可以提供更加灵活和精细化的控制。 开发者可以在 JavaScript 中手动管理 localStorage，包括在每次请求时显式设置认证信息。这种 灵活性 对于一些高级用例和性能优化场景可能非常有用。

所以一般推荐使用cookie 但是在合适的场景下使用localStorage完全没问题。

需求交代

最近我们项目组开发了个互联网采集的功能，也就是后端合理抓取了第三方的文章，数据结构大致如下：

<h1>前端人</h1>

<p>学好前端，走遍天下都不怕</p>

数据抓取到后，存储到数据库，然后前端请求接口获取到数据，直接在页面预览

<div v-html='articleContent'></div>

整个需求已经交代清楚

这个需求有点为难后端了

前天，客户说要新增一个文章的pdf导出功能，但就是这么一个合情合理的需求，却把后端为难住了，原因是部分数据采集过来的结构可能是这样的：

<h1>前端人</h1>

<p>学好前端，走遍天下都不怕</p>

<div>前端强，前端狂，交互特效我称王！</div

<p>JS 写得好，需求改不了！</p>

<p>React Vue 两手抓，高薪 offer 到你家！</p>

<p>浏览器里横着走， bug 见我都绕道！</p>

<p>Chrome 调试一声笑， IE 泪洒旧时光！</p>

<span>Git 提交不留情，版本回退我最行！

仔细的人就能发现问题了，很多html元素存在没有完整的闭合情况

但浏览器是强大的，丝毫不影响渲染效果，原来浏览器自动帮我们补全结构了

可后端处理这件事就没那么简单了，爬取到的数据也比我举例的要复杂的多，使用第三方插件将html转pdf时会识别标签异常等问题，因此程序会抛异常

来自后端的建议

苦逼的后端折腾了很久，还是没折腾出来，终于他发现前端页面有个右键打印的功能，也就是：

于是他说：浏览器这玩意整挺好啊，前端能不能研究研究，尝试从前端实现导出

那就研究研究

我印象中，确实有个叫vue-print-nb的前端插件，可以实现这个功能

但.......等等，这个插件仅仅是唤起打印的功能，我总不能真做成这样，让用户另存为pdf吧

于是，只能另辟蹊径，终于我找到了这么个仓库：github.com/burc-li/vue…

里面实现了dom元素导出pdf的功能

效果很不错，技术用到了jspdf、html2canvas这两个第三方库，代码十分简单

const downLoadPdfA4Single = () => {

  const pdfContaniner = document.querySelector('#pdfContaniner')

  html2canvas(pdfContaniner).then(canvas => {

    // 返回图片dataURL，参数：图片格式和清晰度(0-1)

    const pageData = canvas.toDataURL('image/jpeg', 1.0)



    // 方向纵向，尺寸ponits，纸张格式 a4 即 [595.28, 841.89]

    const A4Width = 595.28

    const A4Height = 841.89 // A4纸宽

    const pageHeight = A4Height >= A4Width * canvas.height / canvas.width ? A4Height :  A4Width * canvas.height / canvas.width

    const pdf = new jsPDF('portrait', 'pt', [A4Width, pageHeight])



    // addImage后两个参数控制添加图片的尺寸，此处将页面高度按照a4纸宽高比列进行压缩

    pdf.addImage(

      pageData,

      'JPEG',

      0,

      0,

      A4Width,

      A4Width * canvas.height / canvas.width,

    )

    pdf.save('下载一页PDF（A4纸）.pdf')

  })

}

技术流程大致就是：

• dom -> canvas


• canvas -> image


• image -> pdf

似乎一切都将水到渠成了

困在眼前的难题

这个技术栈，最核心的就是：必须要用到dom元素渲染

如果你尝试将打印的元素设置样式：

display: none;

或

visibility: hidden;

或

opacity: 0;

执行导出功能都将抛异常或者只能导出一个空白的pdf

这时候有人会问了：为什么要设置dom元素为不可见？

试想一下，你做了一个导出功能，总不能让客户必须先打开页面等html渲染完后，再导出吧？

客户的理想状态是：在列表的操作列里，有个导出按钮，点击就可以导出pdf了

何况还需要实现批量勾选导出的功能，总不能程序控制，导出一个pdf就open一个窗口渲染html吧

寻找新方法

此路不通，就只能重新寻找新的方向，不过也没费太多功夫，就找到了另外一个插件html2pdf.js解决了这事

这插件用起来也极其简单

npm install html2pdf.js

<template>

  <div class="container">

    <button @click="generatePDF">下载PDF</button>

  </div>

</template>

<script setup>

import html2pdf from 'html2pdf.js'



// 使用示例

let element = `

  <h1>前端人</h1>

  <p>学好前端，走遍天下都不怕</p>

  <div>前端强，前端狂，交互特效我称王！</div

  <p>JS 写得好，需求改不了！</p>

  <p>React Vue 两手抓，高薪 offer 到你家！</p>

  <p>浏览器里横着走， bug 见我都绕道！</p>

  <p>Chrome 调试一声笑， IE 泪洒旧时光！</p>

  <span>Git 提交不留情，版本回退我最行！

`;



function generatePDF() {

    // 配置选项

    const opt = {

      margin:       10,

      filename:     'hello_world.pdf',

      image:        { type: 'jpeg', quality: 0.98 },

      html2canvas:  { scale: 2 },

      jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }

    };

    // 生成PDF并导出

    html2pdf().from(element).set(opt).save();

}

</script>

功能正常，似乎一切都完美

问题没有想的那么简单

如果我们的html是纯文本元素，这程序跑起来没有任何问题，但我们抓取的信息都源于互联网，html结构怎么可能会这么简单？如果我们的html中包含图片信息，例如：

// 使用示例

let element = `

  <div>

    <img src='http://t13.baidu.com/it/u=2041049195,1001882902&fm=224&app=112&f=JPEG?w=500&h=500' style="width: 300px;" />

    <p>职业：前端</p>

    <p>技能：唱、跳、rap</p>

  </div>

`;

此时你会发现，导出来的pdf，图片占位处是个空白块

思考一下：类似案例中的图片加载方式，都是get方式的异步请求，而异步请求就会导致图片还没渲染完成，但导出的程序已经执行完成情况（最直接的观察方式就是，把这个元素放到浏览器上渲染，会发现图片也是过一会才慢慢加载完成的）

不过我不确定html2pdf.js这个插件是否会发起图片请求，但不管发不发起，导出的行为明显是在图片渲染前完成的，就导致了这个空白块的存在

问题分析完了，那就解决吧

既然图片异步加载不行，那就使用图片同步加载吧

不是吧，你问我：什么是图片同步加载？我也不晓得，这个词是我自己当下凭感觉造的，如有雷同，纯属巧合了

那我理解的图片同步加载是什么意思呢？简单来说，就是将图片转成Base64，因为这种方式，即使说无网的情况也能正常加载图片，因此我凭感觉断定，这就是图片同步加载

基于这个思路，我写了个demo

<template>

  <div class="container">

    <button @click="generatePDF">下载PDF</button>

  </div>

</template>

<script setup>

import html2pdf from 'html2pdf.js'



async function convertImagesToBase64(htmlString) {

  // 创建一个临时DOM元素来解析HTML

  const tempDiv = document.createElement('div');

  tempDiv.innerHTML = htmlString;



  // 获取所有图片元素

  const images = tempDiv.querySelectorAll('img');



  // 遍历每个图片并转换

  for (const img of images) {

    try {

      const base64 = await getBase64FromUrl(img.src);

      img.src = base64;

    } catch (error) {

      console.error(`无法转换图片 ${img.src}:`, error);

      // 保留原始URL如果转换失败

    }

  }



  // 返回转换后的HTML

  return tempDiv.innerHTML;

}



// 图片转base64

function getBase64FromUrl(url) {

  return new Promise((resolve, reject) => {

    const img = new Image();

    img.crossOrigin = 'Anonymous'; // 处理跨域问题



    img.onload = () => {

      const canvas = document.createElement('canvas');

      canvas.width = img.width;

      canvas.height = img.height;



      const ctx = canvas.getContext('2d');

      ctx.drawImage(img, 0, 0);



      // 获取Base64数据

      const dataURL = canvas.toDataURL('image/png');

      resolve(dataURL);

    };



    img.onerror = () => {

      reject(new Error('图片加载失败'));

    };



    img.src = url;

  });

}



// 使用示例

let element = `

  <div>

    <img src='http://t13.baidu.com/it/u=2041049195,1001882902&fm=224&app=112&f=JPEG?w=500&h=500' style="width: 300px;" />

    <p>职业：前端</p>

    <p>技能：唱、跳、rap</p>

  </div>

`;



function generatePDF() {

  convertImagesToBase64(element)

  .then(convertedHtml => {

    // 配置选项

    const opt = {

      margin:       10,

      filename:     '前端大法好.pdf',

      image:        { type: 'jpeg', quality: 0.98 },

      html2canvas:  { scale: 2 },

      jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }

    };



    // 生成PDF并导出

    html2pdf().from(convertedHtml).set(opt).save();

  })

  .catch(error => {

    console.error('转换过程中出错:', error);

  });

}

</script>

此时就大功告成啦！不过得提一句：图片的URL链接必须是同源或者允许跨越的，否则就会存在图片加载异常的问题

修复图片过大的问题

部分图片的宽度会过大，导致图片加载不全的问题，这在预览的情况下也存在

因为需要加上样式限定

img {

  max-width: 100%;

  max-height: 100%;

  vertical-align: middle;

  height: auto !important;

  width: auto !important;

  margin: 10px 0;

}

这样就正常啦

故此需要在导出pdf前，给元素添加一个图片的样式限定

element =`<style>

img {

  max-width: 100%;

  max-height: 100%;

  vertical-align: middle;

  height: auto !important;

  width: auto !important;

  margin: 10px 0;

}

</style>` + element;

完整代码：

<template>

  <div class="container">

    <button @click="generatePDF">下载PDF</button>

  </div>

</template>

<script setup>

import html2pdf from 'html2pdf.js'

async function convertImagesToBase64(htmlString) {

  // 创建一个临时DOM元素来解析HTML

  const tempDiv = document.createElement('div');

  tempDiv.innerHTML = htmlString;



  // 获取所有图片元素

  const images = tempDiv.querySelectorAll('img');



  // 遍历每个图片并转换

  for (const img of images) {

    try {

      const base64 = await getBase64FromUrl(img.src);

      img.src = base64;

    } catch (error) {

      console.error(`无法转换图片 ${img.src}:`, error);

      // 保留原始URL如果转换失败

    }

  }



  // 返回转换后的HTML

  return tempDiv.innerHTML;

}

// 图片转base64

function getBase64FromUrl(url) {

  return new Promise((resolve, reject) => {

    const img = new Image();

    img.crossOrigin = 'Anonymous'; // 处理跨域问题



    img.onload = () => {

      const canvas = document.createElement('canvas');

      canvas.width = img.width;

      canvas.height = img.height;



      const ctx = canvas.getContext('2d');

      ctx.drawImage(img, 0, 0);



      // 获取Base64数据

      const dataURL = canvas.toDataURL('image/png');

      resolve(dataURL);

    };



    img.onerror = () => {

      reject(new Error('图片加载失败'));

    };



    img.src = url;

  });

}



// 使用示例

let element = `

  <div>

    <img src='http://t13.baidu.com/it/u=2041049195,1001882902&fm=224&app=112&f=JPEG?w=500&h=500' style="width: 300px;" />

    <p>职业：前端</p>

    <p>技能：唱、跳、rap</p>

  </div>

`;



function generatePDF() {

  element =`<style>

  img {

      max-width: 100%;

      max-height: 100%;

      vertical-align: middle;

      height: auto !important;

      width: auto !important;

      margin: 10px 0;

    }

  </style>` + element;

  convertImagesToBase64(element)

  .then(convertedHtml => {

    // 配置选项

    const opt = {

      margin:       10,

      filename:     '前端大法好.pdf',

      image:        { type: 'jpeg', quality: 0.98 },

      html2canvas:  { scale: 2 },

      jsPDF:        { unit: 'mm', format: 'a4', orientation: 'portrait' }

    };



    // 生成PDF

    html2pdf().from(convertedHtml).set(opt).save();

  })

  .catch(error => {

    console.error('转换过程中出错:', error);

  });

}

</script>

后话

前天提的需求，昨天兜的底，今天写的文章记录

这种问题，理应该后端处理，但后端和我吐槽过他处理起来的困难与问题，寻求前端帮助时，我也会积极配合。可在现实中，我遇过很多后端，死活不愿意配合前端，例如日期格式化、数据id类型bigint过大不字符化返回给前端等等，主打一个本着前端可以做就前端做的原则，说实在：属实下头

前后端本应该就是相互打配合的关系，谁方便就行个方便，没必要僵持不下

今天的分享就到此结束，如果你对技术/行业交流有兴趣，欢迎添加howcoder微信，邀你进群交流

往期精彩

《你不了解的Grid布局》

《就你小子还不会 Grid布局是吧？》

《超硬核：从零到一部署指南》

《私活2年，我赚到了人生的第一桶金》

《接入AI后，开源项目瞬间有趣了😎》

《肝了两个月，我们无偿开源了》

《彻底不NG前端路由》

《vue项目部署自动检测更新》

《一个公告滚动播放功能引发的背后思考》

《前端值得学习的开源socket应用》

引言：每个前端的痛——node_modules删除噩梦

“npm install一时爽，删包火葬场。”这几乎是所有Node.js开发者都经历过的痛。尤其是当项目依赖复杂时，动辄几百MB甚至几个G的node_modules文件夹，手动删除时转圈圈的进度条简直让人抓狂。

如何高效解决这个问题？今天我们就来揭秘几种秒删node_modules的硬核技巧，让你从此告别龟速删除！

一、为什么手动删除node_modules这么慢？

node_modules的目录结构复杂，层级深、文件数量庞大（比如一个中型项目可能有上万个小文件）。手动删除时，操作系统需要逐个处理这些文件，导致效率极低，尤其是Windows系统表现更差。核心原因包括：

二、终极方案：用rimraf实现“秒删”

如果你还在手动拖拽删除，赶紧试试这个Node.js社区公认的神器——rimraf！它的原理是封装了rm -rf命令，通过减少系统调用和优化递归逻辑，速度提升可达10倍以上。

操作步骤

进阶用法

• 集成到npm脚本：在package.json中添加脚本，直接运行npm run clean：
  

  {
  
    "scripts": {
  
      "clean": "rimraf node_modules"
  
    }
  
  }
  
  

  
  


• 跨平台兼容：无论是Windows、Linux还是macOS，命令完全一致，团队协作无压力。

三、其他高效删除方案

如果不想安装额外工具，系统原生命令也能解决问题：

1. Windows用户：用命令行暴力删除

• CMD命令：
  

  rmdir /s /q node_modules
  
  

  
  /s表示递归删除，/q表示静默执行（不弹窗确认）。


• PowerShell（更快）：
  

  Remove-Item -Force -Recurse node_modules
  
  

  
  

2. Linux/macOS用户：终端直接起飞

rm -rf ./node_modules

四、避坑指南：删不干净怎么办？

有时即使删了node_modules，重新安装依赖仍会报错。此时需要彻底清理残留：

五、总结：选对工具，效率翻倍

推荐组合拳：日常使用rimraf+脚本，遇到权限问题时切换系统命令。

互动话题

你遇到过最离谱的node_modules有多大？评论区晒出你的经历！

前言

在信息时代，Web 页面成为我们与世界交互的重要窗口。如今，AI 程序的出现，为 Web 页面带来了新的变革。通过在 Web 页面上实现图片识别，我们即将迈入一个更加智能与便捷的时代。它将赋予网页全新的能力，使其能够理解图片的内容，为用户带来前所未有的体验。让我们一同踏上这充满无限可能的探索之旅。

具体步骤

html部分

我们可以试试通过输入：

main.container>（label.custom-file-upload>input#file-upload）+#image-container+p#status

再按tab键就可以快速生成以下的html框架。

<main class="container">

    <label for="file-upload" class="custom-file-upload">

        <input type="file" accept="image/*" id="file-upload">

        上传图片

    label>

    <div id="image-container">div>

    <p id="status">p>

main>

• 我们选择使用main标签而不是选择div,是因为main比div更具有语义化。main标签可以表示页面的主体内容。
• label标签用于将表单中的输入元素（如文本输入框、单选按钮、复选框等）与相关的文本描述关联起来。label标签通过将 for 属性值设置为输入元素的 id 属性值，建立与输入元素的关联。
• input的type属性值为file，表示是文件输入框；accept属性值为image/*，表示该文件输入框只接收图像类型的文件。

JavaScript部分

这个部分是这篇文章的重点。

第一部分

首先我们通过JavaScript在远程的transformers库中引入pipleline和env模块。我们需要禁止使用本地的模块，而使用远程的模块。

import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0"

env.allowLocalModels = false;

接下来我们要读取用户输入的文件，并且输出在页面上。我们可以这样做：

const fileUpload = document.getElementById('file-upload');

const imageContainer = document.getElementById('image-container')

//添加事件监听器来响应元素上的特定事件

//在fileUpload元素上添加一个change事件监听。当用户更改上传文件时，触发事件处理函数。

fileUpload.addEventListener('change', function (e) {

    //e是事件对象

    //e.target是触发事件的文件上传元素。

    //e.target.files[0]是获取选中的第一个文件

    const file = e.target.files[0];

    // 新建一个FileReader 对象用于读取文件（异步）

    //FileReader 是 JavaScript 中的一个对象，用于异步读取用户选择的文件或输入的内容。

    const reader = new FileReader();

    //reader.onload就相当于FileReader。onload;FileReader。onload是一个事件，在读取操作完成时触发function(e2)

    reader.onload = function (e2) {

        //创建一个新的html元素,也就是创建一个img标签

        const image = document.createElement('img');

        //将image的scr属性的url值改为e2.target.result

        image.src = e2.target.result;

        //将 image 元素添加作为子节点到 imageContainer 元素中

        imageContainer.appendChild(image)

        detect(image) // 启动AI任务。是功能模块化，要封装出去

    }

    //FileReader.readAsDataURL():开始读取指定的 Blob 中的内容。一旦完成，result 属性中将包含一个 data: URL 格式的 Base64 字符串以表示所读取文件的内容。

    //用于将指定的文件读取为 DataURL 格式的数据。

    reader.readAsDataURL(file)

})

我们先梳理一下我们的思路。

• 我们要对文件输入框里元素进行操作，所以我们要获取那个元素。我们可以创建一个fileUpload对象获取这个元素。
• 我们可以对fileUpload对象添加一个change事件监听。这个监听器实现当用户更改上传文件时，触发事件处理函数function（e）实现读取文件并且在页面输出文件的功能。
• function（e）的功能是用于异步读取用户选择的文件，并且在页面输出它。
  • 因为我们要读取整个图片文件，所以我们可以创建一个FileReader对象读取图片文件。在文件读取完成时我们可以用reader.onload实现在文件读取完毕时在id为mage-container的div标签内添加一个img标签输出图片。
    • 因为要输出图片就要先知道图片的URL，于是我们用e2.target.result获取图片的URL。
    • 因为要在div里添加一个img标签，于是创建一个imageContainer对象获取ID 为 image-container 的元素后用imageContainer.appendChild(image)实现将img标签添加为div的子标签。
• 我们用detect函数封装AI图片识别任务。

第二部分

接下来我们要完成ai任务———检测图片。

我们要通过ai进行对象检测并且获得检测到的元素的参数。

const status = document.getElementById('status');

const detect = async (image) => {

    //在id为status的p标签中添加“分析中...请稍等一会”的文本内容

    status.textContent = "分析中...请稍等一会"

    //object-detection是对象检查任务；Xenova/detr-resnet-50是指定用于对象检测的模型

    const detector = await pipeline("object-detection","Xenova/detr-resnet-50") // model 实例化了detector对象

    //使用检测器对象对指定的图像源进行检测，并传入了一些参数：

    const output = await detector(image.src, {

        threshold: 0.1,

        percentage: true

    })

    //forEach 方法用于遍历数组或类似数组的对象，并对每个元素执行指定的函数

    output.forEach(renderBox)

}

分析检测图片和获取检测元素的参数的思路。

• 首先，对图片进行分析需要一些时间，为了让用户知道分析需要时间并且让用户等待，我们可以用我们html中id="status"的p标签输入一段文字。
  • 首先我们用document.getElementById('status')获取id="status"的元素，并且用textContent方法动态添加id="status"的p标签的文本内容，然后输出在页面上。

detect异步函数

• 为了实现对象检测我们采用了async/await编写异步代码的方法。使用async关键字来标记一个函数为异步函数，并在其中使用await关键字来等待一个Promise对象的结果。await表达式会暂停当前async function的执行，等待Promise处理完成。
• 创建一个detector对象接收对象分析结果。再创建output对象接收对象分析结果的参数

output.forEach(renderBox)是让output的所有元素遍历进行渲染。

第三部分

我们用renderBox函数将框出图片中的物品的区域，并且在区域内输出ai识别得出的物品名称。

function renderBox({ box, label }) {

    console.log(box, label);

    const { xmax, xmin, ymax, ymin } = box

    //创建一个盒子

    const boxElement = document.createElement("div");

    //动态添加div的类名

    boxElement.className = "bounding-box"

    //通过执行 Object.assign(boxElement.style, {})，可以将一个空对象的属性合并到 boxElement.style 对象中

    //准备为 boxElement 设置新的样式属性

    Object.assign(boxElement.style, {

        borderColor: '#123123',

        borderWidth: '1px',

        borderStyle: 'solid',

        //最左侧

        left: 100 * xmin + '%',

        //最上侧

        top: 100 * ymin + '%',

        //宽度

        width: 100 * (xmax - xmin) + "%",

        //高度

        height: 100 * (ymax - ymin) + "%"

    })



    const labelElement = document.createElement('span');

    labelElement.textContent = label;

    labelElement.className = "bounding-box-label"

    labelElement.style.backgroundColor = '#000000'

    //在图片上增加的物品区域范围内添加物品的种类名称的文本内容

    boxElement.appendChild(labelElement);

    //在图片上增加物品的区域范围

    imageContainer.appendChild(boxElement);



}

分析renderBox函数思路。

• output元素中有许多参数，我们只需要label参数（检测得出的物品名称）和box参数（图片物品的区域参数，分别为xmax、xmin、ymax、ymin）。
• 实现框出图片中的物品的区域（每一个新建的div都表示一个图片物体）
  • 首先我们创建{ xmax, xmin, ymax, ymin }对象获取位置信息。
  • 通过document.createElement("div")创建一个新的div标签，再用className方法动态得给新建的div标签添加一个bounding-box类。
  • 通过
  • Object.assign(boxElement.style, { })对新建的div添加css样式，并且通过测量图片物体的最左侧和最上侧以及高度和宽度框出图片物体的区域。
  • 再通过imageContainer.appendChild(boxElement)代码添加到id="image-container"的div标签中。
• 实现在图片物体区域添加ai识别得出的label参数文本
  • 通过document.createElement('span')创建span标签，再用textContent方法将label内容动态输入新建的span标签
  • 再通过 boxElement.appendChild(labelElement)添加到刚刚创建的div标签中，也就是添加到图片物体区域中。

JavaScript部分总结

我们将图片识别功能分别分成三个部分实现。首先通过第一部分读取图片，通过第二部分进行ai分析，再通过第三部分输出结果。

我们要有灵活的封装思想。

css部分

该部分不做过度解释，直接上代码。

.container {

    margin: 40px auto;

    width: max(50vw, 400px);

    display: flex;

    flex-direction: column;

    align-items: center;

}



.custom-file-upload {

    display: flex;

    align-items: center;

    cursor: pointer;

    gap: 10px;

    border: 2px solid black;

    padding: 8px 16px;

    border-radius: 6px;

}



#file-upload {

    display: none;

}



#image-container {

    width: 100%;

    margin-top: 20px;

    position: relative;

}



#image-container>img {

    width: 100%;

}



.bounding-box {

    position: absolute;

    box-sizing: border-box;

}



.bounding-box-label {

    position: absolute;

    color: white;

    font-size: 12px;

}

效果展示

1. 选择图片上传

2. 选择图片后进行分析的过程

控制台输出的是e2.target.result的内容。

3. 分析结果

代码

html>

<html lang="en">



    <head>

        <meta charset="UTF-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <title>nlp之图片识别title>

        <style>

            .container {

                margin: 40px auto;

                width: max(50vw, 400px);

                display: flex;

                flex-direction: column;

                align-items: center;

            }



            .custom-file-upload {

                display: flex;

                align-items: center;

                cursor: pointer;

                gap: 10px;

                border: 2px solid black;

                padding: 8px 16px;

                border-radius: 6px;

            }



            #file-upload {

                display: none;

            }



            #image-container {

                width: 100%;

                margin-top: 20px;

                position: relative;

            }



            #image-container>img {

                width: 100%;

            }



            .bounding-box {

                position: absolute;

                box-sizing: border-box;

            }



            .bounding-box-label {

                position: absolute;

                color: white;

                font-size: 12px;

            }

        style>

    head>



    <body>

        

        <main class="container">

            

            <label for="file-upload" class="custom-file-upload">

                

                <input type="file" accept="image/*" id="file-upload">

                上传图片

            label>

            <div id="image-container">div>

            <p id="status">p>

        main>

        <script type="module">

            // transformers提供js库（https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0）  

            //从 https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0 导入 pipeline 和 env

            import { pipeline, env } from "https://cdn.jsdelivr.net/npm/@xenova/transformers@2.6.0"

            //禁止加载本地模型，加载远程模型

            env.allowLocalModels = false;

            //document.getElementById 是 js 中用于通过元素的 ID 来获取特定 HTML 元素的方法

            const fileUpload = document.getElementById('file-upload');

            const imageContainer = document.getElementById('image-container')

            //添加事件监听器来响应元素上的特定事件

            //在fileUpload元素上添加一个change事件监听。当用户更改上传文件时，触发事件处理函数。

            fileUpload.addEventListener('change', function (e) {

                //e是事件对象

                //e.target是触发事件的文件上传元素。

                //e.target.files[0]是获取选中的第一个文件

                const file = e.target.files[0];

                // 新建一个FileReader 对象用于读取文件（异步）

                //FileReader 是 JavaScript 中的一个对象，用于异步读取用户选择的文件或输入的内容。

                const reader = new FileReader();

                //reader.onload是一个事件，在读取操作完成时触发

                reader.onload = function (e2) {

                    //用createElement创建一个新的html元素

                    const image = document.createElement('img');

                    console.log(e2.target.result);

                    //将image的scr属性的url值改为e2.target.result

                    image.src = e2.target.result;

                    //将 image 元素添加作为子节点到 imageContainer 元素中

                    imageContainer.appendChild(image)

                    detect(image) // 启动AI任务  功能模块化，封装出去

                }

                //用于将指定的文件读取为 DataURL 格式的数据。

                reader.readAsDataURL(file)

            })





            //ai任务

            const status = document.getElementById('status');

            const detect = async (image) => {

                //在id为status的p标签中添加“分析中...请稍等一会”的文本内容

                status.textContent = "分析中...请稍等一会"

                //object-detection是对象检查任务；Xenova/detr-resnet-50是指定用于对象检测的模型

                const detector = await pipeline("object-detection","Xenova/detr-resnet-50") // model 实例化了detector对象

                //使用检测器对象对指定的图像源进行检测，并传入了一些参数：

                const output = await detector(image.src, {

                    threshold: 0.1,

                    percentage: true

                })

                //forEach 方法用于遍历数组或类似数组的对象，并对每个元素执行指定的函数

                output.forEach(renderBox)

            }

            

            



            //封装；渲染盒子

            function renderBox({ box, label }) {

                console.log(box, label);

                const { xmax, xmin, ymax, ymin } = box

                //创建一个盒子

                const boxElement = document.createElement("div");

                //动态添加div的类名

                boxElement.className = "bounding-box"

                //通过执行 Object.assign(boxElement.style, {})，可以将一个空对象的属性合并到 boxElement.style 对象中

                //准备为 boxElement 设置新的样式属性

                Object.assign(boxElement.style, {

                    borderColor: '#123123',

                    borderWidth: '1px',

                    borderStyle: 'solid',

                    //最左侧

                    left: 100 * xmin + '%',

                    //最上侧

                    top: 100 * ymin + '%',

                    //宽度

                    width: 100 * (xmax - xmin) + "%",

                    //高度

                    height: 100 * (ymax - ymin) + "%"

                })



                const labelElement = document.createElement('span');

                labelElement.textContent = label;

                labelElement.className = "bounding-box-label"

                labelElement.style.backgroundColor = '#000000'

                //在图片上增加的物品区域范围内添加物品的种类名称的文本内容

                boxElement.appendChild(labelElement);

                //在图片上增加物品的区域范围

                imageContainer.appendChild(boxElement);



            }

        script>

    body>



html>

结尾

整个代码还存在一些不足之处，还需要不断完善。希望我的文章可以帮助到你们。欢迎点赞评论加关注。

作者：睡着学
来源：juejin.cn/post/7359084330121789452

作者: clavin / VerteDinde

译者: ylduang

Electron 30.0.0 已发布！ 它包括对 Chromium 124.0.6367.49、V8 12.4 和 Node.js 20.11.1 的升级。

Electron 团队很高兴发布了 Electron 30.0.0 ！ 你可以通过 npm install electron@latest 或者从我们的发布网站下载它。继续阅读此版本的详细信息。

如果您有任何反馈，请在 Twitter 或 Mastodon 上与我们分享，或加入我们的 Discord 社区！ Bug 和功能请求可以在 Electron 的问题跟踪器中报告。

重要变化

重点内容

• Windows 现在支持 ASAR 完整性检查 (#40504)
  
  
  
  • 启用 ASAR 完整性的现有应用程序如果配置不正确，可能无法在 Windows 上工作。使用 Electron 打包工具的应用应该升级到 @electron/packager@18.3.1 或 @electron/forge@7.4.0。
  
  
  • 查看我们的 ASAR Integrity 教程 以获取更多信息。
  
  
  
  


• 添加了 WebContentsView 和 BaseWindow 主进程模块，废弃并替换 BrowserView (#35658)
  
  
  
  • BrowserView 现在是 WebContentsView 的一个壳，并且旧的实现已被移除。
  
  
  • 查看 我们的 Web Embeds 文档 以便将新的 WebContentsView API 和其他类似 API 进行比较。
  
  
  
  


• 实现了对 File System API 的支持 (#41827)

架构（Stack）更新

• Chromium 124.0.6367.49
  
  
  
  • Chrome 124 和 DevTools 124 中的新功能
  
  
  • Chrome 123 和 DevTools 123 中的新功能
  
  
  
  


• Node 20.11.1
  
  
  
  • Node 20.11.1 发布说明
  
  
  
  


• V8 12.4

Electron 30 将 Chromium 从 122.0.6261.39 升级到 124.0.6367.49, Node 从 20.9.0 升级到 20.11.1 以及 V8 从 12.2 升级到 12.4。

新特性

• 在 webviews 中添加了 transparent 网页偏好设置。(#40301)


• 在 webContents API 上添加了一个新的实例属性 navigationHistory，配合 navigationHistory.getEntryAtIndex 方法，使应用能够检索浏览历史中任何导航条目的 URL 和标题。(#41662)


• 新增了 BrowserWindow.isOccluded() 方法，允许应用检查窗口是否被遮挡。(#38982)


• 为工具进程中 net 模块发出的请求添加了代理配置支持。(#41417)


• 添加了对 navigator.serial 中的服务类 ID 请求的蓝牙端口的支持。(#41734)


• 添加了对 Node.js NODE_EXTRA_CA_CERTS 命令行标志的支持。(#41822)

重大更改

行为变更：跨源 iframe 现在使用 Permission Policy 来访问功能。

跨域 iframe 现在必须通过 allow 属性指定一个给定 iframe 可以访问的功能。

有关更多信息，请参见 文档。

移除：--disable-color-correct-rendering 命令行开关

此开关从未正式文档化，但无论如何这里都记录了它的移除。Chromium 本身现在对颜色空间有更好的支持，因此不再需要该标志。

行为变更：BrowserView.setAutoResize 在 macOS 上的行为

在 Electron 30 中，BrowserView 现在是围绕新的 WebContentsView API 的包装器。

以前，BrowserView API 的 setAutoResize 功能在 macOS 上由 autoresizing 支持，并且在 Windows 和 Linux 上由自定义算法支持。
对于简单的用例，比如使 BrowserView 填充整个窗口，在这两种方法的行为上是相同的。
然而，在更高级的情况下，BrowserViews 在 macOS 上的自动调整大小与在其他平台上的情况不同，因为 Windows 和 Linux 的自定义调整大小算法与 macOS 的自动调整大小 API 的行为并不完全匹配。
自动调整大小的行为现在在所有平台上都标准化了。

如果您的应用使用 BrowserView.setAutoResize 做的不仅仅是使 BrowserView 填满整个窗口，那么您可能已经有了自定义逻辑来处理 macOS 上的这种行为差异。
如果是这样，在 Electron 30 中不再需要这种逻辑，因为自动调整大小的行为是一致的。

移除：WebContents 上 context-menu 的 params.inputFormType 属性

WebContents 的 context-menu 事件中 params 对象的 inputFormType 属性已被移除。请改用新的 formControlType 属性。

移除：process.getIOCounters()

Chromium 已删除对这些信息的访问。

终止对 27.x.y 的支持

根据项目的支持政策，Electron 27.x.y 已经达到了支持的终点。我们鼓励开发者将应用程序升级到更新的 Electron 版本。

接下来

在短期内，您可以期待团队继续专注于跟上构成 Electron 的主要组件的开发，包括 Chromium、Node 和 V8。

您可以在此处找到 Electron 的公开时间表。

有关这些和未来变化的更多信息可在计划的突破性变化页面找到。

原文: Electron 30.0.0

Electron China 社区