Javascript 如何在使用angularx qrcode生成的qrcode上实现缩放和下载功能？

我使用angularx qrcode生成qrcode，并希望在qrcode图像上使用事件onClick、onScroll等的缩放功能。我无法在qrcode图像上使用缩放功能，尽管我成功地在“悬停”和“活动”事件上实现了缩放。我尝试使用“ngx img zoom”和“angular zoom”，但无法与集成

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

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

zoomx img：悬停{ 转换：scale1.5； }

成功了！以下风格也适用

zoomx img：活动{ 转换：scale1.5； }

---

但是，我想使用缩放按钮在“onClick”事件上更改[Size]=“256”，使用“onScroll”事件更改[Size]，并使用下载代码按钮使代码可下载。虽然我成功地通过[ngModel]指令使用双向绑定更改了[Size]，但当事件发生时，qrcode图像的大小不会改变或增加/减少。谢谢

我明白了！我从我的同事那里得到了一个密码

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

和上面的字符串插值{link}}检查

---

谢谢：

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

首先，在html中，使用数据绑定对标记进行引用，如下所示：

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

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

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

然后，我们需要html模板上的一个按钮来引用自定义函数dlDataUrlBin（在本例中），以便下载图像

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

使用对qrcode元素的引用，我们可以访问它的第一个子元素，即图像，通过访问源代码并将此值分配给前面提到的链接变量，我们可以获得qrcode标记元素的工作下载按钮

...

link: string

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

...

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

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