Angular實(shí)現(xiàn)svg和png圖片下載實(shí)現(xiàn)

更新時(shí)間：2019年05月05日 08:20:43 作者：lambeta

這篇文章主要介紹了Angular實(shí)現(xiàn)svg和png圖片下載實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

我經(jīng)常思考，在面臨一個(gè)不確定問(wèn)題時(shí)，以往的經(jīng)驗(yàn)究竟有無(wú)輔助作用？如果把經(jīng)驗(yàn)遺忘會(huì)產(chǎn)生何種程度的影響？在上下求索未果之后，如何找回曾經(jīng)的感覺，恰若靈光一現(xiàn)？凡此種種，終是要思考總結(jié)的，這篇文章便是我的反思之作。

本篇文章會(huì)記述一些實(shí)用的svg與png之間的轉(zhuǎn)換技巧并強(qiáng)調(diào)一種思考原則。

概述

技巧

svg和png圖片轉(zhuǎn)換和下載
解決chrome data url too large下載問(wèn)題
解決@ViewChild未及時(shí)刷新問(wèn)題

原則

永遠(yuǎn)從問(wèn)題最近的地方開始分析

理解下面這些內(nèi)容的前提是具備一些Angular的編程基礎(chǔ)，要求大致處于能自定義component的水平。

假意需求

當(dāng)我說(shuō)“假意需求”的時(shí)候，其實(shí)是將解決方案視作眼下的需求，目的是方便理解。在這個(gè)項(xiàng)目中，我們需要把頁(yè)面上的已經(jīng)存在的svg元素轉(zhuǎn)換成可下載的svg和png鏈接。svg是矢量圖，適合打印成海報(bào)；而png清晰度有限，用作在線預(yù)覽。

背景知識(shí)

下面是svg(Scalable Vector Graphics)和canvas在編程方式、技術(shù)原理、使用范圍以及轉(zhuǎn)換程度這4個(gè)維度上的對(duì)比和評(píng)估。這些知識(shí)是理解實(shí)現(xiàn)svg轉(zhuǎn)換為png的基礎(chǔ)。

編程方式

svg是矢量圖形語(yǔ)言，canvas提供畫布標(biāo)簽和繪制API；

svg提供各種圖形，濾鏡和動(dòng)畫。canvas只有繪制API，相對(duì)原始。

技術(shù)原理

svg是矢量圖，提供了很多圖形，還有完整的動(dòng)畫，事件機(jī)制，本身可以獨(dú)立使用；

canvas基于像素，是一種HTML元素，只能通過(guò)腳本繪制。

適用范圍

svg被主流瀏覽器和svg閱讀器支持，canvas只有主流瀏覽器支持；

svg適用于大面積渲染區(qū)域的程序和靜態(tài)文檔，如google地圖。canvas適合小范圍圖像密集型場(chǎng)景，如游戲。

轉(zhuǎn)換程度

svg較難以轉(zhuǎn)換成png或者jpeg格式的圖片，不過(guò)canvas較容易。

技巧

假設(shè)主頁(yè)面 app.component.html 面已經(jīng)有一個(gè)component，它的內(nèi)容如下：

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

其中 <app-template></app-template> 是一個(gè)自定義的component，它代表了一個(gè)svg文件，svg的內(nèi)容存放在 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() {
 }
}

當(dāng)然，這個(gè)template.component需要在 app.module.ts 中聲明后才能在 app.component.html 中使用。

注意， #template 是Angular5之后引入的語(yǔ)法，它的全稱是 Template reference variable (#var) ，功能在于引用其所指向的DOM元素。

接下來(lái)要解決的就是如何在component中引用頁(yè)面上的svg元素并將它轉(zhuǎn)化成png格式的圖片。

svg和png圖片轉(zhuǎn)換和下載

1. 獲取元素

Angular中提供一種叫做 ViewChild 的注解，可以幫助我們引用到頁(yè)面中的svg元素，此處就是 #template .

