從零開發一款圖片編輯器Mitu

徐小夕發表於2021-08-18
MIT

⚠️ 本文為掘金社群首發簽約文章，未獲授權禁止轉載

背景介紹

我們知道，為了提高企業研發效能和對客戶需求的快速響應，現在很多企業都在著手數字化轉型，不僅僅是大廠(阿里，位元組，騰訊，百度)在做低程式碼視覺化這一塊，很多中小企業也在做，擁有視覺化低程式碼相關技術背景的程式設計師也越來受重視。

我最近一直在做資料視覺化和lowcode/nocode相關的專案，針對我自己的工作經驗和對lowcode/nocode的探索，也寫了一系列低程式碼視覺化搭建系列文章，今天我們繼續來分享視覺化相關的內容——視覺化圖片編輯器。

在分享過程中，我會以最近我寫開源的一個專案Mitu為案例，仔細拆解它的實現過程。Mitu主要是輔助H5編輯器 H5-Dooring 做影像處理用的，大家也可以輕鬆基於它進行二次開發和擴充套件，變成更強大的圖片編輯器。

在文章末尾我會附上 github 地址 和 demo 地址，方便大家學習和體驗。接下來我就來帶大家介紹和剖析一下這款開源圖片編輯器 Mitu。

專案介紹

mitu-dooring.gif

以上是圖片編輯器的部分演示效果，我們可以通過拖拽重組的方式快速生成我們想要的圖片，也能將圖片儲存為模版，以便後期複用。在專案開發之前我也設計了一個簡單的原型，保證自己的開發方向不會跑偏，大家可以參考一下：

image.png

按照我一向的寫作風格，我先列一下技術實現的大綱，以便大家有選擇且高效率的閱讀和學習：

  • 視覺化編輯器專案搭建和技術選型
  • 圖形庫設計
  • 屬性編輯器設計
  • 自定義圖元控制器實現
  • 預覽功能實現
  • 儲存圖片功能實現
  • 模版儲存實現
  • 匯入模版功能實現
  • 視覺化圖片編輯器後期規劃

好了，話不多說，接下來開始我們的技術實現。

技術實現

image.png

專案搭建和技術選型

編輯器的實現思路和技術棧無關，這裡我採用了 React 來實現，當然大家如果更喜歡 Vue 或者 sveltejs，也是沒問題的，專案整體技術選型如下：

  • umi 可擴充套件的企業級前端應用框架
  • React + Typescript
  • Antd 前端元件庫
  • fabric 一個可以簡化 Canvas 程式編寫的庫
  • localStorage 本地資料儲存

當然在專案的實現過程中還有很多細節和思想，接下來我會一一和大家介紹。如果大家對 fabric 這個庫不太熟悉也不用擔心，我會通過具體功能的實現來帶大家熟悉這個庫。

在介紹下面的內容之前我們先安裝一下 fabric ，然後初始化一個畫布。

yarn add fabric
複製程式碼

初始化一個畫布：

import { fabric } from "fabric";
import { nanoid } from 'nanoid';
import { useEffect, useState, useRef } from 'react';

export default function IndexPage() {
    const canvasRef = useRef<any>(null);
    useEffect(() => {
        canvasRef.current = new fabric.Canvas('canvas');
        // 建立一個文字元素
        const shape = new fabric.IText(nanoid(8), {
             text: 'H5-Dooring',
             width : 60,
             height : 60,
             fill : '#06c',
             left: 30,
             top: 30
         })
        // 將文字元素插入畫布
        canvasRef.current.add(shape);
        // 設定畫布的背景色
        canvasRef.current.backgroundColor = 'rgba(255,255,255,1)';
    })
    return <canvas id="canvas" width={600} height={400}></canvas>
}
複製程式碼

這樣我們就建立好了一個畫布，並在畫布中插入了一段可編輯可拖拽的文字，如下：

image.png

圖形庫設計

作為一款圖片編輯器，為了提高使用的靈活性我們還需要提供一些基礎圖形方便我們設計圖片，所以我在編輯器裡新增了圖形庫：

image.png

主要有如文字，圖片，直線，矩形，圓形，三角形，箭頭，馬賽克，當然大家可以根據自己的需求新增更多的基本圖元。我們在圖片庫中點選任意一個元素即可將其插入畫布，這塊是利用 fabric 的 add 方法，當然 fabric 也內製了很多基本圖形，我們可以在文件中參考一下。為了讓圖形插入更有封裝性，我定義了圖形的基本 schema 結構：

const baseShapeConfig = {
  IText: {
    text: 'H5-Dooring',
    width : 60,
    height : 60,
    fill : '#06c'
  },
  Triangle: {
    width: 100,
    height: 100,
    fill: '#06c'
  },
  Circle: {
    radius: 50,
    fill: '#06c'
  },
  Rect: {
    width : 60,
    height : 60,
    fill : '#06c'
  },
  Line: {
    width: 100,
    height: 1,
    fill: '#06c'
  },
  Arrow: {},
  Image: {},
  Mask: {}
}
複製程式碼

這樣我們插入圖形的方法就可以這樣寫：

