FR2983596A1

FR2983596A1 - Method for simultaneously displaying web page with partially transparent images superimposed on background image e.g. video, involves adapting size of images to size of background image, and transmitting images to web browser

Info

Publication number: FR2983596A1
Application number: FR1161115A
Authority: FR
Inventors: Marco Moscardini
Original assignee: EVIOO
Current assignee: GROUPE SCHERTZ, FR
Priority date: 2011-12-02
Filing date: 2011-12-02
Publication date: 2013-06-07
Anticipated expiration: 2031-12-02
Also published as: FR2983596B1

Abstract

The method involves transmitting a still or moving background image e.g. video, to a server, and processing and transmitting the background image to a web browser on a client system. A request for identifying images to be displayed partly transparent is transmitted by the web browser to the server, and the size of the images is adapted to the size of the background image. The images are transmitted to the web browser, and the images are superimposed on the partially transparent background image while displaying the superimposed images on a display device. An independent claim is also included for a client-server computer system for simultaneously displaying a web page with partially transparent images superimposed on a still or moving background image on a display device.

Description

PROCEDE ET SYSTEME POUR AFFICHER SIMULTANEMENT UNE PAGE WEB AVEC UNE PLURALITE D'IMAGES SUPERPOSEES A UNE IMAGE DE FOND DOMAINE DE L'INVENTION La présente invention concerne un procédé et un système informatique pour afficher simultanément sur un dispositif d'affichage une page Web avec une pluralité d'images superposées à une image de fond, fixe ou animée. ARRIERE PLAN DE L'INVENTION Les plateformes de commerce électronique proposent généralement des catalogues de produits affichés sur une ou plusieurs pages Web se présentant sous la forme d'une série d'icônes contenant chacune une image d'un produit, potentiellement classées par marque ou selon une typologie particulière du produit concerné. A partir de la vision d'ensemble du catalogue ou d'une subdivision de celui-ci, l'acheteur peut sélectionner une icône pour accéder à davantage de détails sur le produit (images sous différents angles, description technique, prix, disponibilité, etc.). La vente à distance par le biais de plateformes de commerce électronique prend de plus en plus d'importance dans les actes d'achat des consommateurs, y compris pour des produits à porter (lunettes, vêtements, chaussures, etc.), pour lesquels un essayage est souvent souhaitable. Il est en effet préférable, avant d'acheter un tel produit, s'il est bien adapté à la morphologie ou à la physionomie de l'acheteur, et, le cas échéant, de pouvoir comparer différents produits afin de choisir le plus seyant. Certaines plateformes de commerce électronique permettent de compenser l'absence d'accès physique aux produits proposés en donnant la possibilité à l'acheteur de se photographier au moyen d'une cybercaméra, de télécharger la photographie et d'y superposer une image de l'un des produits du catalogue. Par exemple, s'agissant de vente à distance de lunettes, l'acheteur peut photographier son visage et essayer virtuellement une monture particulière en superposant la photographie de la monture proposée sur le site à la photographie qu'il a prise. Il peut ainsi vérifier si la monture convient à sa physionomie. Cependant, au cours ce type d'essayage, l'acheteur souhaite généralement essayer successivement différentes montures pour pouvoir les comparer. Or, avec les systèmes existants, il n'est pas possible de visualiser en même temps la photographie avec différents produits du catalogue. TECHNICAL FIELD AND SYSTEM FOR SIMULTANEOUSLY DISPLAYING A WEB PAGE WITH A PLURALITY OF IMAGES SUPERIMPOSED TO A BACKGROUND IMAGE FIELD OF THE INVENTION The present invention relates to a method and a computer system for simultaneously displaying on a display device a Web page with a plurality of images superimposed on a background image, fixed or animated. BACKGROUND OF THE INVENTION Electronic commerce platforms generally provide catalogs of products displayed on one or more web pages in the form of a series of icons each containing an image of a product, potentially classified by brand or according to a particular typology of the product concerned. From the overview of the catalog or a subdivision of it, the buyer can select an icon to access more details about the product (images from different angles, technical description, price, availability, etc. .). Distance selling via e-commerce platforms is becoming more and more important in consumer purchasing acts, including for products to be worn (glasses, clothing, shoes, etc.), for which a fitting is often desirable. It is indeed preferable, before buying such a product, if it is well adapted to the morphology or the physiognomy of the buyer, and, if necessary, to be able to compare different products in order to choose the most seyant. Some e-commerce platforms make it possible to compensate for the lack of physical access to the products on offer by giving the buyer the opportunity to photograph themselves using a webcam, to download the photograph and to superimpose an image of it. one of the products in the catalog. For example, when it comes to distance selling of glasses, the buyer can photograph his face and virtually try on a particular frame by superimposing the photograph of the frame proposed on the site to the photograph he has taken. He can thus check if the mount suits his face. However, during this type of fitting, the buyer generally wishes to successively try different frames to be able to compare them. However, with existing systems, it is not possible to view the photograph at the same time with different products in the catalog.

