问题
This thing is really irritating. Actually I know how to convert HTML to image using html2canvas library. But I just want to know how most of the people who have Facebook fun apps like this and this, create images.
I can get all the required user information using FB API, then how should I create an JPG/PNG image like them? What I have tried is html2canvas but I don't think all other fun apps use this thing. Because when viewed their source code, I couldn't see the HTML element containing all the content of the image that needs to be generated using html2canvas. Even the canvas element is NOT present. Only the image is displayed.
So, there can be 3 possibilities:
They do whole processing in a separate HTML/PHP page using Ajax (Which is another question, I searched a lot but couldn't find single answer related to that: See Query below).
They do hide the HTML and its corresponding CANVAS element using z-index or something and show only generated image.
They don't use
html2canvas. They use something else.
Query related to 1: Is it possible for Ajax call to execute an HTML page including JS, CSS (say URL: 'convertAndReturnImage.php' and render the result and return the generated image/URL using html2canvas in success function?
回答1:
You can easily combine images on the server - send all images to the server and place them with specific x/y coordinates. For example, PHP offers a lot of functions for this: http://php.net/manual/de/ref.image.php
You can also just combine the picture with canvas (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage), use the "toDataURL" function and send it to the server, of course. But you have to create it on the server. For example: Decoding a canvas todataURL
You can either return the picture with AJAX or create it on the server and return the URL to it.
回答2:
Ajax call can execute a script page only, like .js or .php. It can't execute a .php page containing HTML document, JS and stylesheet. For that, it has to be rendered in a browser. Ajax returns only result. This much processing can't be done any way. You have to open the document in a browser at least once.
来源：https://stackoverflow.com/questions/41658019/how-does-facebook-fun-apps-create-images-from-information-fetched