๐Ÿž๐ŸŽจ Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

Overview

Toast UI ImageEditor

Full featured image editor using HTML5 Canvas. It's easy to use and provides powerful filters.

github version npm version license PRs welcome code with hearth by NHN lerna

Packages

6 -20-2018 17-45-54

๐Ÿšฉ Table of Contents

๐ŸŒ Browser Support

Chrome Chrome IE Internet Explorer Edge Edge Safari Safari Firefox Firefox
Yes 10+ Yes Yes Yes

๐Ÿ’ช Has full features that stick to the basic.

Photo manipulation

  • Crop, Flip, Rotation, Drawing, Shape, Icon, Text, Mask Filter, Image Filter

Integration function

  • Download, Image Load, Undo, Redo, Reset, Delete Object(Shape, Line, Mask Image...)
Crop Flip Rotation Drawing Shape
2018-06-04 4 33 16 2018-06-04 4 40 06 2018-06-04 4 43 02 2018-06-04 4 47 40 2018-06-04 4 51 45
Icon Text Mask Filter
2018-06-05 2 06 29 2018-06-05 2 14 36 2018-06-05 2 20 46 2018-06-05 2 27 10

Powerful filter function

  • Grayscale, Invert, Sepia, Blur Sharpen, Emboss, RemoveWhite, Brightness, Noise, Pixelate, ColorFilter, Tint, Multiply, Blend
Grayscale Noise Emboss Pixelate
grayscale noise emboss pixelate
Sepia Sepia2 Blend-righten Blend-diff Invert
sepia sepia2 blend-righten blend-diff invert
Multifly Tint Brightness Remove-white Sharpen
multifly tint brightness remove-white sharpen

๐Ÿ™† Easy to apply the size and design you want

Can be used everywhere.

  • Widely supported in browsers including IE10.

  • Option to support various display sizes. (allows you to use the editor features on your web pages at least over 550 * 450 sizes)

    2018-06-04 5 35 25

Nice default & Fully customizable Themes

  • Has a white and black theme, and you can modify the theme file to customize it.
  • Has an API so that you can create your own instead of the built-in.
black - top black - bottom white - left white - right
2018-06-05 1 41 13 2018-06-05 1 40 24 2018-06-05 1 41 48 2018-06-05 1 42 27

๐ŸŽจ Features

  • Load image to canvas
  • Undo/Redo (With shortcut)
  • Crop
  • Flip
  • Rotation
  • Free drawing
  • Line drawing
  • Shape
  • Icon
  • Text
  • Mask Filter
  • Image Filter

๐Ÿ”ง Pull Request Steps

TOAST UI products are open source, so you can create a pull request(PR) after you fix issues. Run npm scripts and develop yourself with the following process.

Setup

Fork develop branch into your personal repository. Clone it to local computer. Install node modules. Before starting development, you should check to haveany errors.

$ git clone https://github.com/{your-personal-repo}/[[repo name]].git
$ cd [[repo name]]
$ npm install

Pull Request

Before PR, check to test lastly and then check any errors. If it has no error, commit and then push it!

For more information on PR's step, please see links of Contributing section.

๐Ÿ“™ Documents

๐Ÿ’ฌ Contributing

๐Ÿ”ฉ Dependency

๐Ÿž TOAST UI Family

๐Ÿš€ Used By

๐Ÿ“œ License

MIT LICENSE

