angularx-qrcode生成的二维码如何实现缩放和下载功能？

Question

我使用angularx-qrcode生成二维码，想对二维码图片使用缩放功能（使用onClick、onScroll等事件）。我无法在二维码图像上使用缩放功能，尽管我成功实现了 'hover' 和 'active' 事件的缩放。我尝试使用 'ngx-img-zoom' 和 'angular-zoom'，但无法集成；

<qrcode [qrdata]="'Your QR code data string'" [size]="256" [level]="'M'"></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] 并制作代码可使用 "Download Code" 按钮下载。尽管我通过 [(ngModel)] 指令使用两种方式绑定成功地更改了 [Size]，但是当事件发生时，二维码图像不会更改或 increase/decrease 大小。谢谢

Answer 1

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

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

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

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

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

谢谢:)

Answer 2

如果您添加更多图像，之前的解决方案将难以维护，因此我找到了另一种方法来获取由 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的变量，这将存储对生成的二维码的引用

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

<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 变量，我们得到了一个工作angularx-qrcode 二维码标签元素的下载按钮。

angularx-qrcode生成的二维码如何实现缩放和下载功能？

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

javascript

angular

angular5