re: How to make Dynamic Text Overlays on Images VIEW POST

TOP OF THREAD FULL DISCUSSION
re: Would it be possible to identify the subset of pixels that represent the area under the text from the image data? Then we could reapply the algorit...
sarthology profile image Sarthak Sharma twitter logo github logo Author
Permalink Report Abuse

I think it can be. But it might take a lot of werid calculations to do something like that. But Iā€™m up for the challenge. šŸ˜Ž

THREAD
kenbellows profile image Ken Bellows twitter logo github logo
Permalink Report Abuse

It's not to bad as long as you know (or can get) three things:

  • the size the image will be when rendered
  • the pixel position of the text relative to the top-left corner of the image
  • the approximate height and width of the text when rendered

That last bit is the hard part, especially if there's any line breaks involved. But after you have those, it's basically this:

const start = { x: img left + text rel left, y: img top + text rel top }
const end = { x: img left + text rel left + text width, y: img top + text rel top + text height }
for (const x = start.x; x < end.x; x++) {
  for (const y = start.y; y < end.y; y++) {
    const p = (canvas.width * y + x) * 4
    const [r, g, b] =[].slice.call(data, p, p+3)
    // fancy logic of choice
  }
}
REPLY
code of conduct - report abuse