En effet, en raison de la quantité d'informations à traiter, et compte tenu du fait que plusieurs utilisateurs cherchent simultanément à essayer les produits, la plateforme Web risquerait d'être saturée, ce qui compromettrait sa stabilité. Outre cet exemple, il existe de manière plus générale un besoin pour personnaliser l'affichage d'un catalogue comprenant des photographies d'accessoires portables par un utilisateur, de mobilier ou d'éléments de décoration intérieure ou extérieure, ou encore d'accessoires d'un véhicule, sur une image fixe ou animée représentant respectivement l'utilisateur, une pièce d'une habitation, ou un véhicule, de manière à permettre à l'utilisateur de déterminer, parmi les produits présentés sur le catalogue, celui qui lui convient le mieux. Indeed, because of the amount of information to be processed, and considering that several users are simultaneously trying to try products, the web platform may be saturated, which would compromise its stability. In addition to this example, there is more generally a need to customize the display of a catalog comprising photographs of portable accessories by a user, furniture or interior or exterior decorative elements, or accessories of a vehicle, in a still or animated image respectively representing the user, a part of a dwelling, or a vehicle, so as to enable the user to determine which of the products presented in the catalog is suitable for him the best.

Un but de l'invention est donc de concevoir une architecture informatique qui permette d'afficher simultanément plusieurs images d'un catalogue sur une page Web en les superposant à une image de fond fixe ou animée telle qu'une photographie, une vidéo, un dessin, etc. Cette architecture informatique doit tenir compte du fait que plusieurs utilisateurs (acheteurs potentiels) peuvent se trouver en même temps sur le site qui l'héberge et que chacun d'eux effectue un essayage virtuel d'une série de produits. Un autre but de l'invention est de procurer une architecture qui soit la plus simple possible à utiliser pour les clients, et qui nécessite le moins d'opérations possible de leur part. An object of the invention is therefore to design a computer architecture that makes it possible to simultaneously display several images of a catalog on a web page by superimposing them on a fixed or animated background image such as a photograph, a video, a video drawing, etc. This IT architecture must take into account the fact that several users (potential buyers) can be at the same time on the site that hosts it and that each of them performs a virtual fitting of a series of products. Another object of the invention is to provide an architecture that is the simplest possible to use for customers, and that requires the least possible operations on their part.

