How to display QR code image in HTML?

Question

0.00/5 (No votes)

See more:

Hi,

I've build an embedded web-server using snorkel, which receives some sort of data from the client, in order to generate a QR code.
the QR code (which is saved as an image)must be displayed on the client-side to be captured by the client.
The problem is I cant display it!
I've used the HTML code within the embedded server as follow:

HTML

<html>
<body>
<img src = QR.jpg> 
</img>
</body>
</html>

All I get is a small box with an X inside of it.
And this is my C++ code:

C++

#pragma hdrstop
#pragma argsused

#include <snorkel.h>
#include <tchar.h>
#include <stdio.h>
#include <stdlib.h>

call_status_t index_htm(snorkel_obj_t http,     /*read environment from this object */
			snorkel_obj_t outstream)  /* write data to the output stream   */
  {
   if (snorkel_printf (outstream, "<html><body><img src=QR4.jpg alt=QRcode width=178 height=178>" //width=100% height=100% alt=QRcode>" // alt=QRcode width=178 height=178>"
								   "</img></body></html>\r\n")== SNORKEL_ERROR)
		 return HTTP_ERROR;

   return HTTP_SUCCESS;
   }

void syntax (char *pszProg)
	{
	 fprintf (stderr, "syntax error:\n");
	 fprintf (stderr, "%s [-p <port>]\n", pszProg);
	 exit (1);
	 }

void main (int argc, char *argv[])
 {
  int i = 1;
  int port = 8888;
  snorkel_obj_t http = 0;
  char szExit[10];
  for (; i < argc; i++)
  {
   if (argv[i][0] == '-' || argv[i][0] == '/')
	 {
	  char carg = argv[i][1];
	  switch (carg)
	   {
		case 'p':          /* port number */
		port = atoi (argv[i + 1]);
		i++;
		break;
		default:
		syntax (argv[0]);
		break;
		}
	  }
   }

/*
 *
 * initialize API
 *
 */
 if (snorkel_init () != SNORKEL_SUCCESS)
  {
	perror ("could not initialize snorkel\n");
	//exit (1);
   }
/*
 *
 * create a server object
 *
 */
 http = snorkel_obj_create (snorkel_obj_server, 5,     /* number of handler threads to create */
								 NULL       /* directory containing index.html     */);
 //or i can put "/Users/rania/Documents/images"
  if (!http)
   {
	 perror ("could not create http server\n");
	 //exit (1);
   }

/*
 *
 * create a listener
 *
 */
 if (snorkel_obj_set (http,    /* server object */
					  snorkel_attrib_listener, /* attribute   */
					  port,    /* port number */
					  0 /* SSL support */ )
					  != SNORKEL_SUCCESS)
	  {
	   fprintf (stderr, "could not create listener\n");
	   snorkel_obj_destroy (http);
	   //exit (1);
	  }

 /*
  *
  * overload the URL index.html
  *
  */
	 //THIS GENERATES AN EMPTY BOX WITH NO QR CODE
	 //============================================
 if (snorkel_obj_set (http,    // server object
					 snorkel_attrib_uri,      // attribute type
					 GET,     // method
					 "/index.html",   // url
					 encodingtype_text, index_htm) != SNORKEL_SUCCESS)

		 {
		   perror ("could not overload index.html");
		   snorkel_obj_destroy (http);
		   //exit (1);
		  }
if (snorkel_obj_set(http, snorkel_attrib_ipvers, IPVERS_IPV4, SOCK_SET) != SNORKEL_SUCCESS)
		{
		  fprintf (stderr, "error could not set ip version\n");
		  //exit (1);
		 }

 fprintf (stderr, "\n\n[HTTP] starting embedded server\n");
  if (snorkel_obj_start (http) != SNORKEL_SUCCESS)
   {
	perror ("could not start server\n");
	snorkel_obj_destroy (http);
	//exit (1);
	}

/*
 *
 * do something while server runs
 * as a separate thread
 *
 */
  fprintf (stderr, "\n[HTTP] started.\n\n"
					 "--hit enter to terminate--\n");
  fgets (szExit, sizeof (szExit), stdin);

  fprintf (stderr, "[HTTP] bye\n");

 /*
  *
  * graceful clean up
  *
  */
  snorkel_obj_destroy (http);
  exit (0);
  }

And I've just read that to display an image in HTML, we must convert the image into DATA URL (BASE64), and there are a lot of online converter sites that does that. But the problem is that my project does not use a static QR code, it generates different QR codes with each client. Plus, the size of my image is way larger than the images displayed by these online converters.

So, is there any way I can convert these images into DATA URI (BASE64) programmatically using C++?
Or is there any way I can display my QR code without converting it?

I've been struggling with this problem for few month now, Please need help!

Best Regards.
Rania

Posted 22-Jan-15 6:45am

raniam

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Suraj Sahoo | Coding Passion · Answer 1 · 2015-01-22T06:52:00

Solution 1

http://stackoverflow.com/questions/21400254/how-to-draw-a-qr-code-with-qt-in-native-c-c[^]
Please check the above discussion, may this help you.
Thanks.

Posted 22-Jan-15 6:52am

Suraj Sahoo | Coding Passion

bling · Answer 2 · 2015-01-22T07:26:00

Solution 2

I see the index_htm function server your index.html file. I don't see snorkel code to serve the QR.jpg file. You need a similar function like "qr_jpeg" to send the image file to the browser.

Posted 22-Jan-15 7:26am

bling

raniam · Answer 3 · 2015-01-28T09:53:00

Solution 3

Hello,

I've just changed line 12 with the following:

HTML

snorkel_printf (outstream,"<html><body><img src="file:///webcontent/QR4.jpg">"
"</img></body></html>\r\n");

Posted 28-Jan-15 9:53am

raniam