How to achieve zoom and download features on qr code generated using angularx-qrcode?

Issue

I used angularx-qrcode to generate a qrcode, and want to use zoom feature (using events onClick, onScroll, etc.) on the qrcode image. I am unable to use the zoom feature on qrcode image, though I succeeded in achieving zoom on ‘hover’ and ‘active’ event. I tried using ‘ngx-img-zoom’ & ‘angular-zoom’, however unable to integrate with;

<qrcode [qrdata]="'Your QR code data string'" [size]="256" [level]="'M'"></qrcode>

I included an id in the qrcode element;

<qrcode [qrdata]="'Your QR code data string'" [size]="256" [id]="'zoomx'" [level]="'M'"></qrcode>

and included a style in style.css;

#zoomx img:hover {
transform: scale(1.5);
}

It worked! The following style also works;

#zoomx img:active {
transform: scale(1.5);
}

However, I want to change the [Size]=’256′, on, ‘onClick’ event, using a zoom button, change the [Size] using ‘onScroll’ event and make the code downloadable using “Download Code” button. Though I succeeded in changing the [Size] using two way binding by [(ngModel)] directive, the qrcode image doesn’t change or increase/decrease in size when the event occurs. Thanks

Solution

I got it! I got a code from my colleague;

            <!-- Modal -->
            <div class="modal fade" id="myModal" role="dialog">
              <div class="modal-dialog" style="margin-top:36px;">                    
            <!-- Modal content-->
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">{{orgName}}</h4>
                  </div>
                  <div class="modal-body text-center">
                      <qrcode [class]="'img-responsive'" [qrdata]="myAngularxQrCode" [size]="300" [level]="'M'" onclick="imgCopy()"></qrcode>
                      <p class="text-center">Click to visit: <a href="{{elText}}" target="_blank">{{elText}}</a></p>
                  </div>
                  <div class="modal-footer">
                    <a href="{{link}}" download><button type="button" class="btn btn-primary" (click)="dlDataUrlBin()" style="margin-right:10px;">Download Image</button></a>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                  </div>
                </div>

              </div>
            </div>  

We are calling the modal whenever the qrcode is clicked;

                 <div class="text-center clearfix">
                  <a data-toggle="modal" data-target="#myModal" download>
                  <qrcode [class]="'img-responsive'" [qrdata]="myAngularxQrCode" [size]="currentSize" [level]="'M'"></qrcode>
                  </a>
                </div>

It worked! I also put the “Download” Button within tag (check the above code) and succeeded in downloading the base64 encoded qrcode. I used function;

 dlDataUrlBin(){
  var y = document.getElementsByTagName("img")[5];
  this.link = y.src;
}

and string interpolation {{link}} (check above).

Thanks 🙂

Answered By – vsg

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.