type ElementType = 'IText' | 'Triangle' | 'Circle' | 'Rect' | 'Line' | 'Image' | 'Arrow' | 'Mask'

const insertShape = (type:ElementType) => {
    shape = new fabric[type]({
        ...baseShapeConfig[type], 
        left: size[0] / 3,
        top: size[1] / 3
    })
    canvasRef.current.add(shape);
}
複製程式碼

後續我們新增圖形時只需要定義 schema 即可，但是需要注意的是 fabric 建立圖形的方式並不都都是統一的，我們需要對特定圖片的建立進行特殊判斷，比如直線路徑：

if(type === 'Line') {
      shape = new fabric.Path('M 0 0 L 100 0', {
        stroke: '#ccc', 
        strokeWidth: 2,
        objectCaching: false,
        left: size[0] / 3,
        top: size[1] / 3
      })
}
複製程式碼

當然我們也可以用 switch 來對不同情況進行不同處理，這樣我們就實現了一個基本圖片庫。

chrome-capture (9).gif

屬性編輯器設計

屬性編輯器主要是用來對圖形屬性進行配置的，比如填充顏色，描邊顏色，描邊寬度，目前我主要定義了這3個維度，大家也可以基於此繼續擴充套件更多的可編輯屬性，類似於 H5-Dooring 的元件屬性配置皮膚。

chrome-capture (10).gif

我們可以在編輯器右側的屬性編輯區控制圖形的屬性，因為屬性目前只有3個，我就直接硬編碼寫上去了，大家也可以用動態渲染的方式來實現。需要注意的是我們怎麼知道我們選中的是那個元件呢? 好在 fabric 提供了一系列 api 幫助我們更好的控制元素物件，這裡我們用 getActiveObject 方法拿到當前選中的元素，具體實現程式碼如下：

// ...
// 定義基礎屬性
const [attrs, setAttrs] = useState({
    fill: '#0066cc',
    stroke: '',
    strokeWidth: 0,
  })
// 更新選中的元素
const updateAttr = (type: 'fill' | 'stroke' | 'strokeWidth' | 'imgUrl', val:string | number) => {
    setAttrs({...attrs, [type]: val})
    // 獲取當前選中元素物件
    const obj = canvasRef.current.getActiveObject()
    // 設定元素屬性
    obj.set({...attrs})
    // 重新渲染
    canvasRef.current.renderAll();
}
複製程式碼

屬性編輯器的樣式實現這裡我就不一一介紹了，都比較基礎，我們來看一下編輯項的基本結構：

<span className={styles.label}>描邊寬度: </span>
<InputNumber size="small" min={0} value={attrs.strokeWidth}  onChange={(v) => updateAttr('strokeWidth', v)} />
複製程式碼

自定義圖元控制器實現

因為預設情況下 fabric 沒有提供刪除按鈕和邏輯，所以我們需要自己二次擴充套件，恰好 fabric 提供了自定義擴充套件的方法，接下來我們就一起自定義一個刪除按鈕並實現刪除邏輯。

image.png

具體實現程式碼如下：

// 刪除按鈕
const deleteIcon = "data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3Csvg version='1.1' id='Ebene_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' width='595.275px' height='595.275px' viewBox='200 215 230 470' xml:space='preserve'%3E%3Ccircle style='fill:%23F44336;' cx='299.76' cy='439.067' r='218.516'/%3E%3Cg%3E%3Crect x='267.162' y='307.978' transform='matrix(0.7071 -0.7071 0.7071 0.7071 -222.6202 340.6915)' style='fill:white;' width='65.545' height='262.18'/%3E%3Crect x='266.988' y='308.153' transform='matrix(0.7071 0.7071 -0.7071 0.7071 398.3889 -83.3116)' style='fill:white;' width='65.544' height='262.179'/%3E%3C/g%3E%3C/svg%3E";

// 刪除方法
function deleteObject(eventData, transform) {
    const target = transform.target;
    const canvas = target.canvas;
    canvas.remove(target);
    canvas.requestRenderAll();
}

// 渲染icon
function renderIcon(ctx, left, top, styleOverride, fabricObject) {
      const size = this.cornerSize;
      ctx.save();
      ctx.translate(left, top);
      ctx.rotate(fabric.util.degreesToRadians(fabricObject.angle));
      ctx.drawImage(img, -size/2, -size/2, size, size);
      ctx.restore();
}

// 全域性新增刪除按鈕
fabric.Object.prototype.controls.deleteControl = new fabric.Control({
      x: 0.5,
      y: -0.5,
      offsetY: -32, // 自定義距元素的偏移距離, 也可以定義offsetX
      cursorStyle: 'pointer',
      mouseUpHandler: deleteObject,
      render: renderIcon,
      cornerSize: 24
});
複製程式碼

這樣我們就實現了自定義元素控制，我們也可以按照類似的方法實現自定義的控制元件。效果如下：

chrome-capture (11).gif

預覽功能實現

預覽功能我主要是利用原生 canvas 的 toDataURL 方法來生成base64的資料，然後賦值給 img 標籤。還有一個細節需要注意的是如果我們在預覽之前畫布仍然有選中狀態的元素，那麼控制點也會被擷取出來，如下：

