[[419482]]

背景介紹

我們知道，為了提高企業(yè)研發(fā)效能和對(duì)客戶需求的快速響應(yīng)，現(xiàn)在很多企業(yè)都在著手?jǐn)?shù)字化轉(zhuǎn)型，不僅僅是大廠(阿里，字節(jié)，騰訊，百度)在做低代碼可視化這一塊，很多中小企業(yè)也在做，擁有可視化低代碼相關(guān)技術(shù)背景的程序員也越來受重視。

我最近一直在做數(shù)據(jù)可視化和lowcode/nocode相關(guān)的項(xiàng)目，針對(duì)我自己的工作經(jīng)驗(yàn)和對(duì)lowcode/nocode的探索，也寫了一系列低代碼可視化搭建系列文章，今天我們繼續(xù)來分享可視化相關(guān)的內(nèi)容——可視化圖片編輯器。

在分享過程中，我會(huì)以最近我寫開源的一個(gè)項(xiàng)目Mitu為案例，仔細(xì)拆解它的實(shí)現(xiàn)過程。Mitu主要是輔助H5編輯器 H5-Dooring 做圖像處理用的，大家也可以輕松基于它進(jìn)行二次開發(fā)和擴(kuò)展，變成更強(qiáng)大的圖片編輯器。

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

項(xiàng)目介紹

以上是圖片編輯器的部分演示效果，我們可以通過拖拽重組的方式快速生成我們想要的圖片，也能將圖片保存為模版，以便后期復(fù)用。在項(xiàng)目開發(fā)之前我也設(shè)計(jì)了一個(gè)簡單的原型，保證自己的開發(fā)方向不會(huì)跑偏，大家可以參考一下：

按照我一向的寫作風(fēng)格，我先列一下技術(shù)實(shí)現(xiàn)的大綱，以便大家有選擇且高效率的閱讀和學(xué)習(xí)：

• 可視化編輯器項(xiàng)目搭建和技術(shù)選型
• 圖形庫設(shè)計(jì)
• 屬性編輯器設(shè)計(jì)
• 自定義圖元控制器實(shí)現(xiàn)
• 預(yù)覽功能實(shí)現(xiàn)
• 保存圖片功能實(shí)現(xiàn)
• 模版保存實(shí)現(xiàn)
• 導(dǎo)入模版功能實(shí)現(xiàn)
• 可視化圖片編輯器后期規(guī)劃

好了，話不多說，接下來開始我們的技術(shù)實(shí)現(xiàn)。

技術(shù)實(shí)現(xiàn)

項(xiàng)目搭建和技術(shù)選型

編輯器的實(shí)現(xiàn)思路和技術(shù)棧無關(guān)，這里我采用了 React 來實(shí)現(xiàn)，當(dāng)然大家如果更喜歡 Vue 或者 sveltejs，也是沒問題的，項(xiàng)目整體技術(shù)選型如下：

• umi 可擴(kuò)展的企業(yè)級(jí)前端應(yīng)用框架
• React + Typescript
• Antd 前端組件庫
• fabric 一個(gè)可以簡化 Canvas 程序編寫的庫
• localStorage 本地?cái)?shù)據(jù)存儲(chǔ)

當(dāng)然在項(xiàng)目的實(shí)現(xiàn)過程中還有很多細(xì)節(jié)和思想，接下來我會(huì)一一和大家介紹。如果大家對(duì) fabric 這個(gè)庫不太熟悉也不用擔(dān)心，我會(huì)通過具體功能的實(shí)現(xiàn)來帶大家熟悉這個(gè)庫。

在介紹下面的內(nèi)容之前我們先安裝一下 fabric ，然后初始化一個(gè)畫布。

yarn add fabric 

初始化一個(gè)畫布：

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'); 
        // 創(chuàng)建一個(gè)文本元素 
        const shape = new fabric.IText(nanoid(8), { 
             text: 'H5-Dooring', 
             width : 60, 
             height : 60, 
             fill : '#06c', 
             left: 30, 
             top: 30 
         }) 
        // 將文本元素插入畫布 
        canvasRef.current.add(shape); 
        // 設(shè)置畫布的背景色 
        canvasRef.current.backgroundColor = 'rgba(255,255,255,1)'; 
    }) 
    return <canvas id="canvas" width={600} height={400}></canvas> 
} 