@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. 圖片轉(zhuǎn)換

有了svg元素，接下來(lái)需要考慮的是如何對(duì)其編程。svg和html在瀏覽器的內(nèi)存中都是以DOM樹的形式存在，所以想要對(duì)svg進(jìn)行編程，就得利用svg的DOM interface. 比如說(shuō)我們要獲取 <svg> 元素中的各項(xiàng)屬性，就需要使用 SVGSVGElement編程接口。

svg轉(zhuǎn)換成png并不直接，但是我們知道canvas轉(zhuǎn)換成png非常簡(jiǎn)單。所以有種思路是將svg轉(zhuǎn)換成canvas再轉(zhuǎn)成png. canvas有個(gè) drawImage 函數(shù)，可以將圖片繪制到畫布上，該函數(shù)的輸入源是 HTMLImageElement 或者另外的canvas元素。

也就是說(shuō)，如果我們能把svg轉(zhuǎn)換成 HTMLImageElement 即 <img> ，那么上述過(guò)程就順理成章連成一串了。

第一步是將svg元素轉(zhuǎn)換成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轉(zhuǎn)換成 <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> 轉(zhuǎn)換成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轉(zhuǎn)成png圖片就是上述一句 toDataURL 的調(diào)用。

3. 圖片下載

上面的三個(gè)步驟可以合起來(lái)。

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即可，最后標(biāo)注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下載問(wèn)題

上述過(guò)程看上去順利流暢，但是事實(shí)上一旦圖片過(guò)大，在下載時(shí)，chrome瀏覽器會(huì)拋出網(wǎng)絡(luò)錯(cuò)誤。這是chrome/chormium內(nèi)核存在已久的bug，stackoverflow上給出的繞行方案是用 URL.createObjectURL(blob) 取而代之。

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;
}

對(duì)于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();
}

不過(guò)，因?yàn)闉g覽器的安全警告，url需要經(jīng)過(guò)sanitize才能放行。這在Angular里可以導(dǎo)入DomSanitizer處理。

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

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

原來(lái)的代碼得返回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();
}

原來(lái)的合并操作相應(yīng)修改。

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;
 });
}

值得注意的是原來(lái)的pipe map 改成了 flatMap ，因?yàn)?toPng 返回還是一個(gè)Observable，而不是簡(jiǎn)單的值。

這樣看上去是沒有問(wèn)題的，但是如上面這段代碼的注釋：此處有坑 ?？釉谀睦铮可院笪視?huì)在原則處作深入探討，現(xiàn)在暫且擱置，進(jìn)入下一個(gè)技術(shù)話題。

解決@ViewChild未及時(shí)刷新問(wèn)題

@ViewChild取得頁(yè)面元素可能不是最新的，Angular的Change detection需要時(shí)間完成刷新，所以有很短時(shí)間的延遲。這對(duì)于我的程序而言是不能容忍的。延遲雖不能容忍，但是等待刷新之后再處理圖片還是可以的，所以解決方案就是等待一秒鐘再做圖片轉(zhuǎn)換。

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

終章程序調(diào)用如下。

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

原則

原則是用來(lái)指導(dǎo)實(shí)踐的。

永遠(yuǎn)從問(wèn)題最近的地方開始分析

不要用戰(zhàn)術(shù)上的勤奮掩飾戰(zhàn)略上的懶惰

我個(gè)人對(duì)Angular并不十分熟悉，在實(shí)現(xiàn)svg和png圖片下載功能的過(guò)程中遇到一些坑，這些坑有深有淺，深的直接面向stackoverflow編程繞過(guò)，淺的靠個(gè)人能力解決。只不過(guò)，對(duì)解決這些淺坑的過(guò)度自信卻讓我的思維陷入懶惰，導(dǎo)致了長(zhǎng)時(shí)間的浪費(fèi)。

這里的淺坑就是Javascript臭名昭著的this scope問(wèn)題。

