Voy a intentar escribir una extensión de Chrome, que traduzca un texto de una imagen en la página web y lo coloque sobre el texto original en la página. Habrá frases cortas y divididas (manga y comics). Usaré JS, también quiero usar tesseract.js como OCR. Entonces, ¿cuáles son las formas de colocar texto traducido sobre una imagen en coordenadas concretas? Soy un novato en JS, ¿tal vez solo muchos modales? O simplemente manipule el DOM del navegador, insertando temporalmente una imagen ya convertida. Pero muchos sitios no permiten el análisis de imágenes, ¿existe tal vez una forma de simplemente escanear la página del navegador? Solo dígale las herramientas con las que tal vez conozca, las revisaré.
No estoy seguro de si esto es exactamente lo que está buscando, pero podría ayudarlo a hacer preguntas de seguimiento adicionales.
Entiendo que desea colocar el texto sobre una imagen. Por lo general, en el navegador, el posicionamiento de los elementos se manipula con estilos CSS.
Puede establecer estilos de elementos desde JavaScript, pero debe aprender estilos CSS en general sin establecer los estilos en JS. Una vez que comprenda el CSS básico, la manipulación de estilos con JS puede ser una estrategia, pero en su lugar, generalmente sería mejor agregar un atributo de clase de elemento con JS y estilo usando esa clase y no manipular estilos directamente en el árbol DOM.
Este es un ejemplo de superposición de texto sobre una imagen en 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>Este ejemplo usa la etiqueta de estilo para simplificar, pero generalmente se prefiere CSS externo .