在本地保存图像(从外部库中检索) - Angular? [英] Saving an image (retrieved from external library) locally - Angular?
问题描述
我对 Angular 和其他方面真的很陌生.所以我从一个库(angularx-qrcode)生成器中得到了一个二维码图像.
这是获取图像的代码:
</qrcode>
现在我想要一个按钮,允许用户在本地保存上面的图像.我怎样才能做到这一点?
对于不同的 Angular 版本(例如 2 与 7),语法是否也不同?
非常感谢!!任何帮助将不胜感激:)
现在我想要一个按钮,允许用户保存上面的图像本地.我怎样才能做到这一点?
<小时>
因此,您想将二维码图像下载到本地设备中
<块引用>检查 WORKING STACKBLITZ强>
这是我的做法!
<块引用>- 首先需要从生成的图片中获取base64图片数据
- 将 base 64 编码的图像转换为 blob 数据
- 添加一个按钮来下载图片
你的 component.html
可以是这样的:~
<qrcode #parent [qrdata]="qrdata" [size]="256" [level]="'M'"></qrcode><br><button (click)="saveAsImage(parent)">下载二维码图片</button>
你的 component.ts
可以是这样的:~
import { Component } from '@angular/core';@成分({选择器:'我的应用',templateUrl: './app.component.html',styleUrls: ['./app.component.css']})导出类 AppComponent {qrdata = '初始二维码数据串';saveAsImage(父){//从图像中获取 base 64 日期const parentElement = parent.el.nativeElement.querySelector("img").src;//将 base 64 编码的图像转换为 blobData让 blobData = this.convertBase64ToBlob(parentElement);//保存为图片if (window.navigator && window.navigator.msSaveOrOpenBlob) {//IEwindow.navigator.msSaveOrOpenBlob(blobData, '二维码');} else {//铬const blob = new Blob([blobData], { type: "image/png" });const url = window.URL.createObjectURL(blob);//window.open(url);const link = document.createElement('a');链接.href = url;link.download = '二维码';链接.点击();}}私人 convertBase64ToBlob(Base64Image: any) {//分成两部分const 部分 = Base64Image.split(';base64,');//保留内容类型const imageType = part[0].split(':')[1];//解码 BASE64 字符串const decodedData = window.atob(parts[1]);//创建大小与行数据长度相同的 UNIT8ARRAYconst uInt8Array = new Uint8Array(decodedData.length);//将所有字符代码插入 UINT8ARRAYfor (let i = 0; i
<小时>
另外,如果你想保存二维码中的文本,请检查下面的这个:~
<块引用>检查 WORKING STACKBLITZ强>
I'm really really new to Angular and all. So I've gotten a QR code image from a library (angularx-qrcode) generator.
Here's the code to get the image:
<qrcode [qrdata]="'Your QR code data string'" [size]="256" [level]="'M'"></qrcode>
Now I wanna have a button that allows the user to save the above image locally. How can I achieve this?
Also is the syntax different for different Angular versions (e.g. 2 vs 7)?
Thank you so much!! any help would be appreciated:)
Now I wanna have a button that allows the user to save the above image locally. How can I achieve this?
So, you want to download the Qr code image into your local device
CHECK WORKING STACKBLITZ
This is my approach on how I did it!
- First, you need to get the base64 image data from the generated image
- Convert the base 64 encoded image into blob data
- Add a button to download the image
Your component.html
can be something like this:~
<qrcode #parent [qrdata]="qrdata" [size]="256" [level]="'M'"></qrcode>
<br>
<button (click)="saveAsImage(parent)">Download QR Code Image</button>
Your component.ts
can be something like this:~
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 });
}
}
Also, if you want to save the text inside the QRCode check this one below:~
CHECK WORKING STACKBLITZ
这篇关于在本地保存图像(从外部库中检索) - Angular?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!