回顧一下上面有坑的代碼，

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();
}

程序運(yùn)行時(shí)，拋出了一個(gè)錯(cuò)誤 cannot read bypassSecurityTrustResourceUrl of undefined.

第一反應(yīng)是我是不是寫錯(cuò)了變量名，再三驗(yàn)證之后發(fā)現(xiàn)沒有寫錯(cuò)。然而這一步其實(shí)完全沒必要，原因在于這些變量都是編輯器輔助補(bǔ)全的。

緊接著，我在 toBlob 方法插入了 console.log(this.sanitizer) ，運(yùn)行后打印的結(jié)果是 undefined 。這能說(shuō)明什么？程序執(zhí)行到這里了？其實(shí)這種做法也沒必要，因?yàn)榭刂婆_(tái)的錯(cuò)誤信息明確表明這段代碼執(zhí)行到了，并且出錯(cuò)了。

然后，我開始思考“難道我寫的Angular的注入方式不對(duì)？”，在遍尋Angular的官方文檔和樣例之后，我確信注入方式?jīng)]有問(wèn)題。這步有可取之處，因?yàn)閷?duì)Angular本身不夠熟悉，查文檔是合理的行為，但是解決思路離目標(biāo)太遠(yuǎn)，程序的問(wèn)題應(yīng)該通過(guò)debug解決。

無(wú)奈之下，我開始懷疑包依賴下載出現(xiàn)問(wèn)題，所以用了最愚蠢的方法，刪除 node_modules ，然后重新下載全部依賴。這是一步耗時(shí)的操作，最大的浪費(fèi)就發(fā)生在這里。我把原來(lái)對(duì)于探索問(wèn)題總結(jié)的基本原則分析得從最近的路開始忘得一干二凈。嘗試無(wú)果之后，我沒有從牛角尖中跳出來(lái)，遺忘了花時(shí)間放空自己原則，還是持續(xù)糾結(jié)，直至最后放棄。

第二天早上，喝了杯咖啡，腦袋清醒了些。在 toPng 方法外，我插入 console.log(this.sanitizer) ，發(fā)現(xiàn)這個(gè)對(duì)象完好地出現(xiàn)在命令行中，此刻突然靈感一現(xiàn)，回憶起幾年前寫過(guò)一篇關(guān)于Javascript作用域的文章，可不就是this指針的問(wèn)題么？

loadImage(svgDataUrl)
 .pipe(flatMap(this.toPng.bind(this))) // 注意此處bind(this)
 .subscribe(url => {
  this.pngUrl = url;
 });

所以用 bind(this) 鎖定this的指向，然后發(fā)現(xiàn)程序運(yùn)行正常，一切就都豁然開朗了。值得一提的是，這只是最便宜的修復(fù)，其實(shí)更可取的做法是寫全函數(shù)體。

loadImage(svgDataUrl)
 .pipe(flatMap(img => this.toPng(img))) // 注意此處完整函數(shù)體
 .subscribe(url => {
  this.pngUrl = url;
 });

回想起來(lái)，為了節(jié)省幾個(gè)單詞，我耗費(fèi)了好多時(shí)間去趟這個(gè)坑，這是不值當(dāng)?shù)?。這其中的問(wèn)題不乏因?yàn)槲覍戇^(guò)很多函數(shù)式代碼，所以傾向簡(jiǎn)潔的表達(dá)；但是更值得警醒的是，在面臨不確定性問(wèn)題時(shí)懶惰的思維方式，用一句套話訓(xùn)斥自己——不要用戰(zhàn)術(shù)上的勤奮掩飾戰(zhàn)略上的懶惰。

我們都知道試驗(yàn)是學(xué)習(xí)的高效方式，但是切不可亂碰亂撞、期待問(wèn)題不翼而飛，我們應(yīng)當(dāng)遵循經(jīng)過(guò)驗(yàn)證的原則切中要害、一擊制勝，切記切記。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: