How to place a text over an image in browser in concrete place of an image
Question
I'm going to try writing a chrome extension, that translates a text from an image on the webpage, and places it over the original text on the page. There will be short and divided phrases (manga and comics). I'll be using JS, also want to use tesseract.js as an OCR. So, what is the ways to place translated text over an image in concrete coords. I'm a newbie to JS, maybe just a lot of modals? Or just manipulate browser DOM, temporarily inserting already converted image. But many sites does not allow parsing images, is there maybe also a way to just scan browser page? Just tell the tools for it you maybe known with, I'll check them.
1 answers
solution1
0 2022-02-05 14:12:40
I'm not sure if this is exactly what you are looking for, but it might help you ask additional followup questions.
I understand you want to position text over an image. Usually in the browser the positioning of the elements is manipulated with CSS styles.
You can set element styles from JavaScript, but you should learn CSS styling generally without setting the styles in JS. 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.
Here's an example of overlaying text over an image in 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>
This example uses the style tag for simplicity but usually, external CSS is preferred.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.