周报@2023-08-25

Published by powerfulyang on Aug 25, 2023

记录 tesseract.js 同时使用多种语言识别。用户体验相关：HTML 中双击元素导致其周围的元素被选中高亮。

with multiple languages, separate by '+'

https://github.com/naptha/tesseract.js/blob/master/docs/examples.md#with-multiple-languages-separate-by-

code:

js
1const { createWorker } = require('tesseract.js');
2
3const worker = await createWorker();
4
5(async () => {
6  await worker.loadLanguage('eng+chi_tra');
7  await worker.initialize('eng+chi_tra');
8  const { data: { text } } = await worker.recognize('https://tesseract.projectnaptha.com/img/eng_bw.png');
9  console.log(text);
10  await worker.terminate();
11})();

搞不懂这个蠢东西，这样是优先使用 eng 来识别 建议这样用:

ts
1import { LoggerService } from '@/common/logger/logger.service';
2import { Injectable } from '@nestjs/common';
3import type { OnModuleDestroy, OnModuleInit } from '@nestjs/common';
4import type Tesseract from 'tesseract.js';
5import type { ImageLike } from 'tesseract.js';
6import { createWorker } from 'tesseract.js';
7
8@Injectable()
9export class OCRService implements OnModuleInit, OnModuleDestroy {
10  private worker: Tesseract.Worker;
11
12  private engWorker: Tesseract.Worker;
13
14  private chsWorker: Tesseract.Worker;
15
16  constructor(private readonly logger: LoggerService) {
17    this.logger.setContext(OCRService.name);
18  }
19
20  async onModuleInit() {
21    this.worker = await createWorker();
22    this.engWorker = await createWorker();
23    this.chsWorker = await createWorker();
24    await this.worker.loadLanguage('chi_sim+eng');
25    await this.worker.initialize('chi_sim+eng');
26    await this.engWorker.loadLanguage('eng');
27    await this.engWorker.initialize('eng');
28    await this.chsWorker.loadLanguage('chi_sim');
29    await this.chsWorker.initialize('chi_sim');
30  }
31
32  async onModuleDestroy() {
33    await this.worker.terminate();
34    await this.engWorker.terminate();
35    await this.chsWorker.terminate();
36  }
37
38  async recognize(url: ImageLike) {
39    const result = await this.worker.detect(url);
40    const { script } = result.data;
41    if (script === 'Han') {
42      const res = await this.chsWorker.recognize(url);
43      return res.data;
44    }
45    const res = await this.engWorker.recognize(url);
46    return res.data;
47  }
48}

HTML 双击导致周围的元素被选中

在Web开发中，HTML元素的双击可能会导致周围的文本或元素被选中。这是由浏览器的默认行为引起的。下面的解释将探讨这一现象，并提供可能的解决方案。

  1. 现象分析： 在浏览器环境中，双击事件通常与文本选择行为关联。当用户双击某个元素时，浏览器可能会自动选择该元素的文本内容或其周围的元素。

  2. 解决方案： 为了避免这一不必要的选择行为，可以通过设置CSS属性或使用JavaScript来阻止这一默认行为。

    • 使用CSS：可以通过设置user-select属性来禁止文本选择：

      css
      1.no-select {
2  user-select: none; /* 标准语法 */
3  -webkit-user-select: none; /* Safari 和 Chrome */
4  -moz-user-select: none; /* Firefox */
5  -ms-user-select: none; /* IE 10+ */
6}

    • 使用JavaScript：也可以通过捕获dblclick事件并调用event.preventDefault()方法来阻止默认选择行为：

      javascript
      1element.addEventListener('dblclick', function(event) {
2  event.preventDefault();
3});

  3. 注意事项：

    • 在禁用双击选择时，务必考虑用户体验。在某些情况下，用户可能希望双击来选择文本。
    • 在不同的浏览器和操作系统中，这一行为可能略有不同。因此，在实际应用中，最好进行全面测试，确保跨浏览器的兼容性。

总之，HTML元素的双击导致周围元素被选中是浏览器的默认行为。通过合适的设计和编程技术，可以按需禁用或控制这一行为，从而提供更精确的用户交互体验。

<input type="color"> 原生的颜色选择器

<input type="color"> 是HTML5中的一个表单输入元素，用于允许用户通过图形化界面选择一个颜色。该元素生成一个颜色选择器小部件，在不同的浏览器和操作系统中其外观可能会有所不同。用户通过该颜色选择器可以选择特定的颜色值，这些值通常以#RRGGBB的十六进制格式返回。

在使用方面，这个元素通常用于个性化设置、图表可视化或任何需要用户界面与颜色交互的应用场景。例如，如果一个网页允许用户自定义主题颜色，<input type="color"> 元素将是一个合适的选择。

从技术角度讲，该元素可以通过JavaScript和CSS进一步自定义或样式化。以下是一个基础的HTML例子：

html
1<label for="favcolor">选择一个颜色：</label>
2<input type="color" id="favcolor" name="favcolor" value="#ff0000">

在这个例子中，value属性是可选的，用于设置初始颜色。如果不设置，默认通常是#000000（黑色）。

值得注意的是，尽管<input type="color">在现代浏览器中广泛支持，但它不是所有浏览器都完全支持的特性，特别是一些较旧的或者非主流的浏览器。

总体来说，<input type="color">提供了一种标准化但可自定义的方式，以便在web应用中方便地实现颜色选择功能。然而，如果有更复杂的需求，例如颜色空间的高级控制或自定义颜色选择器界面，开发者可能需要利用JavaScript库或自定义解决方案。