Question

我使用angularx-qrcode生成了一个qrcode，并且想在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); }

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

Answer 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的引用

然后，在本例中，我们需要在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 qrcode标签元素。

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

每当单击qrcode时，我们就调用模态；

                 <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编码的qrcode。我用过功能;

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

和字符串插值{{link}}（请参见上文）。

谢谢：）

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

2 个答案: