CODEWITHSUNDEEP
javascriptangularangular5
vsg
vsg

Reputation: 185

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

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

Upvotes: 1

Views: 3900

Answers (3)

Prajval Singh
Prajval Singh

Reputation: 1141

You can download the image as follows:

The library can give you the DataURL of the image which you can access from

    let ImageToBeDownloaded = this.qrCodeElement.qrcElement.nativeElement.firstChild.src;

this will give you a dataURL in the format of data:[<mediatype>][;base64],<data>

To download the qrCode use the following code:

let linkElement = document.createElement('a');
linkElement.href = imageToBeDownloaded;
link.download = fileNameOfYourChoice;
link.click();

Explaination:

The dataUrls are the urls that contain data encoded in them in the base64 encoding, meaning a separate network request is not required to access the files as we have in the case of traditional urls.

Now that you have the url, to get the image from it, create an anchor tag, assign its href property to the data url that we get and set the download Property to the filename and then programmatically click on the link.

This will download the image for you, Hope it helped

Upvotes: 0

reojased
reojased

Reputation: 729

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.

Upvotes: 2

vsg
vsg

Reputation: 185

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

Upvotes: 0

Related Questions