Angular实现svg和png图片下载实现

wallowyou

2019-09-04

æ¦è¿°

æå·§

svgåpngå¾çè½¬æ¢åä¸è½½
è§£å³chrome data url too largeä¸è½½é®é¢
è§£å³@ViewChildæªåæ¶å·æ°é®é¢

åå

æ°¸è¿ä»é®é¢æè¿çå°æ¹å¼å§åæ

åæéæ±

èæ¯ç¥è¯

ç¼ç¨æ¹å¼

svgæ¯ç¢éå¾å½¢è¯è¨ï¼canvasæä¾ç»å¸æ ç¾åç»å¶APIï¼

ææ¯åç

canvasåºäºåç´ ï¼æ¯ä¸ç§HTMLåç´ ï¼åªè½éè¿èæ¬ç»å¶ã

éç¨èå´

è½¬æ¢ç¨åº¦

svgè¾é¾ä»¥è½¬æ¢æpngæèjpegæ ¼å¼çå¾çï¼ä¸è¿canvasè¾å®¹æã

æå·§

åè®¾ä¸»é¡µé¢ app.component.html é¢å·²ç»æä¸ä¸ªcomponentï¼å®çåå®¹å¦ä¸ï¼

<app-template #template></app-template>

å¶ä¸ <app-template></app-template> æ¯ä¸ä¸ªèªå®ä¹çcomponentï¼å®ä»£è¡¨äºä¸ä¸ªsvgæä»¶ï¼svgçåå®¹åæ¾å¨ template.component.html ä¸ï¼è template.component.ts çå®ä¹å¦ä¸ï¼

// template.component.ts
@Component({
 selector: 'app-template',
 templateUrl: './template.component.html',
 styleUrls: ['./template.component.scss'],
})
export class TemplateComponent implements OnInit {
 ngOnInit() {
 }
}

å½ç¶ï¼è¿ä¸ªtemplate.componentéè¦å¨ app.module.ts ä¸å£°æåæè½å¨ app.component.html ä¸ä½¿ç¨ã

æ³¨æï¼ #template æ¯Angular5ä¹åå¼å¥çè¯æ³ï¼å®çå¨ç§°æ¯ Template reference variable (#var) ï¼åè½å¨äºå¼ç¨å¶ææåçDOMåç´ ã

svgåpngå¾çè½¬æ¢åä¸è½½

1. è·ååç´

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.scss'],
})
export class AppComponent implements OnDestroy {
 @ViewChild('template')
 template: { svgRef: ElementRef };
 
 ngOnDestroy(): void {
 }
}

è·åsvgåç´ çæ¹å¼ä¸º this.template.svgRef.nativeElement .

2. å¾çè½¬æ¢

svgè½¬æ¢æpngå¹¶ä¸ç´æ¥ï¼ä½æ¯æä»¬ç¥écanvasè½¬æ¢æpngéå¸¸ç®åãæä»¥æç§æè·¯æ¯å°svgè½¬æ¢æcanvasåè½¬æpng. canvasæä¸ª drawImage å½æ°ï¼å¯ä»¥å°å¾çç»å¶å°ç»å¸ä¸ï¼è¯¥å½æ°çè¾å¥æºæ¯ HTMLImageElement æèå¦å¤çcanvasåç´ ã

ç¬¬ä¸æ¥æ¯å°svgåç´ è½¬æ¢æDataURL.

private toSvgDataURL(viewerSvg: SVGSVGElement): string {
 const svg = viewerSvg.cloneNode(true) as SVGSVGElement;
 svg.setAttribute('width', '600px');
 const base64Data = btoa(unescape(encodeURIComponent(svg.outerHTML)));
 return `data:image/svg+xml;base64,${base64Data}`;
}

ç¬¬äºæ¥æ¯å°DataURLè½¬æ¢æ <img> .