這樣我們就創(chuàng)建好了一個(gè)畫布，并在畫布中插入了一段可編輯可拖拽的文本，如下：

圖形庫設(shè)計(jì)

作為一款圖片編輯器，為了提高使用的靈活性我們還需要提供一些基礎(chǔ)圖形方便我們?cè)O(shè)計(jì)圖片，所以我在編輯器里添加了圖形庫：

主要有如文本，圖片，直線，矩形，圓形，三角形，箭頭，馬賽克，當(dāng)然大家可以根據(jù)自己的需求添加更多的基本圖元。我們?cè)趫D片庫中點(diǎn)擊任意一個(gè)元素即可將其插入畫布，這塊是利用 fabric 的 add 方法，當(dāng)然 fabric 也內(nèi)制了很多基本圖形，我們可以在文檔中參考一下。為了讓圖形插入更有封裝性，我定義了圖形的基本 schema 結(jié)構(gòu)：

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); 
} 

后續(xù)我們添加圖形時(shí)只需要定義 schema 即可，但是需要注意的是 fabric 創(chuàng)建圖形的方式并不都都是統(tǒng)一的，我們需要對(duì)特定圖片的創(chuàng)建進(jìn)行特殊判斷，比如直線路徑：

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 
      }) 
} 

當(dāng)然我們也可以用 switch 來對(duì)不同情況進(jìn)行不同處理，這樣我們就實(shí)現(xiàn)了一個(gè)基本圖片庫。

屬性編輯器設(shè)計(jì)

屬性編輯器主要是用來對(duì)圖形屬性進(jìn)行配置的，比如填充顏色，描邊顏色，描邊寬度，目前我主要定義了這3個(gè)維度，大家也可以基于此繼續(xù)擴(kuò)展更多的可編輯屬性，類似于 H5-Dooring 的組件屬性配置面板。

我們可以在編輯器右側(cè)的屬性編輯區(qū)控制圖形的屬性，因?yàn)閷傩阅壳爸挥?個(gè)，我就直接硬編碼寫上去了，大家也可以用動(dòng)態(tài)渲染的方式來實(shí)現(xiàn)。需要注意的是我們?cè)趺粗牢覀冞x中的是那個(gè)組件呢? 好在 fabric 提供了一系列 api 幫助我們更好的控制元素對(duì)象，這里我們用 getActiveObject 方法拿到當(dāng)前選中的元素，具體實(shí)現(xiàn)代碼如下：

// ... 
// 定義基礎(chǔ)屬性 
const [attrs, setAttrs] = useState({ 
    fill: '#0066cc', 
    stroke: '', 
    strokeWidth: 0, 
  }) 
// 更新選中的元素 
const updateAttr = (type: 'fill' | 'stroke' | 'strokeWidth' | 'imgUrl', val:string | number) => { 
    setAttrs({...attrs, [type]: val}) 
    // 獲取當(dāng)前選中元素對(duì)象 
    const obj = canvasRef.current.getActiveObject() 
    // 設(shè)置元素屬性 
    obj.set({...attrs}) 
    // 重新渲染 
    canvasRef.current.renderAll(); 
} 

屬性編輯器的樣式實(shí)現(xiàn)這里我就不一一介紹了，都比較基礎(chǔ)，我們來看一下編輯項(xiàng)的基本結(jié)構(gòu)：

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

自定義圖元控制器實(shí)現(xiàn)因?yàn)槟J(rèn)情況下 fabric 沒有提供刪除按鈕和邏輯，所以我們需要自己二次擴(kuò)展，恰好 fabric 提供了自定義擴(kuò)展的方法，接下來我們就一起自定義一個(gè)刪除按鈕并實(shí)現(xiàn)刪除邏輯。

