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

Question

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

Answer 1

The previous solution will be hard to maintain in case you add more images so I found an alternative way to get the reference of the image created by angularx-qrcode :

First in your html, using data binding, make a reference to the <qrcode> tag as follows:

<qrcode #qrcode [qrdata]="yourUrlVariable" [width]="200" elementType="img" [errorCorrectionLevel]="'M'"></qrcode>

By adding the #qrcode you now have a direct reference to the objet thus in your *.component.ts file you can access the element using @ViewChild :

...

link: string

@ViewChild("qrcode", {static : true}) qrcode: QRCodeComponent

...

Notice I've also added a variable called link, this will store the reference to the generated qrcode

---

Then we'll need a button on the html template with reference to a custom function dlDataUrlBin() , for this example, in order to download the image.

<a [href]="link" download><button class="btn btn-block" (click)="dlDataUrlBin()">Descargar</button></a>

Back to the *.component.ts file we handle the dlDataUrlBin() function as follows:

dlDataUrlBin(){
  this.link = this.qrcode.qrcElement.nativeElement.firstChild.src
}

Using the reference to the qrcode element we can access it's firstChild which will be the image, and by accessing the source and assigning this value to the link variable previously mentioned we get a working download button for the angularx-qrcode qrcode tag elements.

Answer 2

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 :)