Comment remplir une image avec un motif (tissu sur la chemise)
Disons que j'ai une image!
Maintenant, je veux remplir cette image avec du tissu ci-dessous.
- Et mon image finale ressemblera à ceci
comment faire? Jusqu'à présent, j'ai pu changer la couleur de cette image mais je n'ai pas pu remplir le motif.
Existe-t-il un moyen de le faire avec PHP, jquery et javascript.
Merci d'avance!
Lien de démonstration: https://www.bombayshirts.com/custom/shirt
Je veux juste remplir un motif dans une chemise comme indiqué dans la démo ci-dessus.
Ce que j'avais essayé est le ci-dessous, mais en utilisant le code ci-dessous, je perds la forme de ma chemise et l'image sera pixellisée.
var img1 = new Image, img2 = new Image, cnt = 2,
canvas = document.getElementById("canvas"),
ctx = canvas.getContext("2d");
img1.onload = img2.onload = function() {if (!--cnt) go()};
img1.src = "https://www.itailor.co.uk/images/product/shirt/it1823-1.png"; // Shirt
img2.src = "https://i.stack.imgur.com/sQlu8.png"; // pattern
// MAIN CODE ---
function go() {
// create a pattern
ctx.fillStyle = ctx.createPattern(img2, "repeat");
// fill canvas with pattern
ctx.fillRect(0, 0, canvas.width, canvas.height);
// use blending mode multiply
ctx.globalCompositeOperation = "multiply";
// draw sofa on top
ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
// change composition mode
ctx.globalCompositeOperation = "destination-in";
// draw to cut-out sofa
ctx.drawImage(img1, 0, 0, img1.width*.5, img1.height*.5);
}<canvas id="canvas" width=500 height=300></canvas>Cela peut-il être fait avec du code? Absolument.
Notez que StackOverflow n'est pas une maison de codage. Nous ne pouvons pas écrire tout ce code pour vous, donc tout ce que vous devez attendre de ces réponses est un bon départ dans la bonne direction.
Vous avez posé des questions spécifiques sur PHP et Javascript, mais je vais aussi y ajouter du HTML. Examinons chacun.
[~ # ~] php [~ # ~]
Effectuez une recherche rapide pour le rendu 3D en PHP. Vous ne trouverez pas grand chose car il n'y en a pas beaucoup. Côté serveur, il existe loin de meilleurs langages, moteurs et bibliothèques spécialement conçus pour le rendu 3D.
Les bonnes alternatives à cela sont les langages que la plupart des développeurs de jeux utilisent pour la modélisation et le rendu des personnages, qui incluent souvent C++, Java et Python (celui-ci de plus pour la logique et parfois le mouvement).
Javascript/jQuery
Il existe des moteurs de jeu javascript décents qui sont capables de gérer le rendu 3D. Notez que ceux-ci ne sont souvent pas destinés à la modélisation de caractères, car ils s'attendent à ce que la plupart de ce travail soit effectué en dehors du moteur lui-même. Il s'agit généralement de la bibliothèque utilisée conjointement avec WebGL. Voici deux options populaires:
HTML Canvas
C'est possible ici, mais plus gourmand en code que d'utiliser un moteur conçu pour ce travail.
Voici un exemple de jeu avec HTML: https://www.html5rocks.com/en/gaming/
Voici un cube en toile HTML5 et WebGL: https://www.webcodegeeks.com/html5/html5-3d-canvas-tutorial/
Remarquez combien de code et d'efforts il faut pour reproduire un cube simple. Vous devez tenir compte de la forme extérieure de la chemise, de la courbure du tissu autour de ces formes (non seulement en suivant les bords, mais en suivant des courbes réalistes sur des parties comme un bras plié), l'impression de profondeur pour certaines parties de la chemise qui sont plus proches et plus loin, et un arc du tissu sur les rides de la chemise. Ces détails nécessiteraient une quantité IMMENSE de codage.
Cela vaut-il votre temps et vos efforts personnels? Probablement pas.
- Le retour sur investissement pour le temps passé sera faible. Vous passerez un beaucoup de temps et de ressources pour que cela fonctionne bien.
- Si cela se fait côté client (html ou js), le code et les bibliothèques inclus seraient plus que ce que les clients devraient avoir à faire avec le téléchargement pour rien de moins que pour les jeux.
- L'exécution de ce code à chaque changement de structure serait laborieuse du côté client.
- Il existe de meilleures options (celles qui nécessitent moins de code et moins de puissance de traitement) qui atteignent le même objectif, comme la façon dont Bombay Shirts l'a fait dans la démo.
Comment font les chemises Bombay?
Voici une photo de l'inspecteur ouvert, regardant les ressources de la page. Dans la case rouge à gauche se trouve une liste de toutes les parties de la chemise. Un est sélectionné, que vous voyez sur la photo de droite.
Tous les composants de la chemise illustrée sont un type de fichier . Pfs . Les fichiers PFS sont propriétaires de PhotoFiltre Studio . PhotoFiltre Studio fait l'édition d'images, mais il permet également d'établir des coordonnées entre les éléments.
Il y a environ 11 images distinctes pour les poignets, les cols, les boutons, les poches et les manches. Ce qui est intéressant est que les composants de la chemise ne sont pas en 2D: les parties qui ne sont pas visibles dans le rendu final sont visibles ici (par exemple, l'intérieur des trous de manche, comme illustré ci-dessus). En effet, chaque composant de la chemise a probablement été créé avec un logiciel de modélisation 3D.
La vraie réponse, cependant, est que les chemises Bombay ne l'ont pas fait du tout. Si vous regardez attentivement d'où viennent les images, c'est un serveur différent du leur:
<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;">
Ces images proviennent de picarioxpo.com. Il s'agit du site Web de Picario , une entreprise spécialisée dans la création de visualisations de produits 3D personnalisables.
Solutions
Utilisez les solutions existantes ← Choisissez celle-ci!
Bombay Shirts n'aurait jamais pu aller avec les solutions manuelles ci-dessous car il y a trop de tissus et d'options - cela aurait pris beaucoup trop de temps. Au lieu de réinventer la roue, ils ont opté pour la solution de Picario. Vous pourriez faire de même.
Avantages:
- pas de codage hardcore et de connaissances
- pas de photoshopping hardcore et de compétence
- pas de modélisation 3D hardcore et d'exportation sans fin
- pas de puissance de traitement côté client ni de bande passante utilisée
- rapide/facile à mettre en œuvre
Quelques options:
Logiciel de personnalisation iDesigniBuy
Logiciel de modélisation 3D
- Utilisez un logiciel de modélisation 3D pour créer un modèle de votre produit. Si vous avez des produits avec des options visibles, créez un modèle pour chaque composant de la chemise. Je recommande Blender car il est gratuit, de haute qualité et bien documenté. Maya est sans doute mieux, mais ce n'est pas gratuit.
- Enregistrez chaque tissu en tant que matériau/texture (je pourrais avoir la terminologie mélangée ici), et appliquez chacun à votre modèle.
- Exportez la vue de face identique de chaque modèle/composant avec le tissu appliqué (ex: https://blender.stackexchange.com/questions/39022/how-to-save- render ).
- Lorsque l'utilisateur demande votre produit au navigateur, envoyez chaque composant finalisé au navigateur avec les coordonnées qui lui indiquent où aller pour l'aligner sur les autres composants.
Manuellement avec Code/Photoshop
La plupart des autres solutions prendront trop de temps/connaissances/argent - en particulier pour suivre la voie du codage manuel de cette fonctionnalité avec des algorithmes. Le photoshopping de chaque image serait un travail intense avec très des résultats incohérents (sauf si vous êtes un génie de Photoshop).
Cris Luengo avait une grande question dans les commentaires:
Pourquoi une image séparée pour chaque composant de la chemise? Ne serait-il pas plus simple d'avoir une photo pour chaque chemise complète? - Cris Luengo
Réponse à ceci:
@CrisLuengo grande question. C'est parce que certaines chemises ont des poches, des boutons, des styles de col différents, etc. C'est la même raison pour laquelle nous utilisons du code réutilisable: maintenance réduite.
Je me rends compte que cela et les autres réponses ne sont pas ce que vous aviez espéré pour, mais ils envoient certainement le message cohérent que PHP/JS/HTML ne sont pas les bons outils pour le travail.
La partie difficile de ce problème consiste à enrouler la texture plate de manière réaliste autour des contours de la chemise non plate.
Si vous avez un modèle 3D de la chemise, vous pouvez appliquer la texture dans le programme 3D de votre choix et pré-traiter les résultats sous forme d'image (bien que cela nécessiterait encore une certaine attention humaine, car le logiciel ne va pas savoir par exemple, la texture doit être tournée de 90 degrés sur les manches et le col). Vous devrez également obtenir une image en boucle plus nette et transparente de la texture que celle que vous avez. Cela semble être la technique utilisée par l'exemple de site que vous consultez (ils utilisent en fait une pile d'images pré-rendues séparément de chacun du corps, du col, des manches, des poignets et des boutons de la chemise.)
Alternativement, vous pouvez engager un photographe pour photographier chacune de vos chemises dans la même pose ou une pose similaire, ou engager un expert Photoshop pour faire le travail manuellement (c'est ainsi que beaucoup de travail de catalogue est effectué.)
Remplissez simplement la zone 2D de la chemise avec la texture en 2D, comme dans votre tentative dans <canvas>, vous donnera au mieux ce qui ressemble à un morceau de tissu plat découpé en forme de chemise. (Il n'y a rien de mal avec votre code tel qu'il est, il a l'air pixélisé parce que vous lui avez donné une texture rapprochée pixélisée d'un tissage de tissu, pas celle à carreaux montrée dans la question; mais cette technique ne peut vous donner qu'une poupée en papier comme des résultats, pas la forme réaliste que vous recherchez.)
Si votre point de départ est une image 2D arbitraire d'un objet 3D et une image 2D d'une texture qui ne boucle pas proprement, et que vous souhaitez être en mesure d'automatiser l'estimation des contours 3D de l'objet en fonction de sa représentation 2D et de les mettre ensemble à la volée d'une manière réaliste ... eh bien, en ces jours d'apprentissage automatique et de réseaux génératifs et ainsi de suite, je ne vais pas dire que c'est une tâche impossible, mais vous feriez probablement être en mesure de gagner un doctorat ou deux et de commencer avec succès SaaS si vous l'avez résolu.
Après avoir regardé le site Web que vous donnez, le travail se fait en fait dans le backend au lieu du frontend, que vous pouvez voir sur la capture d'écran suivante de Chrome:
À propos de ce que fait le backend, ce n'est rien de trivial, mais une sorte d'algorithmes en vision par ordinateur. Si vous n'avez aucune connaissance dans ce domaine, vous pouvez d'abord lire un livre comme DIP (traitement d'image numérique). Ensuite, vous pouvez lire quelques articles sur ce domaine - la synthèse de texture 3D et ainsi de suite.
En bref, ce n'est pas une tâche triviale que vous pouvez faire avec seulement JS ou PHP. C'est certains travaux d'algorithme , pas certains travaux de langage de programmation .
P.S. A noter que le sens et le froissement des manches. Cela indique qu'il ne s'agit pas simplement de copier et de coller de la texture mais plutôt des algorithmes complexes sur la mise en forme 3D .
Bonne chance! :)
Votre image initiale est tridimensionnelle. Bien sûr, si vous utilisez un motif comme une simple image et que vous le répétez, la forme disparaîtra et vous obtiendrez une image en deux dimensions. Le motif que vous avez donné contient également une courbure, ce qui n'est pas utile. Vous devrez vous assurer que votre motif est quelque chose que vous voulez répéter, donc du haut du motif la suite valide est le bas du motif vers le haut et de la gauche du motif une suite valide est la droite du motif vers la gauche . Et vous devez vous assurer que les motifs que vous avez sont à deux dimensions, c'est-à-dire qu'une chemise étalée aurait ce motif.
Si vous commencez par ces conventions, votre premier jalon devrait être l'utilisation correcte du motif en 2D. Si vous avez atteint cet objectif, vous devrez gérer la transformation de base de la chemise, pour connaître la distance entre les yeux de l'utilisateur et les points imaginaires si la chemise a une forme donnée. Sur cette base, vous pourrez calculer les couleurs correctes de chaque pixel.
Vous aurez besoin de lire quelque chose sur les formules qui peuvent vous aider: Graphisme - équation pour convertir le point 3d en projection 2d