Comments
  • How to add custom menu buttons

    How to add custom menu buttons

    Version

    3.4.0

    Development Environment

    Windows 10

    Current Behavior

    All menu buttons are predefined menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'text', 'filter'],

    Question

    How can I add custom menu buttons? For example 'save'?

    Question inactive 
    opened by GEMI 24
  • feat: change css to allow color picker selector to show (refs #634)

    feat: change css to allow color picker selector to show (refs #634)

    Please check if the PR fulfills these requirements

    • [x] It's submitted to right branch according to our branching model
    • [x] It's right issue type on title
    • [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes/features)
    • [ ] Docs have been added/updated (for bug fixes/features)
    • [x] It does not introduce a breaking change or has description for the breaking change

    Description

    This pull request changes the css so that the color slider from the color picker shows up. It would make it easier for people to select colors. I'm not sure why this was hidden. I had to add some css to make it show up correctly.

    Before:

    color-before

    After:

    color-after

    inactive 
    opened by adeptflax 20
  • After free drawing and rotate the canvas,the drawing don't set to the right position.

    After free drawing and rotate the canvas,the drawing don't set to the right position.

    Version

    lastest master

    Development Environment

    Google Chrome Canary

    Current Behavior

    1. select draw mode,draw a random line on the canvas.
    2. use rotate tool
    3. the freedrawing line don't show on the right place,but others position of shape is correct.

    Expected Behavior

    I want the freedrawing line stay on the right place after rotate.And wonder why only freedrawing mode will cause the problem.Is any different between freedrawing and other line or shape?

    opened by cocoroise 17
  • feat: Added ability to allow developers to change colour palette preset

    feat: Added ability to allow developers to change colour palette preset

    Added ability to allow developers to change colour palette preset feat: Customize default colour palette (#481)

    feat: #481

    Please check if the PR fulfills these requirements

    • [x] It's submitted to right branch according to our branching model
    • [x] It's right issue type on title
    • [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [x] The commit message follows our guidelines
    • [x] Tests for the changes have been added (for bug fixes/features)
    • [x] Docs have been added/updated (for bug fixes/features)
    • [x] It does not introduce a breaking change or has description for the breaking change

    Description

    Added ability to allow developers to change colour palette preset

    When constructing the ImageEditor a developer can now pass through their own colour palette if they don't want to use the preset one.


    Thank you for your contribution to TOAST UI product. ๐ŸŽ‰ ๐Ÿ˜˜ โœจ

    inactive 
    opened by marcodafonseca 16
  • Draw tool issue #1 - strokes change its position by itself

    Draw tool issue #1 - strokes change its position by itself

    Version

    3.5.3 and 3.6.0

    Development Environment

    Chrome, Windows

    Current Behavior

    1. Go to http://nhn.github.io/tui.image-editor/latest/tutorial-example01-includeUi/
    2. Select Draw tool.
    3. Draw first stoke.
    4. When starting to draw second stroke - first stroke moved.
    5. When starting to draw third stroke - second stroke moved. etc. See screen capture attached. draw_tool_issue_1 draw_tool_issue_1.zip

    Expected Behavior

    Previous strokes shouldn't change its position when drawing some more ones.

    Bug 
    opened by onadein 16
  • Can't resolve 'Fabric/fabric.require' in node_modules.

    Can't resolve 'Fabric/fabric.require' in node_modules.

    Module not found: Error: Can't resolve 'fabric/dist/fabric.require' in '.\node_modules\tui-image-editor\dist'

    I've already looked at former issues with fabric, these are not fixing the problem.

    Version

    "tui-image-editor": "^3.2.2" Angular 6.1.0 Node 8.11 Tried with fabric 1.6.7 and 2.4.2

    // Write example code
    instance = new ImageEditor(document.querySelector('#tui-image-editor'),
            { cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 }
            });
    
    Enhancement 
    opened by Fridthjof 15
  • fix: respect presetRatio on new cropzone

    fix: respect presetRatio on new cropzone

    Please check if the PR fulfills these requirements

    • [x] It's submitted to right branch according to our branching model
    • [ ] It's right issue type on title
    • [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [x] The commit message follows our guidelines
    • [x] Tests for the changes have been added (for bug fixes/features)
    • [ ] Docs have been added/updated (for bug fixes/features)
    • [x] It does not introduce a breaking change or has description for the breaking change

    Description

    Problem (how it is now):

    • in crop mode
    • choose a preset ratio (eg. 16/9)
    • draw/make a new cropzone
    • the aspect ratio is not restricted to the chosen preset ratio (not like when resizing the cropzone by the corners)

    This PR fixes that problem. When you now draw/make a new cropzone while having selected a preset ratio, that preset ratio is now respected.

    opened by adzlocal 14
  • feat: add mosaic brush in menu

    feat: add mosaic brush in menu

    Please check if the PR fulfills these requirements

    • [x] It's submitted to right branch according to our branching model
    • [x] It's right issue type on title
    • [x] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes/features)
    • [ ] Docs have been added/updated (for bug fixes/features)
    • [x] It does not introduce a breaking change or has description for the breaking change

    Description

    When I used tui.iamge-editor, I found that it did not have the feat of mosaic brush. This feat is very important to us, so I implemented it myself. However, this PR does not contain SVG icons. I hope a partner can provide a set of SVG icons. You can mark it as help wanted when you receive this PR. This PR is just missing the SVG iconใ€‚

    opened by jkcs 14
  • All buttons of the Tui image editor are disabled and don't work when i use LoadImageUrl or LoadImageFile to load a specific image programmaticaly in Angular

    All buttons of the Tui image editor are disabled and don't work when i use LoadImageUrl or LoadImageFile to load a specific image programmaticaly in Angular

    Describe the bug When i use loadImageURL of the ImageEditor Object, the options button (Crop, Shape, and all of them) are disabled and i can't set do any action on the loaded image.

    To Reproduce Steps to reproduce the behavior:

    1. Create an angular project and add the Tui Image editor module.
    2. Open the the tui image editor in a modal or in the page using typescript
    3. Load an image programmatically on the initialization of the Tui image editor
    4. and try to click on any of actions buttons

    Expected behavior Actions Button click work.

    Code import ImageEditor = require('tui-image-editor'); const instance = new ImageEditor(document.querySelector('#tui-image-editor'), { includeUI: { loadImage: { path: window.URL.createObjectURL(this.image), name: 'event' }, menu: ['shape', 'crop'], menuBarPosition: 'bottom' }, cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 } });

    Desktop:

    • OS: Windows 10
    • Browser: chrome

    Capture dโ€™รฉcran 2020-10-30 102529

    Bug 
    opened by PierreKoung 14
  • Error after installation

    Error after installation

    Hi After the npm install --save tui-image-editor The Fabric Js can't found Http and Https modules.

    I use: Node js: 8.11.1, NPM 6.1.0, Angular 6.

    Installed for Fabric: https://www.npmjs.com/package/@types/fabric

    Error code: ERROR in 'node_modules/fabric/dist/fabric.require.js Module not found: Error: Can't resolve 'http' in 'node_modules\fabric\dist' ERROR in 'node_modules/fabric/dist/fabric.require.js' Module not found: Error: Can't resolve 'https' in 'node_modules\fabric\dist'

    Import from Node modules: import * as ImageEditor from 'tui-image-editor';

    Call the editor: const instance = new ImageEditor(document.querySelector('#tui-image-editor'), { cssMaxWidth: 700, cssMaxHeight: 500, selectionStyle: { cornerSize: 20, rotatingPointOffset: 70 } }); ` Any idea what the problem?

    Question 
    opened by beyondtheobservableuniverse 14
  • feat: Limit max width/height of resize to the image to disallow upscaling

    feat: Limit max width/height of resize to the image to disallow upscaling

    Please check if the PR fulfills these requirements

    • [x] It's submitted to right branch according to our branching model
    • [x] It's right issue type on title
    • [ ] When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)
    • [x] The commit message follows our guidelines
    • [ ] Tests for the changes have been added (for bug fixes/features)
    • [ ] Docs have been added/updated (for bug fixes/features)
    • [x] It does not introduce a breaking change or has description for the breaking change

    Description

    Hi all, in this PR I propose a change to the resize module. Currently the sliders allow resizing up to 4088px (Any particular reason or just arbitrary?); after this patch the images will not be able to be resized over 100% to disallow upscaling. Not only does the application become laggy when resizing the image above its original dimensions but there is also little to no benefit for it.

    Of course this could also be an option instead of being the default forced behavior but I'm open to discussion.

    opened by maldoinc 12
  • Undo a resized straight line object not working

    Undo a resized straight line object not working

    Describe the bug If we draw a straight line then resize it and try undo -> object does not go back to the original size. As far as I know this only happen on LINE shape. RECT, TRIANGLE, CIRCLE work fine

    To Reproduce Steps to reproduce the behavior:

    1. Draw an straight line
    2. Resize the line
    3. Undo change
    4. See error

    Expected behavior Straight line object should go back to the original size

    Video (https://drive.google.com/file/d/10uuHwOYzwVs01j8KuLvJCxtn33p4eY8B/view)

    Desktop (please complete the following information):

    • OS: [e.g. iOS]
    • Browser [e.g. chrome, safari]
    • Version [e.g. 22]
    Bug 
    opened by dongup 0
  • chore(deps): bump loader-utils from 1.4.0 to 1.4.2

    chore(deps): bump loader-utils from 1.4.0 to 1.4.2

    Bumps loader-utils from 1.4.0 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • ์ด๋ฏธ์ง€ ์žฌ ์—…๋กœ๋“œ ํ›„ ๋ฉ”๋‰ด ์ด๋™ ์‹œ ์ด ์ „ ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋กœ ๋ณ€๊ฒฝ๋˜๋Š” ์˜ค๋ฅ˜

    ์ด๋ฏธ์ง€ ์žฌ ์—…๋กœ๋“œ ํ›„ ๋ฉ”๋‰ด ์ด๋™ ์‹œ ์ด ์ „ ์ด๋ฏธ์ง€ ํฌ๊ธฐ๋กœ ๋ณ€๊ฒฝ๋˜๋Š” ์˜ค๋ฅ˜

    ์•ˆ๋…•ํ•˜์„ธ์š” ! tui image-editor ๋””์ž์ธ๋„ ๊น”๋”ํ•˜๊ณ  ์ž˜ ์‚ฌ์šฉ์ค‘์— ์žˆ์Šต๋‹ˆ๋‹ค.

    ํ…Œ์ŠคํŠธ ๊ณผ์ •์—์„œ ๋ฒ„๊ทธ๋ฅผ ๋ฐœ๊ฒฌํ–ˆ๋Š”๋ฐ ํ™•์ธ ๋ถ€ํƒ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค.

    1. ๊ธฐ๋ณธ ํŠค๋ฆฝ ์‚ฌ์ง„ ์ด๋ฏธ์ง€์—์„œ resize ๋ฉ”๋‰ด๋กœ ์ด๋™ image image

    2. ์ด๋™ ํ›„ ๋‹ค๋ฅธ ์ด๋ฏธ์ง€ ์—…๋กœ๋“œ image

    3. ๋‹ค๋ฅธ ๋ฉ”๋‰ด๋กœ ์ด๋™ ์‹œ ์ด์ „ ์ด๋ฏธ์ง€์ธ ํŠค๋ฆฝ ์‚ฌ์ง„ ์‚ฌ์ด์ฆˆ๊ฐ€ ์ ์šฉ๋˜์–ด ์ด๋ฏธ์ง€ ๊นจ์ง ํ˜„์ƒ ๋ฐœ์ƒ image

    ์ €๋„ ์ด ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ•ด์•ผ๋ผ์„œ ํ”ผ๋“œ๋ฐฑ ๋ถ€ํƒ๋“œ๋ฆฌ๊ฒ ์Šต๋‹ˆ๋‹ค. ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค

    Bug 
    opened by SM11187 0
  • After load to image loadImageFromURL how to clear all disable Reset button

    After load to image loadImageFromURL how to clear all disable Reset button

    Summary A clear and concise description of what the question is.

    Screenshots If applicable, add screenshots to help explain your question.

    Version Write the version of the imageEditor you are currently using.

    Additional context Add any other context about the problem here.

    Question 
    opened by 4501104211 1
  • Crop not persisted

    Crop not persisted

    Describe the bug If you apply a Crop, the cropped Image is not persisted between Tools.

    To Reproduce Steps to reproduce the behavior:

    1. Go to Crop
    2. Click on Square
    3. Click on Save
    4. Click on Resize
    5. Size and Image isn't updated

    Expected behavior Image should be updated to cropped Version between Tools.

    Bug 
    opened by Rame0ne 1
Releases(v3.15.3)
  • v3.15.3(Apr 25, 2022)

    Fix

    • update the range component to not trigger changes immediately after typing (PR #646)
    • improve applyFilter parameter type (PR #687)
    • respect preset ratio on new cropzone (PR #700)

    Env

    • update tui-code-snippet (PR #688)
    Source code(tar.gz)
    Source code(zip)
  • v3.15.2(Oct 20, 2021)

    Fix

    • tui-code-snippet is included in the tui-code-snippet package. (#664)
      • tui-code-snippet is not included in the tui-image-editor package, so errors occur during compilation.
    Source code(tar.gz)
    Source code(zip)
  • v3.15.1(Oct 20, 2021)

    Fix

    • fix 'px' labels on the resize feature while using menuBarPosition: "left|right" (PR #644)

    Env

    • update babel, webpack and their options
      • Fabric has been included in the bundle. Now, when using the tui-image-editor, there is no need to load fabric separately.
    Source code(tar.gz)
    Source code(zip)
  • v3.15.0(Jul 28, 2021)

  • v3.14.3(Apr 8, 2021)

  • v3.14.2(Mar 25, 2021)

    Fix

    • unable to press space key in the text box outside the image-editor. [fix #556] (PR #563)
    • not work space key when vue image-editor component loaded. [fix #560] (PR #564)
    Source code(tar.gz)
    Source code(zip)
  • v3.14.1(Mar 19, 2021)

  • v3.14.0(Mar 8, 2021)

    Feat

    • add zoom feature (PR #553)
      • zoom-in feature
        • zoom-in
        • Drag or click to zoom-in!
      • zoom-out feature
        • zoom-out
        • Click zoom-out to return to the previous zoom level!
      • hand feature
        • hand
        • Use the hand tool to move the canvas!
          • Or use space bar to turn on/off hand
    Source code(tar.gz)
    Source code(zip)
  • v3.13.0(Mar 5, 2021)

    Feat

    • add history feature (PR #544)
      • แ„’แ…ชแ„†แ…งแ†ซ-แ„€แ…ตแ„…แ…ฉแ†จ-2021-03-08-แ„‹แ…ฉแ„’แ…ฎ-5 10 37

    Fix

    • error when undo after text added [#521] (PR #545)
    • group selection object position when undo, redo in API direct page [#522] (PR #546)
    • fire object modified event when cropzone changed [#519] (PR #547)
    • resize cropzone with ratio by pressing shift key (PR #548)
    Source code(tar.gz)
    Source code(zip)
  • v3.12.0(Mar 5, 2021)

    Feat

    • apply mono-repo (PR #524)

    Fix

    • not work filter in direct api example [#388] (PR #525)
    • classname error when clicking in the gap [#411] (PR #526)
    • not occur text changed event [#387, #419] (PR #527)
    • disappear image when apply crop [#359] (PR #528)
    Source code(tar.gz)
    Source code(zip)
  • v3.11.0(Dec 9, 2020)

    feat

    • add undo stack of object resize/move (#358)
    • update fabric.js version to 4.2.0 (#461)
    • add icon drawing mode (#74, #441)

    Enhancement

    • apply prettier (PR #493)

    bug-fix

    • not apply text line-through decoration (#453)
    • not apply setBrush API when LINE_DRAWING (#409, #418)
    Source code(tar.gz)
    Source code(zip)
  • v3.10.1(Nov 16, 2020)

  • v3.10.0(Jul 21, 2020)

    Added

    • Add filter type with shape fill option
    imageEditor.setDrawingShape('rect', {
       fill: {
           type: 'filter',
           filter: [{blur: 0.3}, {pixelate: 20}]
       },
       width: 100,
       height: 200
    });
    
    imageEditor.addShape('rect', {
       fill: {
           type: 'filter',
           filter: [{blur: 0.3}, {pixelate: 20}]
       },
       width: 100,
       height: 200,
       left: 100,
       top: 100,
       stroke: 'blue',
       strokeWidth: 3
    });
    
    • Added an option to draw an arrow shape with the line drawing option.
    imageEditor.startDrawingMode('LINE_DRAWING', {
        width: 10,
        color: 'rgba(255,0,0,0.5)',
        arrowType: {
            tail: 'chevron' // triangle
        }
    });
    
    • Added autofocus option for addText api.

    bug-fix

    • Fixed minor bugs in text objects (fix #262 #109).
    Source code(tar.gz)
    Source code(zip)
  • v3.10.0-alpha.0(Jul 9, 2020)

  • v3.9.0(Mar 11, 2020)

    Enhancement

    • Added object rotation event listener for user reference (#322)
    • Added copy and paste function (fixed #63) (#355)
    • Improved svg to show built-in svg, no need to set file path. (#347)

    Bug fixop

    • Fixed bug where UI code was not handled well when running destroy api. (fixed #334) (#332)
    • Missing tooltips for redo, undo, reset, delete, and delete-all (fixed #266) (#330)
    • Rotation breaks image aspect ratio (fixed #340) (#355)
    • Fixed cropzone distortion. (fixed #101) (#349)
    Source code(tar.gz)
    Source code(zip)
  • v3.8.0(Feb 12, 2020)

    Enhancement

    • In the UI included option, it has been improved to change the input text value of the slider UI to change the value more accurately (#183)
    • Improved behavior so that 'undoStack' is not reflected while dragging from silder UI with UI included option (#310)
    • Added isSilent (not included in undoStack) parameter for changeShape, changeTextStyle, applyFilter api (#310)
    • After setting the Cropzone area by specifying a ratio, the ratio is maintained and resized when resizing (#124)

    Bug fix

    • Fixed incorrect reporting of 'objectMoved` event listener when moving cropzone (fixed #269)
    • Fixed a bug in the undo run for each image editor menu (fixed #315).
      • Fixed a bug where undoing the correct previous value would not work when undoing commands executed with the isSilent parameter of rotate and setAngle api. (fixed #307)
    Source code(tar.gz)
    Source code(zip)
  • v3.7.3(Jan 22, 2020)

    bug-fix

    • Fixed npm installation not installing properly on node.js stable version. (fixed #298)
    • Fixed bug where the shape would not show while dragging to draw a 'shape' in certain areas. (fixed #297)
    • Fixed the problem that the text underline function does not work (fixed #221)
    • Fixed bug where saving crop guides with images if saving before cropping was applied. (fixed #237)
    • Fixed a bug where getCropzone api returned null in images of certain resolutions. (fixed #114)
    • Fixed a bug where the behavior was changed to move during crop region resize. (fixed #118)
    Source code(tar.gz)
    Source code(zip)
  • v3.7.2(Dec 10, 2019)

    bug-fix

    • Fixed bug where the checkbox menu of the filter was not displayed when "white theme" was applied.
    • Fixed a style issue where the "menuBar" would cover the entire editing area when the "menuBarPosition" position was set to "top".
    Source code(tar.gz)
    Source code(zip)
  • v3.7.1(Dec 4, 2019)

    bug-fix

    • Fixed incorrect behavior of filter checkbox when creating more than one instance. (fix #274)
    • Fixes a problem where curve positions move to the wrong place after drawing a free drawing line. (fix #228)
    Source code(tar.gz)
    Source code(zip)
  • v3.7.0(Aug 2, 2019)

  • v3.5.2(Mar 20, 2019)

  • v3.5.0(Feb 15, 2019)

    Bug fix

    • #127 - fix: Initialize UI defaultIcons without initial selected menu option. (fix #115)
    • #128 - fix: Ensure reject on loadImage failed (fix #116)
    • #139 - fix: Modify title of filter subMenu name "Grayscale" (fix #138)
    • #145 - fix: Change loadButton tag to div (fix #137)
    • #146 - fix: Add shape on mouseClick without mouseMove (fix #144)
    • #148 - fix: Change 'tui-image-editor' export type to default export (fix #142)
    • #149 - fix: Do not fire "changeShow" event when ColorPicker's color not changed (fix #131)
    Source code(tar.gz)
    Source code(zip)
  • v3.4.0(Jan 11, 2019)

    Added

    • Added declaration file(./index.d.ts) for Typescript support.
    • Added Localization feature includeUi.locale
    var locale_ru_RU = { // override default English locale to your custom
        'Crop': 'ะžะฑะทั€ะตะทะฐั‚ัŒ', // as result default English inscription will be translated into Russian
        'Delete-all': 'ะฃะดะฐะปะธั‚ัŒ ะฒัั‘'
        // etc...
    };
    // Image editor
    var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
         includeUI: {
             ...
             locale: locale_ru_RU, // key-value object with localization
             ...
         },
         ...
    });
    
    Source code(tar.gz)
    Source code(zip)
  • v3.3.0(Dec 7, 2018)

  • v3.2.2(Oct 23, 2018)

    Fixed

    • Fixed a bug where the image load button function does not work properly when the default image is not registered.

    Changed

    • Improved ga hostname collection method. (From tui-code-snippet version v1.4.0)
    Source code(tar.gz)
    Source code(zip)
  • v3.2.1(Oct 4, 2018)

    Changed

    • Improved the design details of the includeUI.
      • Changed the fine spacing and color of icons, checkboxes, and text in menu and submenu.

    Fix

    • Fixed JavaScript error after adding custom icon.
    • Fixed a bug where the backspace key does not work when editing text elements.
    Source code(tar.gz)
    Source code(zip)
  • v3.2.0(Jul 12, 2018)

    New

    • Added includeUI option
      • includeUI option - The default UI provided by the image editor is now available.
        • includeUI.loadImage - Can specify a default target image.
        • includeUI.menu - Of the nine editing functions, only the desired functions can be included in the UI.
        • includeUI.initMenu - Can specify the menu to be used when starting up.
        • includeUI.menuBarPosition - Can set the menu bar position of the UI.
        • includeUI.theme - Can apply or customize the default theme included in the example.
    var blackTheme = require('./js/theme/black-theme.js');
    var instance = new ImageEditor(document.querySelector('#tui-image-editor'), {
         includeUI: {
             loadImage: {
                 path: 'img/sampleImage.jpg',
                 name: 'SampleImage'
             },
             theme: blackTheme, // or whiteTheme
             menu: ['crop', 'flip', 'rotate', 'draw', 'shape', 'icon', 'text', 'mask', 'filter'],
             initMenu: 'filter',
             menuBarPosition: 'bottom'
         },
         ...
    });
    
    • Added Theme
      • Provides white and black theme with basic design.
      • Themes can be created and modified for customization.

    | properties | description | | --- | --- | | 'common.bi.image' | Brand icon image | | 'common.bisize.width' | Icon image width | | 'common.bisize.height' | Icon Image Height | | 'common.backgroundImage' | Background image | | 'common.backgroundColor' | Background color | | 'common.border' | Full area border style | | 'header.backgroundImage' | header area background | | 'header.backgroundColor' | header area background color | | 'header.border' | header area border style | | 'loadButton.backgroundColor' | load button background color | | 'loadButton.border' | load button border style | | 'loadButton.color' | load button foreground color | | 'loadButton.fontFamily' | load button font type | | 'loadButton.fontSize' | load button font size | | 'downloadButton.backgroundColor' | download button background color | | 'downloadButton.border' | download button border style | | 'downloadButton.color' | download button foreground color | | 'downloadButton.fontFamily' | download button font type | | 'downloadButton.fontSize' | download button font size | | 'menu.normalIcon.path' | Menu default icon svg bundle file path | | 'menu.normalIcon.name' | Menu default icon svg bundle name | | 'menu.activeIcon.path' | Menu active icon svg bundle file path | | 'menu.activeIcon.name' | Menu active icon svg bundle name | | 'menu.iconSize.width' | Menu icon Size Width | | 'menu.iconSize.height' | Menu Icon Size Height | | 'submenu.backgroundColor' | Sub-menu area background color | | 'submenu.partition.color' | Submenu partition line color | | 'submenu.normalIcon.path' | Submenu default icon svg bundle file path | | 'submenu.normalIcon.name' | Submenu default icon svg bundle name | | 'submenu.activeIcon.path' | Submenu active icon svg bundle file path | | 'submenu.activeIcon.name' | Submenu active icon svg bundle name | | 'submenu.iconSize.width' | Submenu icon Size Width | | 'submenu.iconSize.height' | Submenu Icon Size Height | | 'submenu.normalLabel.color' | Submenu default label color | | 'submenu.normalLabel.fontWeight' | Sub Menu Default Label Font Thickness | | 'submenu.activeLabel.color' | Submenu active label color | | 'submenu.activeLabel.fontWeight' | Submenu active label Font thickness | | 'checkbox.border' | Checkbox border style | | 'checkbox.backgroundColor' | Checkbox background color | | 'range.pointer.color' | range control pointer color | | 'range.bar.color' | range control bar color | | 'range.subbar.color' | range control subbar color | | 'range.value.color' | range number box font color | | 'range.value.fontWeight' | range number box font thickness | | 'range.value.fontSize' | range number box font size | | 'range.value.border' | range number box border style | | 'range.value.backgroundColor' | range number box background color | | 'range.title.color' | range title font color | | 'range.title.fontWeight' | range title font weight | | 'colorpicker.button.border' | colorpicker button border style | | 'colorpicker.title.color' | colorpicker button title font color |

    Source code(tar.gz)
    Source code(zip)
  • v3.1.0(Apr 13, 2018)

    Features

    • 07f826b Feature: send hostname

    Documentation

    • 3ceb81e Docs: change file link and edit title of examples
    • 6f1c685 Docs: update year of license
    • 7f8ce91 Docs: update link of example on README file
    • 2c37314 Docs: add install via CDN guide
    Source code(tar.gz)
    Source code(zip)
  • v3.0.2(Sep 13, 2017)

  • v3.0.1(Aug 31, 2017)

Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser

Fabric.js Fabric.js is a framework that makes it easy to work with HTML5 canvas element. It is an interactive object model on top of canvas element. I

Fabric.js 23.4k Nov 30, 2022
Demonstration of liquid effect on HTML Canvas using Matter.js and SVG Filters (Blur + Contrast)

Canvas Liquid Effect Demonstration of liquid (or gooey) effect on HTML Canvas using Matter.js and SVG Filters (feGaussianBlur and feColorMatrix). DEMO

Utkarsh Verma 73 Nov 9, 2022
HTML5 Canvas Gauge. Tiny implementation of highly configurable gauge using pure JavaScript and HTML5 canvas. No dependencies. Suitable for IoT devices because of minimum code base.

HTML Canvas Gauges v2.1 Installation Documentation Add-Ons Special Thanks License This is tiny implementation of highly configurable gauge using pure

Mykhailo Stadnyk 1.5k Nov 25, 2022
React + Canvas = Love. JavaScript library for drawing complex canvas graphics using React.

React Konva React Konva is a JavaScript library for drawing complex canvas graphics using React. It provides declarative and reactive bindings to the

konva 4.9k Nov 23, 2022
Konva.js is an HTML5 Canvas JavaScript framework that extends the 2d context by enabling canvas interactivity for desktop and mobile applications.

Konva Konva is an HTML5 Canvas JavaScript framework that enables high performance animations, transitions, node nesting, layering, filtering, caching,

konva 8.5k Nov 22, 2022
Canvas rendering library, Sprite manipulation of canvas

el-canvas Canvas rendering library, Sprite manipulation of canvas hello world <div id="app"><div></div></div> yarn add elem-canvas or npm i

null 15 Apr 13, 2022
๐Ÿ“ธ Generate image using HTML5 canvas and SVG

egami โ†’ image README | ไธญๆ–‡ๆ–‡ๆกฃ Generate image using HTML5 canvas and SVG Fork from html-to-image Installation pnpm pnpm add egami npm npm i egami Usage i

weng 7 Nov 21, 2022
Free Bootstrap 5 Admin and Dashboard Template that comes with all essential dashboard components, elements, charts, graph and application pages. Download now for free and use with personal or commercial projects.

PlainAdmin - Free Bootstrap 5 Dashboard Template PlainAdmin is a free and open-source Bootstrap 5 admin and dashboard template that comes with - all e

PlainAdmin 232 Nov 13, 2022
The Swiss Army Knife of Vector Graphics Scripting โ€“ Scriptographer ported to JavaScript and the browser, using HTML5 Canvas. Created by @lehni & @puckey

Paper.js - The Swiss Army Knife of Vector Graphics Scripting If you want to work with Paper.js, simply download the latest "stable" version from http:

Paper.js 13.4k Nov 25, 2022
Interactive visualizations of time series using JavaScript and the HTML canvas tag

dygraphs JavaScript charting library The dygraphs JavaScript library produces interactive, zoomable charts of time series: Learn more about it at dygr

Dan Vanderkam 3k Nov 17, 2022
An implementation of Bรฉzier curve rendering and manipulation, using the HTML5 Canvas API.

Bรฉzier Curves An implementation of Bรฉzier curve rendering and manipulation, using the HTML5 Canvas API. How does it work? Bรฉzier curves can be simply

nethe550 1 Apr 13, 2022
Simple HTML5 Charts using the tag

Simple yet flexible JavaScript charting for designers & developers Documentation Currently, there are two versions of the library (2.9.4 and 3.x.x). V

Chart.js 58.8k Nov 22, 2022
๐Ÿฆโ€ข [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

Raphael Amorim 1.5k Nov 21, 2022
Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas

Planner Lightweight, interactive planning tool that visualizes a series of tasks using an HTML canvas. Try it yourself at plannerjs.dev Plans created

Brian Vaughn 505 Nov 18, 2022
Bring data to life with SVG, Canvas and HTML. :bar_chart::chart_with_upwards_trend::tada:

D3: Data-Driven Documents D3 (or D3.js) is a JavaScript library for visualizing data using web standards. D3 helps you bring data to life using SVG, C

D3 103.5k Nov 23, 2022
JavaScript SVG parser and renderer on Canvas

canvg JavaScript SVG parser and renderer on Canvas. It takes the URL to the SVG file or the text of the SVG file, parses it in JavaScript and renders

null 3.3k Nov 25, 2022
๐Ÿ”ฅ JavaScript Library for HTML5 canvas based heatmaps

heatmap.js Dynamic Heatmaps for the Web. How to get started The fastest way to get started is to install heatmap.js with bower. Just run the following

Patrick Wied 5.9k Nov 20, 2022
Financial lightweight charts built with HTML5 canvas

Lightweight Charts Demos | Documentation | Discord community TradingView Lightweight Charts are one of the smallest and fastest financial HTML5 charts

TradingView, Inc. 5.6k Nov 26, 2022
Flat, round, designer-friendly pseudo-3D engine for canvas & SVG

Zdog Round, flat, designer-friendly pseudo-3D engine View complete documentation and live demos at zzz.dog. Install Download zdog.dist.min.js minified

Metafizzy 9.5k Nov 25, 2022