image.png

這樣對使用者體驗非常不好，我們需要在預覽時看到一張純粹的圖片，我的方案是在預覽前取消畫布所有元素的選中狀態，可以用 fabric 例項的 discardActiveObject() 方法取消啟用狀態，然後更新畫布即可，具體實現邏輯如下：

// 1. 取消畫布所有元素的選中狀態
canvasRef.current.discardActiveObject()
canvasRef.current.renderAll();

// 2. 將當前畫布轉化為圖片的base64地址
const img = document.getElementById("canvas");
const src = (img as HTMLCanvasElement).toDataURL("image/png");

// 3. 設定元素url,顯示預覽彈窗
setImgUrl(src)
setIsShow(true)
複製程式碼

預覽效果展示：

chrome-capture (12).gif

儲存圖片功能實現

儲存圖片其實和預覽功能很像，唯一不同的是我們需要把圖片下載到本地，那麼我主要是用純前端的方式實現圖片下載，大家也可以用自己熟悉的前端下載方案，接下來貼一下我的方案實現：

function download(url:string, filename:string, cb?:Function) {
  return fetch(url).then(res => res.blob().then(blob => {
    let a = document.createElement('a');
    let url = window.URL.createObjectURL(blob);
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
    cb && cb()
  }))
}
複製程式碼

主要是用的window 的 URL 物件的 createObjectURL 和 revokeObjectURL 方法，兩年前我也在我的文章中分享過對應的實現，感興趣的可以參考一下。下載的效果如下：

image.png

模版儲存實現

在設計圖片編輯器的過程中我們也要考慮儲存使用者的資產，比如做的比較好的圖片可以儲存為模版，以便下次複用，所以我在編輯器裡還實現的簡單的模版儲存和使用的功能。我們先看一下效果：

chrome-capture (13).gif

我們在演示中可以看到儲存為模版之後會自動同步到左側的模版列表中，我們下次創作時可以直接匯入模版進行二次創作。以下是實現的邏輯圖：

image.png

由上圖可以發現我們儲存模版不僅僅是儲存圖片，還需要儲存圖片對應的 json schema 資料，之所以要儲存 json schema 是為了當使用者切換到對應的模版之後可以保證模版的每個元素都可以還原，類似於我們最熟悉的 PSD 原始檔。fabric 提供了序列化畫布的方法 toDatalessJSON()，我們在儲存模版的時候只要把序列化後的 json 和圖片一起儲存即可，這裡方便處理我暫時存在 localStorage 中，大家也可以使用大容量本地化儲存方案 indexedDB，我之前也基於 indexedDB 封裝了開箱即用的快取庫 xdb，大家可以直接拿來使用。

儲存模版的具體實現如下：

const handleSaveTpl = () => {
    const val = tplNameRef.current.state.value
    const json = canvasRef.current.toDatalessJSON()
    const id = nanoid(8)
    // 存json
    const tpls = JSON.parse(localStorage.getItem('tpls') || "{}")
    tpls[id] = {json, t: val};
    localStorage.setItem('tpls', JSON.stringify(tpls))
    // 存圖片
    canvasRef.current.discardActiveObject()
    canvasRef.current.renderAll()
    const imgUrl = getImgUrl()
    const tplImgs = JSON.parse(localStorage.getItem('tplImgs') || "{}")
    tplImgs[id] = imgUrl
    localStorage.setItem('tplImgs', JSON.stringify(tplImgs))
    // 更新模版列表
    setTpls((prev:any) => [...prev, {id, t: val}])
    setIsTplShow(false)
  }
複製程式碼

匯入模版功能實現

匯入模版的本質是反序列化 Json Schema，在研究 fabric 的過程中發現了其可以直接載入 json 渲染圖形序列，所以我們可以直接將上文儲存的 json 直接載入到畫布：

// 1.載入前清空畫布
canvasRef.current.clear();
// 2.重置畫布背景色
canvasRef.current.backgroundColor = 'rgba(255,255,255,1)';
// 3. 渲染json
canvasRef.current.loadFromJSON(tpls[id].json, canvasRef.current.renderAll.bind(canvasRef.current))
複製程式碼

然後我們就可以根據儲存的模版列表，動態切換模版了：

chrome-capture (14).gif

後期規劃

這款圖片編輯器我已經在 github 開源了，大家可以基於次開發更強大的圖片編輯器，對於圖片編輯器的後期規劃，我也評估了幾個可行的方向，如果大家感興趣也可以聯絡我參與到專案中來。

後期規劃如下：

  • 撤銷重做
  • 畫布背景設定
  • 豐富圖形元件庫
  • 圖片濾鏡配置
  • 模組化介面
  • 解析PSD

如果大家對視覺化搭建或者低程式碼/零程式碼感興趣，也可以參考我往期的文章或者在評論區交流你的想法和心得，歡迎一起探索前端真正的技術。

github: mitu-editor | 輕量級且可擴充套件的圖片/圖形編輯器解決方案
首發：掘金技術社群
作者：徐小夕
專欄：低程式碼視覺化
公眾號: 趣談前端

往期文章

相關文章