需求：通過動態變化的圖生成一個gif圖提供下載。

實現方案：
1.可通過服務端生成對應gif，然後前端請求下載
2.前端自己實現生成gif圖片，自行下載

採用方案：
前端實現方式，於是在網上找各種相關的幾款元件調研，均有利弊，推薦兩款好用並且穩定的元件：
1 html2canvas.js 官網：http://html2canvas.hertzen.com/
2 gif.js 官網：https://jnordberg.github.io/gif.js/

下面具體記錄下方案2的實現過程，邏輯拆分為3步：

1.html元素生成base64點陣圖片
2.生成的圖片物件轉化為gif動態圖
3.下載gif圖片

話不多說，直接上主要程式碼：

html2canvas有node包版本的

import html2canvas
from 'html2canvas';

但gif.js暫未發現node包版本，可採用cdn方式引入

<script type="text/javascript"
src="https://imgss.github.io/demo/gif/gif.js"></script>
//要轉換為圖片的dom物件
var element = document.querySelector('.real-map');
//要顯示圖片的img標籤
var image = document.querySelector('#imgaaa');
var imageccc = document.querySelector('#imgccc');

html2canvas(element,{allowTaint: true}).then(function(canvas) {

var imageData = canvas.toDataURL(1);
image.src = imageData;

var arr=[
image,
imageccc
];

setTimeout(function(){

//呼叫gif物件方法
var gif = new window.GIF({
workers: 2,
quality: 10,
workerScript:'https://imgss.github.io/demo/gif/gif.worker.js'
});

//遍歷圖片物件
arr.map(item=>{
gif.addFrame(item, {delay: 1000});
});

gif.on('finished', function(blob) {

//下載動作
var el = document.createElement('a');
el.href = URL.createObjectURL(blob);
el.download = 'demo-name'; //設定下載檔名稱
document.body.appendChild(el);
var evt = document.createEvent("MouseEvents");
evt.initEvent("click", false, false);
el.dispatchEvent(evt);
document.body.removeChild(el);

});

gif.render();

},1000)


}
);