如何在浏览器中的图像上放置文本到图像的具体位置

Question

我将尝试编写一个 chrome 扩展，它从网页上的图像翻译文本，并将其放在页面上的原始文本上。 会有简短的和分开的短语（漫画和漫画）。 我将使用 JS，也想使用 tesseract.js 作为 OCR。 那么，以具体坐标将翻译文本放置在图像上的方法是什么。 我是 JS 的新手，也许只是很多模态？ 或者只是操作浏览器 DOM，暂时插入已经转换的图像。 但是很多网站不允许解析图片，有没有办法只扫描浏览器页面？ 只需告诉您可能知道的工具，我会检查它们。

Answer 1

我不确定这是否正是您正在寻找的，但它可能会帮助您提出其他后续问题。

我了解您想在图像上添加 position 文本。 通常在浏览器中元素的定位是用 CSS styles 来操作的。

您可以从 JavaScript 设置元素 styles，但您应该学习 CSS 样式，一般不设置 ZBC4156ZDB671D3253F3 中的 ZBC41560D023D3253F3 After you understand basic CSS manipulating styles with JS can be a strategy, but instead it would usually be better to add an element class attribute with JS and style using that class and not to manipulate styles directly in the DOM tree.

这是在 CSS 中的图像上覆盖文本的示例：

<html>
  <head>
    <style>
      .img-with-overlay {
        width: 250px;
        height: 250px;
        position: relative;
        background: url('https://source.unsplash.com/random');
        background-size: cover;
      }

      .img-with-overlay p {
        color: white;
        text-shadow: 0px 1px 3px #333;
        text-align: center;
        position: absolute;
        top: calc(50% - 50px);
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 2em;
      }
    </style>
  </head>
  <body>
    <div class="img-with-overlay">
      <p>Hello World</p>
    </div>
  </body>
</html>

此示例为简单起见使用样式标签，但通常首选外部 CSS 。

如何在浏览器中的图像上放置文本到图像的具体位置

问题描述

1 个解决方案

解决方案1
0 2022-02-05 14:12:40

如何在浏览器中的图像上放置文本到图像的具体位置

问题描述

1 个解决方案

解决方案1 0 2022-02-05 14:12:40

解决方案1
0 2022-02-05 14:12:40