如何使用Angular实现SVG和PNG图片的下载功能？

本文共计2912个文字，预计阅读时间需要12分钟。

我经常思考，在面对不确定的问题时，以往的经验是否真的有辅助作用？如果将经验遗忘，会产生何种程序的影响？在寻求未果之后，如何找回曾经的感悟，让灵感重现？种种疑问。

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

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

概述

技巧

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

原则

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

理解下面这些内容的前提是具备一些Angular的编程基础，要求大致处于能自定义component的水平。

假意需求

当我说“假意需求”的时候，其实是将解决方案视作眼下的需求，目的是方便理解。在这个项目中，我们需要把页面上的已经存在的svg元素转换成可下载的svg和png链接。svg是矢量图，适合打印成海报；而png清晰度有限，用作在线预览。

背景知识

下面是svg(Scalable Vector Graphics)和canvas在编程方式、技术原理、使用范围以及转换程度这4个维度上的对比和评估。这些知识是理解实现svg转换为png的基础。

编程方式

svg是矢量图形语言，canvas提供画布标签和绘制API；

svg提供各种图形，滤镜和动画。canvas只有绘制API，相对原始。