https://github.com/CodeHole7/fabricjs-image-editor-origin

javascript image editor based on fabric.js
https://github.com/CodeHole7/fabricjs-image-editor-origin

canvas canvas2d fabricjs image-editor javascript jquery webgl

Last synced: 5 months ago
JSON representation

javascript image editor based on fabric.js

• Host: GitHub
• URL: https://github.com/CodeHole7/fabricjs-image-editor-origin
• Owner: CodeHole7
• License: mit
• Created: 2020-11-26T22:37:12.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-10T02:32:13.000Z (about 1 year ago)
• Last Synced: 2024-08-10T13:03:13.696Z (8 months ago)
• Topics: canvas, canvas2d, fabricjs, image-editor, javascript, jquery, webgl
• Language: JavaScript
• Homepage: https://fabricjs-image-editor-f62330.netlify.app/
• Size: 127 KB
• Stars: 211
• Watchers: 4
• Forks: 72
• Open Issues: 1
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-canvas - fabricjs-image-editor-origin - image-editor-f62330.netlify.app/)] - fabric.js javascript image editor.   (Libraries / Canvas draw)

README

        
# Fabric.JS Image Editor

This image editor allows users to draw default shapes, pen-drawing, line, curve + straight path, text, png/jpg/svg images on browser.

[Demo!](https://fabricjs-image-editor-f62330.netlify.app)

![Positioning Example](screenshots/editor.jpg)

## Dependency

  * jQuery v3.5.1

  * jQuery spectrum-colorpicker2

  * Fabric.js v3.6.3

## Initialize

```javascript

  // define toolbar buttons to show

  // if this value is undefined or its length is 0, default toolbar buttons will be shown

  const buttons = [

    'select',

    'shapes',

    // 'draw',

    // 'line',

    // 'path',

    // 'textbox',

    // 'upload',

    // 'background',

    'undo',

    'redo',

    'save',

    'download',

    'clear'

  ];

  // define custom shapes

  // if this value is undefined or its length is 0, default shapes will be used

  const shapes = [

    ``,

    ``,

    ``

  ];

  var imgEditor = new ImageEditor('#image-editor-container', buttons, shapes);

```

## Save/Load Editor status

```javascript

  let status = imgEditor.getCanvasJSON();

  imgEditor.setCanvasStatus(status);

```