How to fill a image with pattern (Fabric on shirt)
After looking at the website you give, the work is actually done in the backend instead of the frontend, which you can see from the following screenshot by Chrome:
About what backend does, it is nothing trivial, but some kind of algorithms in Computer Vision. If you do not have any knowledge about this field, you can first read a book like DIP (digital image processing). Then, you can read some papers about this field - the 3D texture synthesis and so on.
In short, it is no a trivial task that you can done with only JS or PHP. It is some algorithm works, not some programming language works.
P.S. Note that the direction and the wrinkle of the sleeves. This indicates that it is not simply copy and pasting some texture but rather complex algorithms about 3D shaping.
Good luck! :)
The hard part of this problem is getting the flat texture to wrap realistically around the contours of the not-flat shirt.
If you have a 3D model of the shirt, you could apply the texture in the 3d program of your choice and pre-process the results as an image (though it would still require some human attention, since the software isn't going to know for example that the texture should be rotated 90 degrees on the sleeves and collar). You'll also need to get a cleaner, seamless looping image of the texture than what you have. This appears to be the technique used by the example site you're looking at (they're actually using a stack of separately pre-rendered images of each of the shirt body, collar, sleeves, wrists, and buttons.)
Alternatively, you could hire a photographer to shoot each of your shirts in the same or similar pose, or hire a photoshop expert to do the job manually (this is how lots of catalog work is done.)
Simply filling the 2D area of the shirt with the texture in 2D, as in your attempt in <canvas>, will at best give you what looks like a flat piece of fabric cut out into a shirt-like shape. (There's nothing wrong with your code as it stands, it looks pixelated because you've given it a pixelated close-up texture of some fabric weave, not the plaid one shown in the question; but this technique can only give you paper-doll-like results, not the realistic shape you're looking for.)
If your starting point is an arbitrary 2d image of a 3d object, and a 2d image of a not-cleanly-looping texture, and you want to be able to automate estimating the 3d contours of the object based on its 2d representation and put those together on the fly in a realistic-looking way... well, in these days of machine learning and generative networks and so forth I'm not going to say that's an impossible task, but you'd probably be able to earn a PhD or two and start a successful SaaS if you solved it.
Can this be done with code? Absolutely.
Note that StackOverflow is not a coding house. We cannot write all this code for you, so the most that you should anticipate from these answers is a good start in the right direction.
You asked specifically about PHP and Javascript, but I'll throw HTML in there too. Let's look at each.
PHP
Do a quick search for 3D rendering in PHP. You won't find much because there isn't much. Server-side, there are far better languages, engines, and libraries that are designed specifically for 3D rendering.
Good alternatives to this are the languages that most game developers use for character modeling and rendering, which often include C++, Java, and Python (this one more so for logic and sometimes movement).
Javascript / jQuery
There are some decent javascript gaming engines out there that are able to handle 3D rendering. Note that these are often not meant for character modeling, as they expect most of that work to be done outside of the engine itself. Usually it's the library used in conjunction with WebGL. Here are two popular options:
https://www.babylonjs.com
https://threejs.org
HTML Canvas
It's possible here, but more code-intensive than using an engine that's designed for this work.
Here's an example of gaming with HTML: https://www.html5rocks.com/en/gaming/
Here's a cube in HTML5 canvas and WebGL: https://www.webcodegeeks.com/html5/html5-3d-canvas-tutorial/
Notice how much code and effort it takes to reproduce a simple cube. You'd need to account for the outside shape of the shirt, the curving of the fabric around those shapes (not just following the edges, but following realistic curves on parts like a bent arm), the impression of depth for parts of the shirt that are nearer and farther, and arcing of the fabric over wrinkles in the shirt. These details would require an IMMENSE amount of coding.
Is it worth your personal time and effort? Probably not.
- Return on investment for the time spent will be low. You'll spend a lot of time and resources getting this to work well.
- If it's done client-side (html or js), the included code and libraries would be more than clients should have to deal with downloading for anything less than gaming purposes.
- Running this code every time the fabric is switched would be laborious on the client-side.
- There are better options (ones that require less code and less processing power) that accomplish the same goal, such as how Bombay Shirts did it in the demo.
How does Bombay Shirts do it?
Below is a picture of the inspector opened, looking at the page's resources. In the red box on the left is a list of all the parts of the shirt. One is selected, which you see pictured on the right.
All the components of the shirt pictured are a filetype .pfs. PFS files are proprietary to PhotoFiltre Studio. PhotoFiltre Studio does image editing, but it also helps establish coordinates between elements.
There are about 11 separate images for cuffs, collars, buttons, pockets, and sleeves. What's interesting is that the components of the shirt are not 2D in appearance: parts that are not visible in the final render are visible here (e.g. the inside of the sleeve holes, as pictured above). This is because each component of the shirt was likely made with some 3D modeling software.
The real answer, however, is that Bombay Shirts didn't do this at all. If you look closely at where the images are coming from, it's a different server than theirs altogether:
<img class="img-fluid" src="https://bombayshirts.picarioxpo.com/collar_prince_charlie_v00.pfs?1=1&width=500&p.tn=BB001A.jpg&p.tr=True" alt="custom shirts" style="z-index: 2;">
These images are sourced at picarioxpo.com. This is the website of Picario, a company that specializes in creating customizable 3D product visualizations.
Solutions
Use Existing Solutions ← Choose this one!
Bombay Shirts could never have gone with the manual solutions below because there are too many fabrics and options-- it would have taken far too much time. Instead of reinventing the wheel, they opted for Picario's solution. You could do the same.
Benefits:
- no hardcore coding & knowledge
- no hardcore photoshopping & skill
- no hardcore 3D modeling & endless exporting
- no client-side processing power or bandwidth used
- fast/easy to implement
A couple options:
Picario XPO
iDesigniBuy Tailoring Software
3D Modeling Software
- Use a 3D modeling software to create a model of your product. If you have products with visible options, create one model for each component of the shirt. I recommend Blender because it's free, fairly high-quality, and well-documented. Maya is arguably better, but it isn't free.
- Save each fabric as a material/texture (I might have the terminology mixed up here), and apply each one to your model.
- Export the same front view of each model/component with the fabric applied (ex: https://blender.stackexchange.com/questions/39022/how-to-save-render).
- When the user requests your product from the browser, send each finalized component to the browser with the coordinates that tell it where to be to get it to line up with the other components.
Manually with Code/Photoshop
Most any other solution will take too much time/knowledge/money-- especially going the route of manually coding this functionality with algorithms. Photoshopping each image would be an intense amount of work with very inconsistent results (unless you're a photoshop genius).
Cris Luengo had a great question in the comments:
Why a separe image for each component of the shirt? Wouldn’t it be simpler to have a picture for each complete shirt? – Cris Luengo
Response to this:
@CrisLuengo great question. It's because some shirts have different pockets, buttons, collar styles, etc. You could either have a completely separate model for all of them, or use the same base models and just update components. It's the same reason why we make use of reusable code: lower maintenance.
I realize that this and the other answers are not what you had hoped for, but they are certainly sending the consistent message that PHP/JS/HTML are not the right tools for the job.