本地保存图像(从外部库检索)-Angular?

时间:2019-05-04 04:41:02

标签: angular angular7

我真的对Angular和其他所有人都是新手。因此,我从库(angularx-qrcode)生成器中获取了QR码图像。

以下是获取图片的代码:

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

现在,我要有一个按钮,允许用户在本地保存以上图像。我该如何实现?

不同的Angular版本(例如2 vs 7)的语法也不同吗?

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

2 个答案:

答案 0 :(得分:1)

  

现在我要有一个按钮,允许用户保存上面的图像   本地。我该如何实现?


因此,您想将二维码图像下载到本地设备中

  

检查 WORKING STACKBLITZ

这是我的工作方式!

  
      
  • 首先,您需要从生成的图像中获取base64图像数据
  •   
  • 将基本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

答案 1 :(得分:0)

我实际上并没有得到您想要的东西,但是我看到您想从存储中获取图像并将其提供给qrdata,反之亦然

存储在Angular中

您可以使用localStorag

创建包含以下代码的简单服务

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

@Injectable()
export class MemoryService {
  constructor() {}

  set(key: string, data: any): void {
    try {
      localStorage.setItem(key, JSON.stringify(data));
    } catch (e) {
      console.error(e);
    }
  }

  get(key: string) {
    try {
      return JSON.parse(localStorage.getItem(key));
    } catch (e) {
      console.error(e);
      return null;
    }
  }
}

返回到您的qrcode组件

// File: example.ts
export class QRCodeComponent {
  public myAngularxQrCode: string = null;
  constructor (private memory: MemoryService) {
    // assign a value
    // this.myAngularxQrCode = 'Your QR code data string';
    // here you need to get the value from storage and assign it to your variable
    this.myAngularxQrCode = this.memory.get('YOUR OWN KEY');
  }

  storeQRData() {
   this.memory.set('YOUR OWN KEY' , this.myAngularxQrCode); 
  }
}

// File: example.html
<qrcode [qrdata]="myAngularxQrCode" [size]="256" [level]="'M'"></qrcode>
<button (click)="storeQRData()">Save To Storage</button>