function loadImage(url: string): Observable<HTMLImageElement> {
 const result = new Subject<HTMLImageElement>();
 const image = document.createElement('img');
 image.src = url;
 image.addEventListener('load', () => {
  result.next(image);
 });
 return result.asObservable();
}

ç¬¬ä¸æ¥æ¯å° <img> è½¬æ¢æcanvas.

private toPngDataURL(img: HTMLImageElement): string {
 const canvas = document.createElement('canvas');
 canvas.width = img.width;
 canvas.height = img.height;
 canvas.getContext('2d').drawImage(img, 0, 0);
 return canvas.toDataURL('image/png');
}

canvasè½¬æpngå¾çå°±æ¯ä¸è¿°ä¸å¥ toDataURL çè°ç¨ã

3. å¾çä¸è½½

ä¸é¢çä¸ä¸ªæ¥éª¤å¯ä»¥åèµ·æ¥ã

private generateDownloadUrl() {
 const svgDataURL = this.toSvgDataURL(this.template.svgRef.nativeElement);
 loadImage(svgDataURL)
 .pipe(map(this.toPngDataURL))
 .subscribe(url => {
  this.pngUrl = url;
  this.svgUrl = svgDataURL;
 });
}

<a> åç´ ç href å±æ§æ¯å¯ä»¥æ¥åDataURLçï¼æä»¥æä»¬æsvg dataURLåpng dataURLèµå¼ç»æååépngUrlä¸svgUrlå³å¯ï¼æåæ æ³¨downloadå±æ§è¡¨ç¤ºè¿æ¯ä¸æ¡ä¸è½½é¾æ¥ã

<a [href]="svgUrl" target="_blank" download="template.svg">ä¸è½½ SVG çæ¬</a>
<a [href]="pngUrl" target="_blank" download="template.png">ä¸è½½ PNG çæ¬</a>

è§£å³chrome data url too largeä¸è½½é®é¢

private toSvg(viewerSvg: SVGSVGElement): string {
 const svg = viewerSvg.cloneNode(true) as SVGSVGElement;
 svg.setAttribute('width', '600px');
 const blob = new Blob([svg.outerHTML], {type: 'image/svg+xml'});
 const url = URL.createObjectURL(blob);
 return url;
}

å¯¹äºpngçå¤çä¹å¯ä»¥å¾çµæ´»ã

private toPng(img: HTMLImageElement): Observable<string> {
 const canvas = document.createElement('canvas');
 canvas.width = img.width;
 canvas.height = img.height;
 canvas.getContext('2d').drawImage(img, 0, 0);
 const result = new Subject<string>();
 canvas.toBlob(blob => {
  const url = URL.createObjectURL(blob);
  result.next(url);
 });

 return result.asObservable();
}

import {DomSanitizer, SafeResourceUrl} from '@angular/platform-browser';

... 
 constructor(private sanitizer: DomSanitizer) {
 }

åæ¥çä»£ç å¾è¿åSafeResourceUrl.

private toSvg(viewerSvg: SVGSVGElement): SafeResourceUrl {
 const svg = viewerSvg.cloneNode(true) as SVGSVGElement;
 svg.setAttribute('width', '600px');
 const blob = new Blob([svg.outerHTML], {type: 'image/svg+xml'});
 const url = URL.createObjectURL(blob);
 const safeUrl = this.sanitizer.bypassSecurityTrustResourceUrl(url);
 return safeUrl;
}

private toPng(img: HTMLImageElement): Observable<SafeResourceUrl> {
 const canvas = document.createElement('canvas');
 canvas.width = img.width;
 canvas.height = img.height;
 canvas.getContext('2d').drawImage(img, 0, 0);
 const result = new Subject<SafeResourceUrl>();
 canvas.toBlob(blob => {
  const url = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(blob));
  result.next(url);
 });

 return result.asObservable();
}

åæ¥çåå¹¶æä½ç¸åºä¿®æ¹ã

