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

我经常思考，在面临一个不确定问题时，以往的经验究竟有无辅助作用？如果把经验遗忘会产生何种程度的影响？在上下求索未果之后，如何找回曾经的感觉，恰若灵光一现？凡此种种，终是要思考总结的，这篇文章便是我的反思之作。

本篇文章会记述一些实用的svg与png之间的转换技巧并强调一种思考原则。

概述

技巧

svg和png图片转换和下载 解决chrome data url too large下载问题 解决@ViewChild未及时刷新问题

原则

永远从问题最近的地方开始分析

理解下面这些内容的前提是具备一些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元素。