npmpackage.info

Gathering detailed insights and metrics for @hvx-dev-ui/vue-image-editor

@hvx-dev-ui/vue-image-editor - 3.5.0 | npmpackage.info

@hvx-dev-ui/vue-image-editor

🍞🎨 Full-featured photo image editor using canvas. It is really easy, and it comes with great filters.

3.5.0

7,373

MIT

JavaScript

12.07 kB

2.8

Installations

npm install @hvx-dev-ui/vue-image-editor

Developer Guide

BETA

Typescript

No

Module System

CommonJS

Node Version

8.9.4

NPM Version

5.6.0 Pull Requests

Open

20

Total

253

Closed

68

Merged

165

Issues

Open

260

Total

689

Closed

429

Releases

v3.15.3

Updated on Apr 25, 2022

v3.15.2

Updated on Oct 20, 2021

v3.15.1

Updated on Oct 20, 2021

v3.15.0

Updated on Jul 28, 2021

v3.14.3

Updated on Apr 08, 2021

v3.14.2

Updated on Mar 25, 2021

View All 38 releases

Languages

JavaScript

Stylus

HTML

TypeScript

CSS

Vue

JavaScript (90.1%)

Stylus (4.44%)

HTML (3.38%)

TypeScript (0.97%)

CSS (0.79%)

Vue (0.33%)

Developer

nhn

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

7,373 Stars

659 Commits

1,342 Forks

103 Watchers

37 Branches

33 Contributors

Updated on Jul 17, 2025

Maintainers

View All 33 Contributors

Package Meta Information

Latest Version

3.5.0

Package Id

@hvx-dev-ui/vue-image-editor@3.5.0

Unpacked Size

12.07 kB

Size

4.75 kB

File Count

NPM Version

5.6.0

Node Version

8.9.4

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Vue wrapper for TOAST UI Image Editor

This is a Vue component wrapping TOAST UI Image Editor.

🚩 Table of Contents

Collect statistics on the use of open source
Install
- Using npm
Usage
- Load
- Implement
- Props
- Events
- Method

Collect statistics on the use of open source

