前言

筆者之前利于業余時間開發了一個gif動圖生成平臺, 具體開發背景我也在上一篇文章手把手教你擼一個能生成抖音風格動圖的gif制作平臺中介紹過了, 我們今天繼續來實現該平臺, gif動圖平臺的實現方式比較將完全用前端的手段來實現, 所以大家在接下來的內容中會發現很多有意思的前端插件。 接下來我們看看主要要實現的功能點:

• 純前端實現圖片上傳和預覽。
• 基于react-beautiful-dnd實現元素自由拖動排序。
• 使用javascript實現生成uuid的函數。
• 使用file-saver實現前端下載文件。
• 使用gif.js實現基于圖片生成gif動圖。
• 控制gif動圖播放速度的方法。

正文

還是按照筆者一貫的風格, 在實現功能之前我們先看看實現后的預覽效果： 

 由效果圖可以看出我們只需要上傳圖片序列, 就可以動態生成gif動圖, 并且可以右鍵保存gif文件. 我們還可以控制動圖的播放速度和排列順序, 以便更靈活的配置動圖. 如果大家想親自體驗,可以用以下方式直達:

1、基本頁面搭建

在開始之前我們先要理清基本的頁面結構, 筆者劃分為如下結構：

 由上圖可知一共劃分為3個區, 我們可以使用任何我們熟悉的第三方組件去實現, 筆者這里采用antd來開發. 技術方案圖如下：

 以上就是筆者分析的大致實現目標, 也是筆者常用的開發導圖, 目標導向對開發效率的提升還是非常有幫助的, 筆者建議大家也可以在實現較復雜的業務需求之前先思考方案,再動手敲代碼.

2、實現圖片上傳預覽功能

對于第一步驟的界面我想大家都能實現, 我們現在具體一步步落實到功能實現. 我們先來實現一下圖片的上傳預覽. 由于我們這里沒有借助服務器, 完全由前端的方式實現圖片預覽, 所以我們需要用到FileReader對象.

FileReader 對象允許Web應用程序異步讀取存儲在用戶計算機上的文件（或原始數據緩沖區）的內容，使用 File 或 Blob 對象指定要讀取的文件或數據。

其中File對象可以是來自用戶在一個input元素上選擇文件后返回的FileList對象,也可以來自拖放操作生成的DataTransfer對象,還可以是來自在一個HTMLCanvasElement上執行mozGetAsFile()方法后返回結果。接下來我們看看如何利用antd的Upload組件和FileReader實現圖片預覽, 具體代碼如下:

const uploadprops = useMemo(() => ({
    name: 'file',
    multiple: true,
    listType:"picture-card",
    onPreview: () => {},
    showUploadList: false,
    beforeUpload(file, fileList) {
      // 解析并提取excel數據
      let reader = new FileReader();
      reader.onload = function(e) {
        let url = e.target.result;
        setImageList(prev [...prev, {id: uuid(6, 16), url}])
      };
      reader.readAsDataURL(file);
    }
  }), []);

uploadprops即為Upload組件需要的屬性配置, 通過代碼我們可以知道, 我們在beforeUpload階段攔截了圖片, 通過FileReader對象的readAsDataURL

<img src={item.url} id={item.id} alt=""/>

在代碼中我們將圖片數據存儲到一個對象里, 對象包括由uuid函數生成的唯一id和url組成, 至于為何生成唯一id, 這里筆者將在下文中介紹。

3. 使用react-beautiful-dnd實現元素自由拖動排序

大家在研究過H5-Dooring | 一款強大的開源H5編輯器 后就會發現react-dnd這個模塊很熟悉, 因為該開源編輯器就使用了react-dnd實現的組件拖拽和組件數據傳遞的. 筆者在社區又發現了一個比較有意思的拖拽庫react-beautiful-dnd, 同樣可以實現優雅平滑的智能拖拽效果, 基本案例如下： 

在深入研究該庫之后筆者發現可以直接用來實現圖片組件的拖拽并排序的功能, 所以筆者直接使用該庫來封裝我們的圖片組件. 由于該庫的使用有詳細的案例代碼,這里筆者就不做詳細介紹了, 只需要提一點就是為了實現排序, 我們需求確定每一個元素的唯一標識, 所以這里筆者想到了uuid, 所以渲染圖片的數組數據結構可以長這樣：

const imgList = [
    {
        id: uuid(6, 10),
        url: '圖片的base64位地址'
    }
]

為了限制圖片上傳過大, 我們還可以在Upload組件的beforeUpload階段限制圖片上傳大小, 這個根據使用而定. uuid的實現方式很多, 筆者這里送上一個實現方式：

// 生成uuid
function uuid(len: number, radix: number) {
  let chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split('');
  let uuid = [],
    i;
  radix = radix || chars.length;

  if (len) {
    for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
  } else {
    let r;
    uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-';
    uuid[14] = '4';

    for (i = 0; i < 36; i++) {
      if (!uuid[i]) {
        r = 0 | (Math.random() * 16);
        uuid[i] = chars[i === 19 ? (r & 0x3) | 0x8 : r];
      }
    }
  }

  return uuid.join('');
}

實現后的效果如下圖：

至于刪除圖片的方法也很簡單, 通過圖片的唯一id去數組里使用數組的fiter方法刪除即可。

4、控制gif動圖播放速度的方法

控制gif的播放速度方法我們可以用slider組件實現, gif.js也提供速度的接口, 我們只需要實現速度值的計算即可. 我們都知道滑塊滑動越長, 數值越大, 與之對應的 速度越大, 時間間隔越小, 所以我們在前端層設計的展示效果如下: 

 滑塊最大值筆者設置為20, 最小值為1, 對應的當滑塊設置為最大值時, gif的播放速度最大, 每張圖片停留間隔為0.1s, 滑塊為最小值1時, gif播放速度最小, 每張圖片停留2s, 根據這個規律我們得到了如下規律： 

具體代碼如下：

const handleSpeed = (v) => {
  let realSpeed = (20 - v + 1) / 10;
  setSpeed(realSpeed)
}

當然大家可以用更簡單的方式來實現, slider組件也提供反向取值的操作。

5、基于圖片序列生成gif動圖

基于圖片序列生成gif的方式也很簡單, 我們通過批量獲取圖片拖動區的圖片, 組裝成數組傳給gif.js即可. 我們直接看效果：

6. 使用file-saver實現前端下載文件

我們只需要把生成的gif圖片, 傳遞給file-saver模塊中, 使用其提供的API即可下載文件, 這里在之前文章筆者也介紹過了, 這里直接上代碼:

import { saveAs } from 'file-saver';
// resultImage為gif生成的gif圖片對象
saveAs(resultImage, `${uuid(6, 10)}.gif`);

本文轉載自微信公眾號「趣談前端」，可以通過以下二維碼關注。轉載本文請聯系趣談前端公眾號。