Baguette frame constructor, what options are there?

Question

css

At the entrance we have a piece of baguette, something like this

AND a photo uploaded by the user.
It is necessary to wrap this photo in a frame with a baguette.
What solutions can be used here? How would you do?
I liked the css border-image but it doesn't fit because the original frame image should already be glued there, but I have to work with what is, and there are only such rectangular pieces of baguettes.
An option was suggested to use canvas and somehow wrap the whole thing in a frame, but did not work with canvas, I have no idea if it can do this at all.
In general, I will be grateful for any answers in this direction.

Answer 1

1st
2nd

Answer 2

but there are only such rectangular pieces of baguettes

You can try to make seamless textures out of them and work with them further. To simulate a baguette, around the photo you need to make 4 div blocks with the skew property to simulate the bevel of the baguette https://www.w3schools.com/css/tryit.asp?filename=t... , set the direction of the background X or Y axis, and also scale the background itself, i.e. the baguette drawing, so that it does not look too large or small.

Answer 3

but there are only such rectangular pieces of baguettes

I'd glue them together in photoshop for a decent result and use border-image. Instead of raping the browser with transforms and extra blocks.