具體實(shí)現(xiàn)代碼如下：

// 刪除按鈕 
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 
}); 

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

預(yù)覽功能實(shí)現(xiàn)

預(yù)覽功能我主要是利用原生 canvas 的 toDataURL 方法來生成base64的數(shù)據(jù)，然后賦值給 img 標(biāo)簽。還有一個(gè)細(xì)節(jié)需要注意的是如果我們?cè)陬A(yù)覽之前畫布仍然有選中狀態(tài)的元素，那么控制點(diǎn)也會(huì)被截取出來，如下：

這樣對(duì)用戶體驗(yàn)非常不好，我們需要在預(yù)覽時(shí)看到一張純粹的圖片，我的方案是在預(yù)覽前取消畫布所有元素的選中狀態(tài)，可以用 fabric 實(shí)例的 discardActiveObject() 方法取消激活狀態(tài)，然后更新畫布即可，具體實(shí)現(xiàn)邏輯如下：

// 1. 取消畫布所有元素的選中狀態(tài) 
canvasRef.current.discardActiveObject() 
canvasRef.current.renderAll(); 
 
// 2. 將當(dāng)前畫布轉(zhuǎn)化為圖片的base64地址 
const img = document.getElementById("canvas"); 
const src = (img as HTMLCanvasElement).toDataURL("image/png"); 
 
// 3. 設(shè)置元素url,顯示預(yù)覽彈窗 
setImgUrl(src) 
setIsShow(true) 

預(yù)覽效果展示：

保存圖片功能實(shí)現(xiàn)

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

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 對(duì)象的 createObjectURL 和 revokeObjectURL 方法，兩年前我也在我的文章中分享過對(duì)應(yīng)的實(shí)現(xiàn)，感興趣的可以參考一下。下載的效果如下：

模版保存實(shí)現(xiàn)

在設(shè)計(jì)圖片編輯器的過程中我們也要考慮保存用戶的資產(chǎn)，比如做的比較好的圖片可以保存為模版，以便下次復(fù)用，所以我在編輯器里還實(shí)現(xiàn)的簡單的模版保存和使用的功能。我們先看一下效果：

我們?cè)谘菔局锌梢钥吹奖４鏋槟０嬷髸?huì)自動(dòng)同步到左側(cè)的模版列表中，我們下次創(chuàng)作時(shí)可以直接導(dǎo)入模版進(jìn)行二次創(chuàng)作。以下是實(shí)現(xiàn)的邏輯圖：

由上圖可以發(fā)現(xiàn)我們保存模版不僅僅是保存圖片，還需要保存圖片對(duì)應(yīng)的 json schema 數(shù)據(jù)，之所以要保存 json schema 是為了當(dāng)用戶切換到對(duì)應(yīng)的模版之后可以保證模版的每個(gè)元素都可以還原，類似于我們最熟悉的 PSD 源文件。fabric 提供了序列化畫布的方法 toDatalessJSON()，我們?cè)诒４婺０娴臅r(shí)候只要把序列化后的 json 和圖片一起保存即可，這里方便處理我暫時(shí)存在 localStorage 中，大家也可以使用大容量本地化存儲(chǔ)方案 indexedDB，我之前也基于 indexedDB 封裝了開箱即用的緩存庫 xdb，大家可以直接拿來使用。

• xdb | 基于promise封裝且支持過期時(shí)間的開箱即用的indexedDB緩存庫

保存模版的具體實(shí)現(xiàn)如下：

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) 
  } 

導(dǎo)入模版功能實(shí)現(xiàn)

導(dǎo)入模版的本質(zhì)是反序列化 Json Schema，在研究 fabric 的過程中發(fā)現(xiàn)了其可以直接加載 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)) 

然后我們就可以根據(jù)保存的模版列表，動(dòng)態(tài)切換模版了：

后期規(guī)劃這款圖片編輯器我已經(jīng)在 github 開源了，大家可以基于次開發(fā)更強(qiáng)大的圖片編輯器。

本文轉(zhuǎn)載自微信公眾號(hào)「 趣談前端」