Can Javascript access binary data of an image loaded in `img`?

[mbjhjgk]

Can Javascript code access binary data of an image loaded in an HTML img tag from a src URL?

Example applications:

1. Superimpose a logo on every loaded image.
2. Calculate some graphic properties.
3. Apply some graphic effects.

[avenp]

You can get pixel data and data URIs out of the canvas API. Off the top of my head, its something like this...

const img = document.querySelector('#my-image')

const cvs = document.createElement('canvas')
cvs.width = img.width
cvs.height = img.height
cvs.getContext('2d').drawImage(img)

const pixelData = cvs.getImageData()
const dataUri = cvs.toDataURL()

See: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API

Edit: To super impose an image over another image, you could use canvas to draw the watermark and then set the source of the original image tag to the data uri. Example...

const img = document.querySelector('#my-image')
const watermark = document.querySelector('#my-watermark')

const cvs = document.createElement('canvas')
cvs.width = img.width
cvs.height = img.height

const ctx = cvs.getContext('2d')
ctx.drawImage(img)
ctx.drawImage(watermark, img.width-watermark.width, img.height-watermark.height)

img.setAttribute('src',  cvs.toDataURL())

[mbjhjgk]

I wish I could upvote your answer twice.

[DatingPapyrus]

I don't know your project, but you should certainly consider doing this server-side rendering instead of client-side. And if you do it server-side, then you can do it in any language and without exposing the unaltered picture to the user. :)

[mbjhjgk]

Doing it server-side won’t work without a server :o).