TOAST UI ImageEditor applies Google Analytics (GA) to collect statistics on the use of open source, in order to identify how widely TOAST UI ImageEditor is used throughout the world. It also serves as important index to determine the future course of projects. location.hostname (e.g. > “ui.toast.com") is to be collected and the sole purpose is nothing but to measure statistics on the usage. To disable GA, use the following usageStatistics option when creating the instance.

1const options = {
2    ...
3    usageStatistics: false
4}
5
6const imageEditor = new tui.ImageEditor('#tui-image-editor-container', options);

Or, include tui-code-snippet(v1.4.0 or later) and then immediately write the options as follows:

1tui.usageStatistics = false;

💾 Install

Using npm

1npm install --save @toast-ui/vue-image-editor

If you install other packages, you may lose dependency on fabric. You need to reinstall the fabric.

```
npm install --no-save --no-optional fabric@~4.2.0
```

🔡 Usage

Load

Using namespace

1const ImageEditor = toastui.ImageEditor;

Using module

1// es modules
2import { ImageEditor } from '@toast-ui/vue-image-editor';
3
4// commonjs require
5const { ImageEditor } = require('@toast-ui/vue-image-editor');

Using <script>

If you just add javascript file to your html, you use toastui-vue-image-editor.js downloaded. Insert toastui-vue-image-editor.js with vue in your html like this:
```
1<script src="https://cdn.jsdelivr.net/npm/vue"></script>
2<script src="path/to/toastui-vue-image-editor.js"></script>
```
Using only Vue wrapper component (Single File Component)

toastui-vue-image-editor.js has all of the tui.ImageEditor. If you only need vue wrapper component, you can use @toast-ui/vue-image-editor/src/ImageEditor.vue like this:
```
1import ImageEditor from '@toast-ui/vue-image-editor/src/ImageEditor.vue';
```

Implement

First insert <tui-image-editor> in the template or html. includeUi and options props are required.

1<tui-image-editor :include-ui="useDefaultUI" :options="options"></tui-image-editor>

Load ImageEditor component and then add it to the components in your component or Vue instance.

1import 'tui-color-picker/dist/tui-color-picker.css';
2import 'tui-image-editor/dist/tui-image-editor.css';
3import { ImageEditor } from '@toast-ui/vue-image-editor';
4
5export default {
6  components: {
7    'tui-image-editor': ImageEditor,
8  },
9  data() {
10    return {
11      useDefaultUI: true,
12      options: {
13        // for tui-image-editor component's "options" prop
14        cssMaxWidth: 700,
15        cssMaxHeight: 500,
16      },
17    };
18  },
19};

Props

You can use includeUi and options props. Example of each props is in the Getting Started.

includeUi

Type Required Default
Boolean X true

This prop can contained the includeUI prop in the option. You can see the default UI.
options

Type Required Default
Object X { cssMaxWidth: 700, cssMaxHeight: 500 }

You can configure your image editor using options prop. For more information which properties can be set in options, see options of tui.image-editor.

Type	Required	Default
Boolean	X	true

Type	Required	Default
Object	X	{ cssMaxWidth: 700, cssMaxHeight: 500 }

Events

addText: The event when 'TEXT' drawing mode is enabled and click non-object area.
mousedown: The mouse down event with position x, y on canvas
objectActivated: The event when object is selected(aka activated).
objectMoved: The event when object is moved.
objectScaled: The event when scale factor is changed.
redoStackChanged: Redo stack changed event
textEditing: The event which starts to edit text object.
undoStackChanged: Undo stack changed event

1<tui-image-editor ... @addText="onAddText" @objectMoved="onObjectMoved"> </tui-image-editor>

1...
2methods: {
3    onAddText(pos) {
4        ...
5    },
6    onObjectMoved(props) {
7        ...
8    }
9}
10...

For more information such as the parameters of each event, see event of tui.image-editor.

Method

For use method, first you need to assign ref attribute of element like this:

1<tui-image-editor ref="tuiImageEditor" :options="options"></tui-image-editor>

After then, you can use methods through this.$refs. We provide getRootElement and invoke methods.

getRootElement

You can get root element of image editor using this method.
```
1this.$refs.tuiImageEditor.getRootElement();
```

invoke

If you want to more manipulate the ImageEditor, you can use invoke method to call the method of tui.ImageEditor. First argument of invoke is name of the method and second argument is parameters of the method. To find out what kind of methods are available, see method of tui.ImageEditor.

1const drawingMode = this.$refs.tuiImageEditor.invoke('getDrawingMode');
2
3this.$refs.tuiImageEditor.invoke('loadImageFromURL', './sampleImage.png', 'My sample image');
4
5this.$refs.tuiImageEditor.invoke('startDrawingMode', 'FREE_DRAWING', {
6  width: 10,
7  color: 'rgba(255, 0, 0, 0.5)',
8});

No vulnerabilities found.

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

3

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

Maintained

Determines if the project is "actively maintained".

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/detectRuntimeError.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/detectRuntimeError.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/detectRuntimeError.yml:30: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/detectRuntimeError.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-docs.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-docs.yml:43: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-docs.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-docs.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:106: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:122: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:141: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:20: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:29: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:42: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:52: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:63: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:76: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:80: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-npm.yml:86: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-npm.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:18: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:24: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/publish-wrapper.yml:56: update your workflow using https://app.stepsecurity.io/secureworkflow/nhn/tui.image-editor/publish-wrapper.yml/master?enable=pin
Warn: npmCommand not pinned by hash: .github/workflows/publish-wrapper.yml:34
Warn: npmCommand not pinned by hash: .github/workflows/publish-wrapper.yml:42
Info: 0 out of 14 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 8 third-party GitHubAction dependencies pinned
Info: 0 out of 2 npmCommand dependencies pinned

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Fuzzing

Determines if the project uses fuzzing.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

97 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8
Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-h5c3-5r3r-rr8q
Warn: Project is vulnerable to: GHSA-rmvr-2pp2-xj38
Warn: Project is vulnerable to: GHSA-xx4v-prfh-6cgc
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-fwr7-v2mv-hh25
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-vjh7-7g9h-fjfh
Warn: Project is vulnerable to: GHSA-6h5x-7c5m-7cr7
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc
Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp
Warn: Project is vulnerable to: GHSA-pfrx-2q88-qq97
Warn: Project is vulnerable to: GHSA-rc47-6667-2j5j
Warn: Project is vulnerable to: GHSA-c7qv-q95q-8v27
Warn: Project is vulnerable to: GHSA-4www-5p9h-95mh
Warn: Project is vulnerable to: GHSA-9gqv-wp59-fq42
Warn: Project is vulnerable to: GHSA-33f9-j839-rf8h
Warn: Project is vulnerable to: GHSA-c36v-fmgq-m8hx
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-p6mc-m468-83gw
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-4xcv-9jjx-gfj3
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-mwcw-c2x4-8c55
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-vp56-6g26-6827
Warn: Project is vulnerable to: GHSA-5rrq-pxf6-6jx5
Warn: Project is vulnerable to: GHSA-8fr3-hfg3-gpgp
Warn: Project is vulnerable to: GHSA-gf8q-jrpm-jvxq
Warn: Project is vulnerable to: GHSA-2r2c-g63r-vccr
Warn: Project is vulnerable to: GHSA-cfm4-qjh2-4765
Warn: Project is vulnerable to: GHSA-x4jg-mjrx-434g
Warn: Project is vulnerable to: GHSA-jmqm-f2gx-4fjv
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-3j8f-xvm3-ffx4
Warn: Project is vulnerable to: GHSA-4p35-cfcx-8653
Warn: Project is vulnerable to: GHSA-7f3x-x4pr-wqhj
Warn: Project is vulnerable to: GHSA-jpp7-7chh-cf67
Warn: Project is vulnerable to: GHSA-q6wq-5p59-983w
Warn: Project is vulnerable to: GHSA-j9fq-vwqv-2fm2
Warn: Project is vulnerable to: GHSA-pqw5-jmp5-px4v
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-rhx6-c78j-4q9w
Warn: Project is vulnerable to: GHSA-h7cp-r72f-jxh6
Warn: Project is vulnerable to: GHSA-v62p-rq8g-8h59
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-x7hr-w5r2-h6wg
Warn: Project is vulnerable to: GHSA-3965-hpx2-q597
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-76p7-773f-r4q5
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-wpg7-2c88-r8xv
Warn: Project is vulnerable to: GHSA-w5hq-hm5m-4548
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx
Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx
Warn: Project is vulnerable to: GHSA-hc6q-2mpp-qw7j
Warn: Project is vulnerable to: GHSA-4vvj-4cpr-p986
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-4v9v-hfq4-rm2v
Warn: Project is vulnerable to: GHSA-9jgg-88mc-972h
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q
Warn: Project is vulnerable to: GHSA-p9pc-299p-vxgp

Score

2.8

/10

Last Scanned on 2025-07-07

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More

@hvx-dev-ui/vue-image-editor

Installations

Developer Guide

No

CommonJS

8.9.4

5.6.0

Pull Requests

20

253

68

165

Issues

260

689

429

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Peer Dependencies

Dev Dependencies

Vue wrapper for TOAST UI Image Editor

🚩 Table of Contents

Collect statistics on the use of open source

💾 Install

Using npm

🔡 Usage

Load

Implement

Props

Events

Method

10

10

10

3

0

0

0

0

0

0

0

0

0

2.8

/10