0

I am generating QR code using google chart api, How can I insert image inside Image.

What I get QR code as for now,

enter image description here

What I want QR code,

enter image description here

can someone help for me to solve this problem.

developer3 onecity
  • 61
  • 1
  • 7

2 Answers2

2

Warning: This API is deprecated. Please use the actively maintained Google Charts API instead. See our deprecation policy for details

You pass your QR payload to the API endpoint and get an image in return:

https://quickchart.io/qr?text=Hello world

or

Another alternative is Image-Charts (highly reliable, deployed in data-centers around the world, sub-second response time)

https://documentation.image-charts.com/qr-codes/

Jahangir Kabir
  • 1,783
  • 13
  • 17
0

Unfortunately, with my understanding, Chart API doesn't have such a function.
But you can use Image-Overlay by using CSS.
Like this:

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
    .qrcode
    {
      position: relative;
      top: 0;
      left: 0;
      width: 200px;
      height: 200px;
    }
    .shell
    {
      position: absolute;
      top: 80px;
      left: 80px;
      width: 40px;
      height: 40px;
    }
  </style>
  
  </head>
  <body>
    <div style="position: relative; left: 0; top: 0;">
      <img class="qrcode" src="https://chart.googleapis.com/chart?chs=150x150&amp;cht=qr&amp;chl=Hello%20world&amp;choe=UTF-8" alt="QR code" />
      <img class="shell" src="YOUR IMAGE'S URL" />
    </div>  
  </body>
</html>

You can see my sample page here.

Though, note that Chart's QRcode API has already been deprecated.

Inclu Cat
  • 354
  • 1
  • 12