我經常思考，在面臨一個不確定問題時，以往的經驗究竟有無輔助作用？如果把經驗遺忘會產生何種程度的影響？在上下求索未果之后，如何找回曾經的感覺，恰若靈光一現？凡此種種，終是要思考總結的，這篇文章便是我的反思之作。
本篇文章會記述一些實用的svg與png之間的轉換技巧并強調一種思考原則。
概述
技巧
原則
永遠從問題最近的地方開始分析
理解下面這些內容的前提是具備一些Angular的編程基礎，要求大致處于能自定義component的水平。
假意需求
當我說“假意需求”的時候，其實是將解決方案視作眼下的需求，目的是方便理解。在這個項目中，我們需要把頁面上的已經存在的svg元素轉換成可下載的svg和png鏈接。svg是矢量圖，適合打印成海報；而png清晰度有限，用作在線預覽。
背景知識
下面是svg(Scalable Vector Graphics)和canvas在編程方式、技術原理、使用范圍以及轉換程度這4個維度上的對比和評估。這些知識是理解實現svg轉換為png的基礎。
編程方式
svg是矢量圖形語言，canvas提供畫布標簽和繪制API；
svg提供各種圖形，濾鏡和動畫。canvas只有繪制API，相對原始。
技術原理
svg是矢量圖，提供了很多圖形，還有完整的動畫，事件機制，本身可以獨立使用；
canvas基于像素，是一種HTML元素，只能通過腳本繪制。
適用范圍
svg被主流瀏覽器和svg閱讀器支持，canvas只有主流瀏覽器支持；
svg適用于大面積渲染區域的程序和靜態文檔，如google地圖。canvas適合小范圍圖像密集型場景，如游戲。
轉換程度
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元素。
接下來要解決的就是如何在component中引用頁面上的svg元素并將它轉化成png格式的圖片。
svg和png圖片轉換和下載
1. 獲取元素
Angular中提供一種叫做 ViewChild 的注解，可以幫助我們引用到頁面中的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. 圖片轉換
有了svg元素，接下來需要考慮的是如何對其編程。svg和html在瀏覽器的內存中都是以DOM樹的形式存在，所以想要對svg進行編程，就得利用svg的DOM interface. 比如說我們要獲取 <svg> 元素中的各項屬性，就需要使用 SVGSVGElement編程接口 。
svg轉換成png并不直接，但是我們知道canvas轉換成png非常簡單。所以有種思路是將svg轉換成canvas再轉成png. canvas有個 drawImage 函數，可以將圖片繪制到畫布上，該函數的輸入源是 HTMLImageElement 或者另外的canvas元素。
也就是說，如果我們能把svg轉換成 HTMLImageElement 即 <img> ，那么上述過程就順理成章連成一串了。
第一步是將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下載問題
上述過程看上去順利流暢，但是事實上一旦圖片過大，在下載時，chrome瀏覽器會拋出網絡錯誤。這是chrome/chormium內核存在已久的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;}對于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();}不過，因為瀏覽器的安全警告，url需要經過sanitize才能放行。這在Angular里可以導入DomSanitizer處理。
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未及時刷新問題
@ViewChild取得頁面元素可能不是最新的，Angular的Change detection需要時間完成刷新，所以有很短時間的延遲。這對于我的程序而言是不能容忍的。延遲雖不能容忍，但是等待刷新之后再處理圖片還是可以的，所以解決方案就是等待一秒鐘再做圖片轉換。
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))
原則
原則是用來指導實踐的。
永遠從問題最近的地方開始分析
不要用戰術上的勤奮掩飾戰略上的懶惰
我個人對Angular并不十分熟悉，在實現svg和png圖片下載功能的過程中遇到一些坑，這些坑有深有淺，深的直接面向stackoverflow編程繞過，淺的靠個人能力解決。只不過，對解決這些淺坑的過度自信卻讓我的思維陷入懶惰，導致了長時間的浪費。
這里的淺坑就是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.
第一反應是我是不是寫錯了變量名，再三驗證之后發現沒有寫錯。然而這一步其實完全沒必要，原因在于這些變量都是編輯器輔助補全的。
緊接著，我在 toBlob 方法插入了 console.log(this.sanitizer) ，運行后打印的結果是 undefined 。這能說明什么？程序執行到這里了？其實這種做法也沒必要，因為控制臺的錯誤信息明確表明這段代碼執行到了，并且出錯了。
然后，我開始思考“難道我寫的Angular的注入方式不對？”，在遍尋Angular的官方文檔和樣例之后，我確信注入方式沒有問題。這步有可取之處，因為對Angular本身不夠熟悉，查文檔是合理的行為，但是解決思路離目標太遠，程序的問題應該通過debug解決。
無奈之下，我開始懷疑包依賴下載出現問題，所以用了最愚蠢的方法，刪除 node_modules ，然后重新下載全部依賴。這是一步耗時的操作，最大的浪費就發生在這里。我把原來對于探索問題總結的基本原則 分析得從最近的路開始 忘得一干二凈。嘗試無果之后，我沒有從牛角尖中跳出來，遺忘了 花時間放空自己 原則，還是持續糾結，直至最后放棄。
第二天早上，喝了杯咖啡，腦袋清醒了些。在 toPng 方法外，我插入 console.log(this.sanitizer) ，發現這個對象完好地出現在命令行中，此刻突然靈感一現，回憶起幾年前寫過一篇關于Javascript作用域的文章，可不就是this指針的問題么？
loadImage(svgDataUrl) .pipe(flatMap(this.toPng.bind(this))) // 注意此處bind(this) .subscribe(url => { this.pngUrl = url; });所以用 bind(this) 鎖定this的指向，然后發現程序運行正常，一切就都豁然開朗了。值得一提的是，這只是最便宜的修復，其實更可取的做法是寫全函數體。
loadImage(svgDataUrl) .pipe(flatMap(img => this.toPng(img))) // 注意此處完整函數體 .subscribe(url => { this.pngUrl = url; });回想起來，為了節省幾個單詞，我耗費了好多時間去趟這個坑，這是不值當的。這其中的問題不乏因為我寫過很多函數式代碼，所以傾向簡潔的表達；但是更值得警醒的是，在面臨不確定性問題時懶惰的思維方式，用一句套話訓斥自己――不要用戰術上的勤奮掩飾戰略上的懶惰。
我們都知道試驗是學習的高效方式，但是切不可亂碰亂撞、期待問題不翼而飛，我們應當遵循經過驗證的原則切中要害、一擊制勝，切記切記。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
