在本地保存图像（从外部库中检索） - Angular？

Question

我真的是 Angular 的新手。所以我从库（angularx-qrcode）生成器中得到了一个二维码图像。

获取图片的代码如下：

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

现在我想要一个按钮，允许用户在本地保存上面的图像。我怎样才能做到这一点？

对于不同的 Angular 版本（例如 2 和 7），语法是否也不同？

非常感谢！！任何帮助将不胜感激:)

Answer 1

现在我想要一个按钮，让用户保存上面的图片 本地。我怎样才能做到这一点？

---

所以，您想将二维码图像下载到您的本地设备中

检查 WORKING STACKBLITZ

这是我的做法！

• 首先需要从生成的图片中获取base64图片数据
• 将 base 64 编码图像转换为 blob 数据
• 添加图片下载按钮

你的component.html可以是这样的：~

<qrcode #parent [qrdata]="qrdata" [size]="256" [level]="'M'"></qrcode>
<br>
<button (click)="saveAsImage(parent)">Download QR Code Image</button>

你的component.ts可以是这样的：~

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  qrdata = 'Initial QR code data string';

  saveAsImage(parent) {
    // fetches base 64 date from image
    const parentElement = parent.el.nativeElement.querySelector("img").src;

    // converts base 64 encoded image to blobData
    let blobData = this.convertBase64ToBlob(parentElement);

    // saves as image
    if (window.navigator && window.navigator.msSaveOrOpenBlob) { //IE
      window.navigator.msSaveOrOpenBlob(blobData, 'Qrcode');
    } else { // chrome
      const blob = new Blob([blobData], { type: "image/png" });
      const url = window.URL.createObjectURL(blob);
      // window.open(url);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'Qrcode';
      link.click();
    }

  }

  private convertBase64ToBlob(Base64Image: any) {
    // SPLIT INTO TWO PARTS
    const parts = Base64Image.split(';base64,');
    // HOLD THE CONTENT TYPE
    const imageType = parts[0].split(':')[1];
    // DECODE BASE64 STRING
    const decodedData = window.atob(parts[1]);
    // CREATE UNIT8ARRAY OF SIZE SAME AS ROW DATA LENGTH
    const uInt8Array = new Uint8Array(decodedData.length);
    // INSERT ALL CHARACTER CODE INTO UINT8ARRAY
    for (let i = 0; i < decodedData.length; ++i) {
      uInt8Array[i] = decodedData.charCodeAt(i);
    }
    // RETURN BLOB IMAGE AFTER CONVERSION
    return new Blob([uInt8Array], { type: imageType });
  }

}

---

另外，如果您想将文本保存在 QRCode 中，请检查以下内容：~

检查 WORKING STACKBLITZ