sketchpad.js代码

console.log('Sketchpad load');
class Sketchpad {
    /** fabric实例 */
    instance = null;
    /** 当前所在图层的id */
    currentLayer = '';
    /** 画布宽度 */
    width = 600;
    /** 画布高度 */
    height = 600
    /** 事件订阅 */
    listeners = {
        /**
         * 图层内容变化时的回调
         * @param {string} id 图层id
         * @param {base64} data 图层内容的base64格式
         */
        change: (id, data) => {}
    }
    constructor(id, listeners) {
        this.instance = new fabric.Canvas(id);
        this.width = this.instance.width;
        this.height = this.instance.height;
        this.instance.isDrawingMode = true;
        this.listeners.change = listeners.change
        this.instance.on('object:added', ((options) => {
                if (options.target.type === 'group') return;
                const groups = this.instance.getObjects()
                groups.forEach(v => {
                    if (v.layerId === this.currentLayer  && v.type === 'group') {
                        v.addWithUpdate(options.target);
                        this.instance.remove(options.target);
                        this.listeners.change(v.layerId, v.toDataURL({
                            width: this.width,
                            height: this.height
                        }))
                    }
                })
        }))
        console.log('Sketchpad init')
    }
    /** 添加图层 */
    addLayer(id) {
        const group = new fabric.Group([], {
            width: this.width,
            height: this.width,
        });
        // 在这里增加一个自定义属性 layerId ，用于区分图层
        group.layerId = id
        this.instance.add(group)
        this.currentLayer = id;
            this.listeners.change(id, group.toDataURL({
                width: this.width,
                height: this.height
            }))
    }
    /** 改变图层的显示/隐藏 */
    changeLayerVisible(id) {
        const groups = this.instance.getObjects()
        groups.forEach(v => {
            if (v.layerId === id && v.type === 'group') {
                v.visible = !v.visible;
                this.instance.renderAll() // 刷新画布，改变group的visible属性，必须通过刷新画布，才能应用新属性值
            }
        })
    }
    /** 选择要操作的图层 */
    changeCurrentLayer(id) {
        this.currentLayer = id
    }
    /** 删除图层 */
    deleteLayer(id) {
        const groups = this.instance.getObjects()
        groups.forEach(v => {
            if (v.layerId === id && v.type === 'group') {
                this.instance.remove(v)
                this.instance.renderAll() // 刷新画布
            }
        })
    }
    /** 获取画布数据，以img标签可以识别的base64格式 */
    getImage() {
        return this.instance.toDataURL()
    }
}

将以上这两个文件代码直接复制粘贴到编辑器里，然后再去打包个fabric.js也放进编辑器里，就可以运行啦