private generateDownloadUrl() {
 this.svgUrl = this.toSvg(this.template.svgRef.nativeElement);
 const svgDataURL = this.toSvgDataURL(this.template.svgRef.nativeElement);
 loadImage(svgDataUrl)
 .pipe(flatMap(this.toPng)) // æ¤å¤æå
 .subscribe(url => {
  this.pngUrl = url;
 });
}

å¼å¾æ³¨æçæ¯åæ¥çpipe map æ¹æäº flatMap ï¼å ä¸º toPng è¿åè¿æ¯ä¸ä¸ªObservableï¼èä¸æ¯ç®åçå¼ã

è§£å³@ViewChildæªåæ¶å·æ°é®é¢

private waitForViewChildReady() {
 return new Promise<string>((resolve) => {
  const wait = setTimeout(() => {
   clearTimeout(wait);
   resolve('workaround!');
  }, 1000);
 });
}

ç»ç« ç¨åºè°ç¨å¦ä¸ã

this.waitForViewChildReady()
.then(this.generateDownloadUrl())
.catch(err => console.error(err))

åå

ååæ¯ç¨æ¥æå¯¼å®è·µçã

æ°¸è¿ä»é®é¢æè¿çå°æ¹å¼å§åæ

è¿éçæµåå°±æ¯Javascriptèåæèçthis scopeé®é¢ã

åé¡¾ä¸ä¸ä¸é¢æåçä»£ç ï¼

loadImage(svgDataUrl)
 .pipe(flatMap(this.toPng)) // æ¤å¤æå
 .subscribe(url => {
  this.pngUrl = url;
 });

toPng çä»£ç å¦ä¸ï¼

private toPng(img: HTMLImageElement): Observable<SafeResourceUrl> {
 const canvas = document.createElement('canvas');
 canvas.width = img.width;
 canvas.height = img.height;
 canvas.getContext('2d').drawImage(img, 0, 0);
 const result = new Subject<SafeResourceUrl>();
 canvas.toBlob(blob => {
  const url = this.sanitizer.bypassSecurityTrustResourceUrl(URL.createObjectURL(blob));
  result.next(url);
 });

 return result.asObservable();
}

ç¨åºè¿è¡æ¶ï¼æåºäºä¸ä¸ªéè¯¯ cannot read bypassSecurityTrustResourceUrl of undefined.

loadImage(svgDataUrl)
 .pipe(flatMap(this.toPng.bind(this))) // æ³¨ææ¤å¤bind(this)
 .subscribe(url => {
  this.pngUrl = url;
 });

loadImage(svgDataUrl)
 .pipe(flatMap(img => this.toPng(img))) // æ³¨ææ¤å¤å®æ´å½æ°ä½
 .subscribe(url => {
  this.pngUrl = url;
 });

png svg angular

安科网

Angular实现svg和png图片下载实现

wallowyou

wallowyou

相关推荐

将PDF转为 Word（支持Docx、Doc）、Html、XPS、SVG、PS、PCL、PNG

小技巧：如何用 Chrome 将 SVG 转成 PNG

php 实现svg转化png格式的方法分析

JPG、PNG、GIF、SVG、WebP 等格式图片区别

mqtt用户名密码activemq

结合puppeteer和egg.js搭建html转pdf或png的node中间层服务。

TypeScript（11）： String（字符串）

webpack详解----resolve

Python玩转各种多媒体，视频、音频到图片

用VS Code写Python

水果涛万门大学-人工智能、大数据与复杂系统-03.人工智能的三个阶段

（012）Nginx静态资源web服务_防盗链配置

python脚本运行中内存释放

使用Linux Mint小记

文件上传漏洞绕过手段

用户界面设计（2）- 窗体的主要属性

hexo 图片添加水印（png, jpeg, jpg, gif）

数据库-第五章数据库完整性-5.1 实体完整性

Fiddler 屏蔽css JS PNG 等资源

无聊用python写了个爬虫,来爬我喜欢的图片

wallowyou