BREVE DESCRIPTION DE L'INVENTION Conformément à l'invention, il est proposé un procédé mis en oeuvre dans un système informatique client-serveur pour afficher simultanément sur un dispositif d'affichage une page Web avec une pluralité d'images partiellement transparentes superposées à une image de fond fixe ou animée, ledit procédé étant caractérisé en ce qu'il comprend les étapes suivantes : - la transmission à un serveur, par un plugiciel de poste client, d'une image fixe ou animée destinée à devenir ladite image de fond ; - le traitement, par une bibliothèque graphique communiquant avec ledit serveur, de ladite image, ledit traitement comprenant une vérification de la qualité de l'image, - la transmission par ledit serveur de l'image de fond traitée à un navigateur Web exécuté sur le poste client, - l'envoi, par ledit navigateur Web du poste client vers le serveur, d'une requête déterminant la pluralité d'images partiellement transparentes à afficher, - l'adaptation, par la bibliothèque graphique, de la dimension de la pluralité d'images partiellement transparentes à la dimension à de l'image de fond, - la transmission par ledit serveur au navigateur Web du poste client de ladite pluralité d'images, - la superposition, par ledit navigateur Web du poste client, de chacune de la pluralité d'images partiellement transparentes sur ladite image de fond et l'affichage simultané desdites images superposées sur le dispositif d'affichage. Par « image animée » on entend dans le présent texte un flot d'images tel qu'une vidéo ou un dessin animé. Un avantage de l'invention est de permettre rapidement à un utilisateur, sans risque pour la stabilité de la plateforme hébergée par le serveur et quel que soit le nombre 10 d'utilisateurs simultanés, d'accéder à un rendu visuel simultané à l'ensemble des combinaisons possibles de l'image de fond et de la pluralité d'images superposées. Ainsi, l'utilisateur est en mesure de faire un choix beaucoup plus facile et rapide, ne nécessitant pas de sa part d'effort de mémorisation des différentes combinaisons possibles. Selon un mode de réalisation avantageux de l'invention, ladite image de fond est une 15 photographie d'un utilisateur, ladite photographie étant par exemple prise par une cybercaméra connectée au poste client. Selon une forme d'exécution particulière de l'invention, les images partiellement transparentes sont des images de produits destinés à être portés par l'utilisateur. Par exemple, lesdits produits sont des montures de lunettes. 20 Lesdites images partiellement transparentes peuvent être stockées dans une base de données accessible à partir du serveur. Le procédé peut comprendre une étape de modification, par l'utilisateur, de l'image de fond traitée et une étape de transmission, par le navigateur Web client, de l'image modifiée au serveur. 25 Le cas échéant, le procédé peut comprendre le stockage de ladite image modifiée dans une mémoire du serveur. Par ailleurs, le procédé peut comprendre une étape d'envoi au serveur à partir du poste client, par le navigateur Web, d'une requête de suppression de l'image de fond et, en réponse à ladite requête, une étape de suppression par le serveur de ladite image de fond. 30 Selon une autre forme d'exécution de l'invention, l'image de fond est une vidéo. Un autre objet concerne un système informatique client-serveur pour afficher simultanément sur un dispositif d'affichage une page Web avec une pluralité d'images partiellement transparentes superposées à une image de fond fixe ou animée, ledit système étant caractérisé en ce qu'il comprend : - du côté d'un poste client : un navigateur Web adapté pour envoyer des requêtes au serveur et analyser des réponses du serveur, et un plugiciel adapté pour envoyer au serveur une image fixe ou animée destinée à devenir l'image de fond ; - du côté d'un serveur : une base de données pour stocker ladite pluralité d'images partiellement transparentes et une bibliothèque graphique pour traiter l'image fixe ou animée transmise par le plugiciel. DESCRIPTION DETAILLEE DE L'INVENTION D'une manière générale, le système est basé sur une architecture informatique client- serveur (HTTP/S), qui s'appuie d'une part sur un serveur comprenant un service TCP et d'autre part sur un poste client comprenant un dispositif d'affichage (par exemple un écran d'ordinateur) et sur lequel est exécuté un navigateur Web qui est adapté pour envoyer des requêtes au serveur et analyser les réponses du serveur. Le système utilise autant que possible des technologies libres. BRIEF DESCRIPTION OF THE INVENTION In accordance with the invention, there is provided a method implemented in a client-server computer system for simultaneously displaying on a display device a Web page with a plurality of partially transparent images superimposed on a fixed or animated background image, said method being characterized in that it comprises the following steps: the transmission to a server, by a client station plug-in, of a still or animated image intended to become said background image; processing, by a graphic library communicating with said server, said image, said processing comprising a verification of the quality of the image, the transmission by said server of the processed background image to a Web browser executed on the client station, - sending, by said web browser from the client station to the server, a request determining the plurality of partially transparent images to be displayed, - the adaptation, by the graphic library, of the dimension of the plurality partially transparent images to the dimension to the background image, - the transmission by said server to the web browser of the client station of said plurality of images, - the superposition, by said web browser of the client station, of each of the plurality of partially transparent images on said background image and the simultaneous display of said superimposed images on the display device. By "animated image" is meant in this text a stream of images such as a video or cartoon. An advantage of the invention is to quickly enable a user, without risk to the stability of the platform hosted by the server and regardless of the number of simultaneous users, to access a simultaneous visual rendering to all possible combinations of the background image and the plurality of superimposed images. Thus, the user is able to make a much easier and faster choice, not requiring his effort to memorize the various possible combinations. According to an advantageous embodiment of the invention, said background image is a photograph of a user, said photograph being for example taken by a webcam connected to the client station. According to one particular embodiment of the invention, the partially transparent images are images of products intended to be worn by the user. For example, said products are eyeglass frames. Said partially transparent images may be stored in a database accessible from the server. The method may include a step of modifying, by the user, the processed background image and a step of transmitting, by the client web browser, the modified image to the server. If necessary, the method may include storing said modified image in a memory of the server. Furthermore, the method may comprise a step of sending to the server from the client station, by the web browser, a request for deletion of the background image and, in response to said request, a step of deletion by the server of said background image. According to another embodiment of the invention, the background image is a video. Another object relates to a client-server computer system for simultaneously displaying on a display device a Web page with a plurality of partially transparent images superimposed on a fixed or animated background image, said system being characterized in that it comprises : - on the side of a client station: a web browser adapted to send requests to the server and analyze responses from the server, and a plug-in adapted to send the server a still or animated image intended to become the background image; - On the side of a server: a database for storing said plurality of partially transparent images and a graphic library for processing the still or animated image transmitted by the plug-in. DETAILED DESCRIPTION OF THE INVENTION In general, the system is based on a client-server computer architecture (HTTP / S), which relies on a server comprising a TCP service and on the other hand a client station comprising a display device (for example a computer screen) and on which a web browser is executed which is adapted to send requests to the server and analyze the responses of the server. The system uses free technologies as much as possible.

Par exemple, le serveur est un serveur HTTP/1.1 de type Apache et le navigateur Web client est du type Firefox, Chrome, Safari, voire MicrosoftlE9. Le langage utilisé côté serveur est avantageusement un langage PHP. Les technologies Web 2.0 permettent de développer des applications capables d'échanger de manière dynamique avec un serveur. For example, the server is an Apache HTTP / 1.1 server and the client web browser is of the type Firefox, Chrome, Safari, or even MicrosoftlE9. The language used on the server side is advantageously a PHP language. Web 2.0 technologies make it possible to develop applications capable of dynamically interacting with a server.

On pourra citer parmi celles-ci JSON, XML, Adobe Flash, Java, CSS3 et SVG. La page Web est générée de préférence en format XHTML. Pour décrire la structure de la page Web, on utilise de préférence des feuilles de style en cascade du type CSS3. Le navigateur Web exécuté sur le poste client est choisi parmi les nombreux navigateurs qui permettent à un utilisateur d'accéder à des pages Web sur Internet. Le navigateur Web exécuté sur le poste client est de préférence capable de prendre en compte les feuilles de style en cascade CSS3, d'analyser le Javascript 1.2 et d'afficher des pages en format XHTML et HTML5. A chaque fois que l'utilisateur interagit avec la page Web, le navigateur Web exécuté sur le poste client requiert, de la part du serveur, la partie requise de l'application, qui peut comprendre des données ou du code exécutable. Cette communication est invisible de l'utilisateur, étant gérée directement par le navigateur Web exécuté sur le poste client. On décrit, dans cet exemple non limitatif, un mode de réalisation préféré de l'invention dans lequel la pluralité d'images à afficher est une série de photographies de montures de lunettes d'un catalogue de commerce en ligne, et dans lequel l'image de fond est une photographie d'un acheteur potentiel, qui est typiquement l'utilisateur du poste client. Afin d'être superposées à l'image de fond sans masquer totalement celle-ci, les images à afficher sont partiellement transparentes. These include JSON, XML, Adobe Flash, Java, CSS3 and SVG. The web page is preferably generated in XHTML format. To describe the structure of the web page, cascading style sheets of the CSS3 type are preferably used. The web browser running on the client computer is chosen from the many browsers that allow a user to access web pages on the Internet. The web browser running on the client workstation is preferably capable of taking CSS3 cascading style sheets into account, parsing Javascript 1.2 and displaying pages in XHTML and HTML5 format. Whenever the user interacts with the web page, the web browser running on the client computer requires from the server the required part of the application, which may include data or executable code. This communication is invisible to the user, being managed directly by the web browser executed on the client computer. In this nonlimiting example, a preferred embodiment of the invention is described in which the plurality of images to be displayed is a series of photographs of eyeglass frames of an online commerce catalog, and in which the background image is a photograph of a potential buyer, who is typically the user of the client computer. In order to be superimposed on the background image without completely obscuring it, the images to be displayed are partially transparent.

A cet égard, le format PNG est particulièrement préféré puisqu'il permet de procurer des images de bonne qualité tout en préservant la couche alpha, qui détermine la transparence des images. Dans le cas où les images représentent différents modèles de lunettes, les images sont obtenues en photographiant chacun de ces modèles porté par un mannequin, et en traitant ces photographies par des techniques de filtrage et de nettoyage connues pour leur conférer la transparence requise tout en assurant le meilleur rendu visuel possible (texture, matière, etc.). On choisit de préférence une résolution supérieure ou égale à 1500 pixels en largeur, pour obtenir une qualité d'image suffisante. In this respect, the PNG format is particularly preferred since it makes it possible to provide good quality images while preserving the alpha layer, which determines the transparency of the images. In the case where the images represent different models of glasses, the images are obtained by photographing each of these models worn by a manikin, and by treating these photographs by known filtering and cleaning techniques to give them the required transparency while ensuring the best possible visual rendering (texture, material, etc.). A resolution greater than or equal to 1500 pixels in width is preferably chosen to obtain a sufficient image quality.

De préférence, pour chaque modèle, on prend une série de photographies selon une orientation variant de -90° à +90° par rapport à la face du mannequin. Ceci permettra de choisir l'orientation la plus appropriée suivant l'orientation du visage de l'utilisateur qui doit les essayer. Les images sont redimensionnées pour respecter un ratio déterminé entre une grandeur réelle du modèle et un pixel. La pluralité d'images destinées à être superposées à l'image de fond est alors enregistrée dans une base de données accessible à partir du serveur. A chacun des modèles est avantageusement associé un contenu informatif, comprenant par exemple des caractéristiques techniques du modèle, son prix, sa disponibilité, etc. Ledit contenu est également enregistré dans la base de données pour être transmis à un navigateur exécuté sur le poste client afin d'être affiché sur la page Web avec chaque modèle présenté. La base de données est typiquement enregistrée sur un disque dur du serveur. Preferably, for each model, a series of photographs is taken in an orientation ranging from -90 ° to + 90 ° with respect to the face of the manikin. This will make it possible to choose the most appropriate orientation according to the orientation of the face of the user who must try them. The images are resized to respect a ratio determined between a real size of the model and a pixel. The plurality of images intended to be superimposed on the background image is then stored in a database accessible from the server. Each of the models is advantageously associated with an informative content, comprising, for example, the technical characteristics of the model, its price, its availability, etc. This content is also stored in the database to be transmitted to a browser running on the client computer for display on the web page with each model presented. The database is typically stored on a hard disk of the server.

On va maintenant décrire l'obtention de l'image de fond à laquelle la pluralité d'images évoquée ci-dessus est destinée à être superposée. L'utilisateur dispose par exemple d'une cybercaméra, qui est un périphérique du poste client. L'utilisateur prend alors une photographie de son visage à l'aide de la cybercaméra. We will now describe obtaining the background image to which the plurality of images mentioned above is intended to be superimposed. The user has for example a webcam, which is a device of the client station. The user then takes a photograph of his face using the webcam.

De manière alternative, l'utilisateur peut télécharger sur le poste client une photographie à partir d'un autre dispositif, tel qu'un téléphone mobile ou une caméra digitale. L'image acquise par la caméra ou téléchargée est récupérée par un plugiciel du poste client qui la transmet à une bibliothèque graphique communiquant avec le serveur. Alternatively, the user can download on the client computer a photograph from another device, such as a mobile phone or a digital camera. The image acquired by the camera or downloaded is retrieved by a plug-in of the client station which transmits it to a graphic library communicating with the server.

Le plugiciel du poste client est installé dans le navigateur Web exécuté sur le poste client et exécuté. Ainsi, aucune installation permanente n'est requise et l'application fonctionne sur une machine virtuelle à l'intérieur du navigateur Web exécuté sur le poste client. Le plugiciel utilise un code généré par une machine virtuelle, telle qu'Adobe Flash. The plug-in of the client computer is installed in the web browser running on the client computer and running. Thus, no permanent installation is required and the application runs on a virtual machine inside the web browser running on the client computer. The plug-in uses code generated by a virtual machine, such as Adobe Flash.

L'image est envoyée à une bibliothèque graphique du serveur par un protocole de type HTTP/S et est enregistrée sur le serveur en tant qu'image source, résultats de calcul et image déboguée. La bibliothèque graphique est de préférence choisie parmi les bibliothèques libres. La bibliothèque OpenCV est à l'heure actuelle une des bibliothèques graphiques les plus répandues permettant de détecter des objets dans des images et de suivre des mouvements. Dans le cas d'espèce, ladite bibliothèque graphique est utilisée pour détecter les yeux de l'utilisateur dans la photographie transmise par le plugiciel. De préférence, l'utilisateur est guidé dans la prise de la photographie de sorte à ce que son visage soit au centre de l'image, que son visage soit suffisamment grand pour procurer une bonne résolution en vue du traitement de l'image et que ses yeux soient sensiblement dans un plan horizontal. A cet égard, on fait en sorte que les photographies prises par la cybercaméra soient au moins au format VGA et que son visage occupe entre 30 et 50% de l'image. The image is sent to a graphical library of the server by an HTTP / S protocol and is stored on the server as a source image, calculation results, and debug image. The graphic library is preferably selected from free libraries. The OpenCV library is currently one of the most popular graphical libraries for detecting objects in images and tracking motion. In this case, said graphic library is used to detect the user's eyes in the photograph transmitted by the plug-in. Preferably, the user is guided in taking the photograph so that his face is in the center of the image, that his face is large enough to provide a good resolution for the image processing and that his eyes are substantially in a horizontal plane. In this respect, it is ensured that the photographs taken by the webcam are at least VGA format and that his face occupies between 30 and 50% of the image.

La détection des yeux par la bibliothèque graphique repose par ailleurs sur un certain nombre d'hypothèses, parmi lesquelles, par exemple, le fait que les yeux sont ronds et plus brillants que le reste du visage, que les yeux sont situés dans la partie supérieure de l'ovale du visage, que les yeux sont sensiblement symétriques par rapport au plan de symétrie vertical de l'ovale, et qu'ils sont de taille sensiblement identique. The graphic library's eye detection also relies on a number of assumptions, including, for example, the fact that the eyes are round and shinier than the rest of the face, the eyes are located at the top. of the oval of the face, that the eyes are substantially symmetrical with respect to the vertical plane of symmetry of the oval, and that they are of substantially identical size.

Par ailleurs,on peut faire le choix de ne traiter la photographie que si le visage de l'utilisateur n'est tourné que d'un angle de moins de 25° dans chaque direction par rapport à la position de face. A l'issue du traitement par la bibliothèque graphique, le serveur renvoie au navigateur Web exécuté sur le poste client l'image traitée accompagnée d'une réponse quant à la possibilité d'utiliser ladite image en tant qu'image de fond pour la superposition des images partiellement transparentes. La réponse peut être de l'un des trois types suivants : l'image ne donne pas de résultats utilisables, l'image donne des résultats erronés, l'image donne de bons résultats. On the other hand, it is possible to choose to process the photograph only if the user's face is turned at an angle of less than 25 ° in each direction relative to the front position. At the end of the processing by the graphic library, the server returns to the web browser running on the client computer the processed image accompanied by a response as to the possibility of using said image as a background image for the overlay partially transparent images. The answer can be of one of three types: the image does not give usable results, the image gives erroneous results, the image gives good results.

Le serveur envoie également au navigateur Web exécuté sur le poste client une image partiellement transparente à superposer à l'image de fond. Le navigateur Web exécuté sur le poste client superpose ladite image et l'image de fond traitée. L'utilisateur peut visualiser sur le dispositif d'affichage l'image ainsi traitée avec l'image partiellement transparente superposée et la réponse associée, qui peut comprendre un message d'aide suggérant des remèdes pour améliorer la qualité de la photographie. Grâce à des boutons affichés à proximité de l'image, l'utilisateur peut ainsi corriger le résultat obtenu et notamment déplacer et/ou redimensionner l'image partiellement transparente. The server also sends the web browser running on the client computer a partially transparent image to overlay the background image. The web browser running on the client computer superimposes said image and the processed background image. The user can view on the display device the image thus treated with the superimposed partially transparent image and the associated response, which may include a help message suggesting remedies for improving the quality of the photograph. Thanks to buttons displayed near the image, the user can correct the result obtained and in particular move and / or resize the partially transparent image.

Chacune de ces modifications constitue un retour d'information de l'utilisateur qui est transmis au serveur et enregistré dans une mémoire du serveur. On améliore ainsi la détection grâce à un entraînement de la bibliothèque graphique. De préférence, la bibliothèque graphique est exécutée en tant que service sur un serveur qui lui est propre et reçoit des données du code PHP du serveur, ce qui améliore la performance globale du système et diminue la quantité de mémoire requise. Les feuilles de style en cascade déterminent, en fonction de la structure globale du site Web, l'emplacement et la manière dont les images partiellement transparentes doivent être superposées à l'image de fond. Cette implémentation permet de ne communiquer la position de l'image à superposer qu'une seule fois, quel que soit le nombre d'occurrence de l'image de fond sur la page Web. La superposition est quant à elle réalisée par le navigateur Web exécuté sur le poste client, ce qui procure un procédé utilisable à grande échelle et très efficace. Le traitement n'étant réalisé qu'une fois sur le serveur, celui-ci ne voit pas sa stabilité compromise même si plusieurs utilisateurs l'utilisent en même temps, les opérations d'affichage étant réalisées par le navigateur Web exécuté sur chaque poste client. A partir de la photographie de l'utilisateur qui est transmise au serveur, on calcule le ratio entre une grandeur réelle et un pixel. Lorsque le navigateur Web exécuté sur le poste client envoie une requête au serveur pour obtenir les images à superposer, il reçoit lesdites images du serveur, une par une ou en bloc, et les dimensionne pour les adapter au ratio grandeur réelle / pixel de l'image de fond. Each of these changes is feedback from the user that is transmitted to the server and stored in a server memory. This improves the detection by training the graphic library. Preferably, the graphics library is run as a service on its own server and receives data from the server's PHP code, which improves overall system performance and decreases the amount of memory required. Cascading style sheets determine, based on the overall structure of the website, the location and how partially transparent images should be overlaid on the background image. This implementation makes it possible to communicate the position of the image to be superimposed only once, regardless of the number of occurrences of the background image on the web page. The overlay is performed by the web browser running on the client machine, which provides a large-scale and highly efficient process. Since the processing is done only once on the server, the server does not see its stability compromised even if several users use it at the same time, the display operations being performed by the web browser executed on each client station. . From the user's photograph that is transmitted to the server, the ratio between a real magnitude and a pixel is calculated. When the web browser running on the client computer sends a request to the server to obtain the images to be overlaid, it receives said images from the server, one by one or in a block, and sizes them to fit the ratio real size / pixel of the background picture.

Le navigateur Web exécuté sur le poste client peut alors effectuer la superposition de la pluralité d'images et de l'image de fond, et afficher un catalogue personnalisé, dans lequel la photographie de l'utilisateur avec tous les modèles de lunette de la page est proposée. L'utilisateur est donc à même de sélectionner le modèle qui lui plaît le plus parmi les modèles affichés. De même, lorsque l'utilisateur souhaite changer de page, le navigateur Web exécuté sur le poste client envoie une requête ad hoc au serveur, qui lui transmet les images appropriées, qui sont correctement dimensionnées par le navigateur Web exécuté sur le poste client. The web browser running on the client computer can then superimpose the plurality of images and the background image, and display a custom catalog, in which the user's photograph with all the telescope templates on the page is proposed. The user is therefore able to select the model that pleases him the most among the models displayed. Similarly, when the user wants to change pages, the web browser running on the client computer sends an ad hoc request to the server, which sends the appropriate images, which are correctly sized by the web browser running on the client.

Cette implémentation du système minimise les opérations effectuées au niveau du serveur et évite de le déstabiliser, même en cas d'afflux de demandes simultanées. Pour permettre le suivi des évolutions, voire des statistiques qualité, ainsi que la persistance des données lorsque l'utilisateur navigue d'une page à une autre, le système comprend une ou plusieurs mémoires. This implementation of the system minimizes the operations performed at the server and avoids destabilizing it, even in case of influx of simultaneous requests. To track changes or even quality statistics, as well as the persistence of data when the user navigates from one page to another, the system includes one or more memories.

De préférence, en raison des contraintes de sécurité sur le navigateur Web exécuté sur le poste client, la majeure partie des données est stockée sur le serveur. Différents types de mémoire peuvent être utilisés. Une mémoire RAM peut être employée pour mémoriser les données de traitement, les données de réseau ainsi qu'une mémoire temporaire utilisée pour stocker les données 20 reçues. Par ailleurs, une mémoire persistante notamment sous forme d'un disque peut exister tant du côté du serveur (pour la base de données d'images et pour le système d'assurance qualité mentionné ci-dessus), que du côté du poste client (cache du navigateur Web). Il va de soi que les exemples que l'on vient de donner ne sont que des illustrations 25 particulières en aucun cas limitatives quant aux domaines d'application de l'invention. Notamment, l'invention s'applique également à un procédé et à un système dans lequel la pluralité d'images à afficher comprend des objets décoratifs ou des meubles, des accessoires pour un véhicule (automobile, motocycle, etc.), des accessoires portables par un utilisateur (bijoux, vêtements, chaussures, etc.), des modifications de son apparence 30 (coiffure, maquillage) et l'image de fond comprend respectivement une photographie d'une pièce ou d'un jardin, du véhicule ou de l'utilisateur (soit de la totalité de son corps soit d'une partie seulement, selon l'application). Dans ce cas, on entraîne la bibliothèque graphique à reconnaître la géométrie des objets représentés sur les images à superposer. Preferably, because of the security constraints on the web browser running on the client computer, most of the data is stored on the server. Different types of memory can be used. A RAM may be employed to store processing data, network data, and a temporary memory used to store the received data. In addition, a persistent memory, particularly in the form of a disk, can exist both on the server side (for the image database and for the quality assurance system mentioned above), and on the client side ( Web browser cache). It goes without saying that the examples which have just been given are only particular illustrations that are in no way limiting as to the fields of application of the invention. In particular, the invention also applies to a method and a system in which the plurality of images to be displayed includes decorative objects or furniture, accessories for a vehicle (automobile, motorcycle, etc.), portable accessories. by a user (jewelry, clothing, shoes, etc.), changes in his appearance (hairstyle, make-up) and the background image includes respectively a photograph of a room or a garden, the vehicle or the user (either his whole body or only a part, depending on the application). In this case, the graphic library is trained to recognize the geometry of the objects represented on the images to be superimposed.

Par ailleurs, l'invention s'applique également à l'affichage d'une page Web avec une pluralité d'images superposées à une image animée telle qu'une vidéo ou un dessin animé. Moreover, the invention also applies to the display of a web page with a plurality of images superimposed on a moving image such as a video or a cartoon.

Claims

REVENDICATIONS1. A method implemented in a client-server computer system for simultaneously displaying on a display device a Web page with a plurality of partially transparent images superimposed on a fixed or animated background image, said method being characterized in that comprises the following steps: - the transmission to a server, by a client station plug-in, of a still or animated image intended to become said background image; processing, by a graphic library communicating with said server, said image, said processing comprising a verification of the quality of the image, the transmission by said server of the processed background image to a Web browser executed on the client station, - sending, by said web browser from the client station to the server, a request determining the plurality of partially transparent images to be displayed, - the adaptation, by the graphic library, of the dimension of the plurality partially transparent images to the dimension to the background image, - the transmission by said server to the web browser of the client station of said plurality of images, - the superposition, by said web browser of the client station, of each of the plurality of partially transparent images on said background image and the simultaneous display of said superimposed images on the display device.

2. Method according to claim 1, characterized in that the background image is a photograph of a user.

3. Method according to claim 2, characterized in that the partially transparent images are images of products intended to be worn by the user.

4. Method according to claim 3, characterized in that said products are spectacle frames.

5. Method according to one of claims 1 to 4, characterized in that said partially transparent images are stored in a database accessible from the server.

6. Method according to one of claims 1 to 5, characterized in that it comprises a step of modifying, by the user, the processed background image and a step of transmission, by the client web browser, of the modified image to the server.

7. Method according to claim 6, characterized in that it comprises storing said modified image in a memory of the server.

8. Method according to one of claims 1 to 7, characterized in that it comprises a step of sending to the server from the client station, by the Web browser, a request to remove the background image. and, in response to said request, a step of the server deleting said background image.

9. The method of claim 1, characterized in that the background image is a video.

A client-server computing system for simultaneously displaying on a display device a web page with a plurality of partially transparent images superimposed on a fixed or animated background image, said system being characterized in that it comprises: side of a client station: a web browser adapted to send requests to the server and analyze responses from the server, and a plug-in adapted to send the server a still image or animated to become the background image; on the server side: a database for storing said plurality of partially transparent images and a graphics library for processing the still or animated image transmitted by the plug-in.