如何在使用angularx-qrcode生成的二维码上实现缩放和下载功能？答案

【问题标题】：How to achieve zoom and download features on qr code generated using angularx-qrcode?如何在使用angularx-qrcode生成的二维码上实现缩放和下载功能？
【发布时间】：2018-09-30 06:01:39
【问题描述】：

我使用 angularx-qrcode 生成一个二维码，并想在二维码图像上使用缩放功能（使用事件 onClick、onScroll 等）。我无法在 qrcode 图像上使用缩放功能，尽管我成功实现了“悬停”和“活动”事件的缩放。我尝试使用“ngx-img-zoom”和“angular-zoom”，但无法集成；

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

我在 qrcode 元素中包含了一个 id；

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

并在 style.css 中包含一个样式；

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

成功了！以下样式也适用；

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

但是，我想使用缩放按钮更改 [Size]='256', on, 'onClick' 事件，使用 'onScroll' 事件更改 [Size] 并使用“下载代码”使代码可下载按钮。尽管我通过 [(ngModel)] 指令使用两种方式绑定成功更改了 [Size]，但当事件发生时，qrcode 图像不会更改或增大/减小大小。谢谢

【问题讨论】：

标签： javascript angular angular5

【解决方案1】：

如果您添加更多图像，以前的解决方案将难以维护，因此我找到了另一种方法来获取angularx-qrcode创建的图像的引用：

首先在你的html中，使用数据绑定，引用<qrcode>标签如下：

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

通过添加#qrcode，您现在可以直接引用该对象，因此在您的*.component.ts 文件中，您可以使用@ViewChild 访问该元素：

...

link: string

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

...

请注意，我还添加了一个名为 link 的变量，这将存储对生成的 qrcode 的引用

然后我们需要一个引用自定义函数dlDataUrlBin()的html模板上的按钮，在这个例子中，为了下载图像。

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

回到*.component.ts文件我们处理dlDataUrlBin()函数如下：

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

使用对 qrcode 元素的引用，我们可以访问它的 firstChild，这将是图像，并通过访问源并将此值分配给前面提到的 link 变量，我们可以得到 @987654322 的有效下载按钮@qrcode 标签元素。

【讨论】：

【解决方案2】：

我明白了！我从同事那里得到了一个代码；

            <!-- 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>

每当点击二维码时，我们都会调用模态框；

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

成功了！我还将“下载”按钮放在标签内（检查上面的代码）并成功下载了base64编码的二维码。我使用了函数；

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

和字符串插值{{link}}（检查上面）。

谢谢:)

【讨论】：