Как добиться увеличения и загрузки функций кода qr, созданного с помощью angularx-qrcode?

Question

Я использовал angularx-qrcode для генерации qrcode и хочу использовать функцию масштабирования (используя события onClick, onScroll и т. Д.) На изображении qrcode.Я не могу использовать функцию масштабирования изображения qrcode, хотя мне удалось добиться увеличения при событиях «hover» и «active».Я попытался использовать 'ngx-img-zoom' & 'angular-zoom', но не смог интегрироваться с;

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

Я включил id в элемент qrcode;

<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» и загрузите код с помощью кнопки «Скачать код».Хотя мне удалось изменить [Размер] с помощью двухсторонней привязки с помощью директивы [(ngModel)], изображение qrcode не изменяется и не увеличивается / не уменьшается в размере при возникновении события.Спасибо

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>  

Мы вызываем модальный режим всякий раз, когда нажимается 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>

Это работает!Я также поместил кнопку «Загрузить» в тег (проверьте приведенный выше код) и успешно загрузил qrcode в кодировке base64.Я использовал функцию;

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

и интерполяцию строк {{link}} (проверьте выше).

Спасибо:)