我真的对Angular和其他所有人都是新手。因此,我从库(angularx-qrcode)生成器中获取了QR码图像。
以下是获取图片的代码:
<qrcode [qrdata]="'Your QR code data string'" [size]="256" [level]="'M'"></qrcode>
现在,我要有一个按钮,允许用户在本地保存以上图像。我该如何实现?
不同的Angular版本(例如2 vs 7)的语法也不同吗?
非常感谢!!任何帮助,将不胜感激:)
答案 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 });
}
}
检查 WORKING STACKBLITZ
答案 1 :(得分:0)
我实际上并没有得到您想要的东西,但是我看到您想从存储中获取图像并将其提供给qrdata
,反之亦然
您可以使用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>