0

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:

  1. 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).

  2. They do hide the HTML and its corresponding CANVAS element using z-index or something and show only generated image.

  3. 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?

Vikas Kumar
  • 689
  • 3
  • 7
  • 18

2 Answers2

1

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.

0

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.

Community
  • 1
  • 1
andyrandy
  • 72,880
  • 8
  • 113
  • 130
  • What do you mean by combine? I think you didn't get what I asked. – Vikas Kumar Jan 15 '17 at 10:11
  • you can also combine images on the server instead of the client. you want to create images like in those screenshots, right? – andyrandy Jan 15 '17 at 11:07
  • there is really not much to it. you don´t need canvas, you just need the separate images and their x/y coordinates to place/combine them. that happens on the server. OR you use canvas and export the whole image to php. – andyrandy Jan 15 '17 at 11:08
  • i have added more information, check it out. also check out the php reference with the image functions. – andyrandy Jan 15 '17 at 11:10
  • Yes. I have created the canvas and I know how to export it as PNG and save it to server using `toDATAURL`. But thing is I don't want the canvas and its source (the DIV element and its content which has to be converted to canvas and to image) on the main page. I want to do it in some way that user won't see it. – Vikas Kumar Jan 15 '17 at 12:40
  • then why not create a canvas element in the backround, with display:none? either do that, or combine pictures on the server with php functions. – andyrandy Jan 15 '17 at 12:42
  • Ok. But now I'm stuck at another problem. Could you please answer this: http://stackoverflow.com/questions/22960471/html2canvas-js-not-capturing-image-for-dynamically-generated-content – Vikas Kumar Jan 15 '17 at 15:46
  • so you still want to try with html2canvas? i would not use it, it´s buggy afaik and the pics are small, right? just use a hidden canvas and redraw it, or combine pictures with php. – andyrandy Jan 15 '17 at 15:48
  • How would I combine text on pictures? – Vikas Kumar Jan 17 '17 at 06:04
  • just check out all the php functions for graphics, there are also functions for putting text on pictures (with pixel coordinates). – andyrandy Jan 17 '17 at 21:00
  • Ok I'll try PHP graphics. What do you mean by redraw the canvas? Using html2canvas? – Vikas Kumar Feb 02 '17 at 03:01
  • i just meant that you can use a hidden canvas, draw all elements on it and then use toDataURL, as i mentioned in my answer. that would be a lot easier. – andyrandy Feb 02 '17 at 07:31
  • Okay. But how would I draw image (that I want to place in it) in canvas? – Vikas Kumar Feb 05 '17 at 05:21
  • 1
    https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage – andyrandy Feb 05 '17 at 08:10
  • Thank you :) It seems good approach. Also, I found this: https://github.com/Intervention/image I think it should solve my problem. I'm trying it. – Vikas Kumar Feb 16 '17 at 09:11
  • I tried Intervention. Would you please check this question? http://stackoverflow.com/questions/42779255/intervention-imagick-works-in-terminal-but-not-in-browser – Vikas Kumar Mar 14 '17 at 06:39