├── env.d.ts
├── src
    ├── App.scss
    ├── assets
    │   └── references
    │   │   ├── index.scss
    │   │   ├── _colors.scss
    │   │   └── _mixins.scss
    ├── components
    │   ├── index.ts
    │   ├── imageEditor.ts
    │   ├── ImageEditor.scss
    │   └── ImageEditor.vue
    ├── App.vue
    ├── main.ts
    └── ViewerPlugin.ts
├── .vscode
    └── extensions.json
├── .prettierrc.json
├── tsconfig.app.json
├── index.html
├── .eslintrc.cjs
├── tsconfig.node.json
├── .gitignore
├── tsconfig.json
├── vite.config.ts
├── package.json
└── README.md


/env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="vite/client" />
2 | 


--------------------------------------------------------------------------------
/src/App.scss:
--------------------------------------------------------------------------------
1 | @import "./assets/references/index.scss";
2 | 


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |   "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
3 | }
4 | 


--------------------------------------------------------------------------------
/src/assets/references/index.scss:
--------------------------------------------------------------------------------
 1 | @import "./colors";
 2 | @import "./mixins";
 3 | 
 4 | 
 5 | 
 6 | 
 7 | 
 8 | 
 9 | 
10 | 
11 | 
12 | 
13 | 


--------------------------------------------------------------------------------
/src/components/index.ts:
--------------------------------------------------------------------------------
1 | export { default as ImageEditor } from "./ImageEditor.vue"
2 | export type { ImageEditorProps } from "./imageEditor"


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template></template>
 2 | 
 3 | 
 4 | <script setup lang="ts">
 5 | </script>
 6 | 
 7 | 
 8 | <style scoped lang="scss">
 9 | @import "App.scss";
10 | </style>
11 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "$schema": "https://json.schemastore.org/prettierrc",
3 |   "semi": false,
4 |   "tabWidth": 2,
5 |   "singleQuote": true,
6 |   "printWidth": 100,
7 |   "trailingComma": "none"
8 | }


--------------------------------------------------------------------------------
/src/components/imageEditor.ts:
--------------------------------------------------------------------------------
1 | export interface ImageEditorProps {
2 |     fileImage?: File;
3 |     colorBrush: string,
4 |     borderCropDivColor: string,
5 |     backgroundCropDivColor: string,
6 |     maxHeight? : number
7 |     maxWidth? : number
8 | }


--------------------------------------------------------------------------------
/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import "@/assets/references/index.scss";
4 | import ViewerPlugin from './ViewerPlugin';
5 | 
6 | const app = createApp(App)
7 | app.use(ViewerPlugin);
8 | app.mount('#app')
9 | 


--------------------------------------------------------------------------------
/src/ViewerPlugin.ts:
--------------------------------------------------------------------------------
 1 | import type { App } from "vue";
 2 | import { ImageEditor } from "./components";
 3 | 
 4 | 
 5 | export default {
 6 |     install: (app: App) => {
 7 |         app.component("ImageEditor", ImageEditor);
 8 |     },
 9 | };
10 | 
11 | export { ImageEditor };
12 | 


--------------------------------------------------------------------------------
/src/assets/references/_colors.scss:
--------------------------------------------------------------------------------
 1 | @use "sass:selector";
 2 | 
 3 | //Global Color
 4 | $white: #fff;
 5 | $gray:#595959;
 6 | $black: #000;
 7 | $orange: #db9300;
 8 | $light-orange: #f0ddb8;
 9 | $bubble-message-owner: #f9f3dd;
10 | $bubble-message: #f2f3f5;
11 | 
12 | //Global Variables
13 | $font-family: "Shabnam";
14 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@vue/tsconfig/tsconfig.dom.json",
 3 |   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
 4 |   "exclude": ["src/**/__tests__/*"],
 5 |   "compilerOptions": {
 6 |     "composite": true,
 7 |     "baseUrl": ".",
 8 |     "paths": {
 9 |       "@/*": ["./src/*"]
10 |     }
11 |   }
12 | }
13 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8">
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 |   <title>Image Editor Vue3</title>
 8 | </head>
 9 | 
10 | <body>
11 |   <div id="app"></div>
12 |   <script type="module" src="/src/main.ts"></script>
13 | </body>
14 | 
15 | </html>


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | /* eslint-env node */
 2 | require('@rushstack/eslint-patch/modern-module-resolution')
 3 | 
 4 | module.exports = {
 5 |   root: true,
 6 |   'extends': [
 7 |     'plugin:vue/vue3-essential',
 8 |     'eslint:recommended',
 9 |     '@vue/eslint-config-typescript',
10 |     '@vue/eslint-config-prettier/skip-formatting'
11 |   ],
12 |   parserOptions: {
13 |     ecmaVersion: 'latest'
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "extends": "@tsconfig/node18/tsconfig.json",
 3 |   "include": [
 4 |     "vite.config.*",
 5 |     "vitest.config.*",
 6 |     "cypress.config.*",
 7 |     "nightwatch.conf.*",
 8 |     "playwright.config.*"
 9 |   ],
10 |   "compilerOptions": {
11 |     "composite": true,
12 |     "module": "ESNext",
13 |     "moduleResolution": "Bundler",
14 |     "types": ["node"]
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | .DS_Store
12 | dist
13 | dist-ssr
14 | coverage
15 | *.local
16 | 
17 | /cypress/videos/
18 | /cypress/screenshots/
19 | 
20 | # Editor directories and files
21 | .vscode/*
22 | !.vscode/extensions.json
23 | .idea
24 | *.suo
25 | *.ntvs*
26 | *.njsproj
27 | *.sln
28 | *.sw?
29 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.node.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.app.json"
 9 |     }
10 |   ],
11 |   "include": [
12 |     "env.d.ts",
13 |     "src/**/*",
14 |     "src/**/*.vue"
15 |   ],
16 |   "compilerOptions": {
17 |     "strictNullChecks": false,
18 |     "baseUrl": ".",
19 |     "paths": {
20 |       "@/*": [
21 |         "./src/*"
22 |       ]
23 |     }
24 |   },
25 | }


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { fileURLToPath, URL } from "url";
 2 | 
 3 | import { defineConfig } from "vite";
 4 | 
 5 | import vue from "@vitejs/plugin-vue";
 6 | import typescript2 from "rollup-plugin-typescript2";
 7 | 
 8 | // https://vitejs.dev/config/
 9 | export default defineConfig({
10 |   plugins: [
11 |     vue(),
12 |     typescript2({
13 |       check: false,
14 |       include: ["src/components/*.vue"],
15 |       tsconfigOverride: {
16 |         compilerOptions: {
17 |           sourceMap: true,
18 |           declaration: true,
19 |           declarationMap: true,
20 |         },
21 |         exclude: ["vite.config.ts", "main.ts"],
22 |       },
23 |     }),
24 |   ],
25 |   resolve: {
26 |     alias: {
27 |       "@": fileURLToPath(new URL("./src", import.meta.url)),
28 |     },
29 |   },
30 |   build: {
31 |     cssCodeSplit: false,
32 |     lib: {
33 |       entry: "./src/ViewerPlugin.ts",
34 |       formats: ["es", "cjs"],
35 |       name: "ViewerPlugin",
36 |       fileName: (format) => (format === "es" ? "index.js" : "index.cjs"),
37 |     },
38 |     rollupOptions: {
39 |       external: ["vue"],
40 |       output: {
41 |         globals: {
42 |           vue: "Vue",
43 |         },
44 |       },
45 |     },
46 |   },
47 | });
48 | 


--------------------------------------------------------------------------------
/src/assets/references/_mixins.scss:
--------------------------------------------------------------------------------
 1 | @mixin main-size-xs {
 2 |     @media (max-width: 575.98px) {
 3 |         @content;
 4 |     }
 5 | }
 6 | 
 7 | @mixin main-size-sm {
 8 |     @media (min-width: 575.98px) {
 9 |         @content;
10 |     }
11 | }
12 | 
13 | @mixin main-size-md {
14 |     @media (min-width: 767.98px) {
15 |         @content;
16 |     }
17 | }
18 | 
19 | @mixin main-size-xl {
20 |     @media (min-width: 1199.98px) {
21 |         @content;
22 |     }
23 | }
24 | 
25 | @mixin responsive-more-size(
26 |     $property,
27 |     $desktop-value,
28 |     $laptop-value,
29 |     $tablet-value,
30 |     $mobile-value
31 | ) {
32 |     @include main-size-xs {
33 |         // 576 - 320
34 |         #{$property}: $mobile-value;
35 |     }
36 | 
37 |     @include main-size-sm {
38 |         // 768 - 576
39 | 
40 |         #{$property}: $tablet-value;
41 |     }
42 |     @include main-size-md {
43 |         //1200 - 768
44 | 
45 |         #{$property}: $laptop-value;
46 | 
47 |     }
48 |     @include main-size-xl {
49 |         //higher than 1200
50 |         #{$property}: $desktop-value;
51 |     }
52 | }
53 | 
54 | @mixin secondary-text-style($font-family, $font-style, $font-weight , $color) {
55 |     font-family: $font-family;
56 |     font-style: $font-style;
57 |     font-weight: $font-weight;
58 |     color: $color;
59 |     transition: 0.5s;
60 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue3-image-editor",
 3 |   "version": "1.1.1",
 4 |   "description": "An Image Editor component library",
 5 |   "type": "module",
 6 |   "main": "dist/index.cjs",
 7 |   "module": "dist/index.js",
 8 |   "exports": {
 9 |     ".": "./dist/index.js",
10 |     "./styles.css": "./dist/style.css"
11 |   },
12 |   "browser": {
13 |     "./styles.css": "./dist/style.css"
14 |   },
15 |   "types": "dist/ViewerPlugin.d.ts",
16 |   "files": [
17 |     "dist"
18 |   ],
19 |   "scripts": {
20 |     "dev": "vite",
21 |     "build": "run-p type-check build-only",
22 |     "preview": "vite preview",
23 |     "build-only": "vite build",
24 |     "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false",
25 |     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
26 |     "format": "prettier --write src/"
27 |   },
28 |   "keywords": [
29 |     "vue",
30 |     "vue3",
31 |     "component",
32 |     "library",
33 |     "image",
34 |     "edit",
35 |     "typescript"
36 |   ],
37 |   "repository": {
38 |     "type": "git",
39 |     "url": "https://github.com/alireza013013/vue-image-editor"
40 |   },
41 |   "dependencies": {
42 |     "compressorjs": "^1.2.1",
43 |     "path": "^0.12.7",
44 |     "vue": "^3.3.4"
45 |   },
46 |   "devDependencies": {
47 |     "@rushstack/eslint-patch": "^1.3.2",
48 |     "@tsconfig/node18": "^18.2.0",
49 |     "@types/node": "^18.17.0",
50 |     "@vitejs/plugin-vue": "^4.2.3",
51 |     "@vue/eslint-config-prettier": "^8.0.0",
52 |     "@vue/eslint-config-typescript": "^11.0.3",
53 |     "@vue/tsconfig": "^0.4.0",
54 |     "eslint": "^8.45.0",
55 |     "eslint-plugin-vue": "^9.15.1",
56 |     "npm-run-all": "^4.1.5",
57 |     "prettier": "^3.0.0",
58 |     "rollup-plugin-typescript2": "^0.35.0",
59 |     "sass": "^1.64.1",
60 |     "sass-loader": "^13.3.2",
61 |     "typescript": "~5.1.6",
62 |     "vite": "^4.4.6",
63 |     "vue-tsc": "^1.8.6"
64 |   }
65 | }


--------------------------------------------------------------------------------
/src/components/ImageEditor.scss:
--------------------------------------------------------------------------------
  1 | @import "../assets/references/index.scss";
  2 | 
  3 | .main-editor-div {
  4 |   @include responsive-more-size(padding, 36px, 36px, 10px, 10px);
  5 |   display: flex;
  6 |   flex-direction: column;
  7 |   margin: auto;
  8 |   background-color: var(--modal-bg);
  9 |   @include responsive-more-size(border-radius, 10px, 10px, 0, 0);
 10 |   overflow-y: auto;
 11 |   -ms-overflow-style: none; /* IE and Edge */
 12 |   scrollbar-width: none; /* Firefox */
 13 |   position: relative;
 14 | 
 15 |   &::-webkit-scrollbar {
 16 |     display: none;
 17 |   }
 18 | 
 19 |   align-items: center;
 20 | 
 21 |   .blur-div {
 22 |     display: flex;
 23 |     justify-content: center;
 24 |     align-items: center;
 25 |     background: #dadada;
 26 |     border-radius: 4px;
 27 | 
 28 |     .canvas-resize-div {
 29 |       display: flex;
 30 |       flex-direction: column;
 31 |       position: relative;
 32 |       direction: ltr !important;
 33 |       max-width: fit-content;
 34 |       max-height: fit-content;
 35 |       max-width: -moz-fit-content;
 36 |       max-height: -moz-fit-content;
 37 | 
 38 |       .canvas-style {
 39 |         width: 100%;
 40 |         height: 100%;
 41 |       }
 42 | 
 43 |       .resizable {
 44 |         background: transparent;
 45 |         width: 100px;
 46 |         height: 100px;
 47 |         position: absolute;
 48 | 
 49 |         .resizers {
 50 |           width: 100%;
 51 |           height: 100%;
 52 |           box-sizing: border-box;
 53 | 
 54 |           .resizer {
 55 |             width: 10px;
 56 |             height: 10px;
 57 |             border-radius: 50%;
 58 |             position: absolute;
 59 |           }
 60 | 
 61 |           .top-left {
 62 |             left: -5px;
 63 |             top: -5px;
 64 |             cursor: nwse-resize;
 65 |           }
 66 | 
 67 |           .top-right {
 68 |             right: -5px;
 69 |             top: -5px;
 70 |             cursor: nesw-resize;
 71 |           }
 72 | 
 73 |           .bottom-left {
 74 |             left: -5px;
 75 |             bottom: -5px;
 76 |             cursor: nesw-resize;
 77 |           }
 78 | 
 79 |           .bottom-right {
 80 |             right: -5px;
 81 |             bottom: -5px;
 82 |             cursor: nwse-resize;
 83 |           }
 84 |         }
 85 |       }
 86 |     }
 87 |   }
 88 | 
 89 |   .show-pre-div {
 90 |     margin: 20px auto;
 91 |     max-width: 300px;
 92 |     display: flex;
 93 |     flex-direction: column;
 94 |     position: absolute;
 95 |     top: -1000000px;
 96 | 
 97 |     canvas {
 98 |       border-radius: 8px;
 99 |     }
100 |   }
101 | 
102 |   .title-div {
103 |     @include responsive-more-size(margin-bottom, 36px, 36px, 30px, 30px);
104 |   }
105 | 
106 |   .options-div {
107 |     width: 100%;
108 |     display: flex;
109 |     column-gap: 10px;
110 |     height: 40px;
111 |     @include responsive-more-size(margin-top, 36px, 36px, 30px, 30px);
112 | 
113 |     .option {
114 |       display: flex;
115 |       cursor: pointer;
116 | 
117 |       .icon-option {
118 |         width: 30px;
119 |         height: 30px;
120 |       }
121 | 
122 |       .active {
123 |         filter: invert(69%) sepia(85%) saturate(2633%) hue-rotate(4deg) brightness(90%) contrast(101%);
124 |       }
125 |     }
126 |   }
127 | 
128 |   .options-paiting {
129 |     width: 100%;
130 |     margin-top: 20px;
131 | 
132 |     input[type="color"] {
133 |       appearance: none;
134 |       -moz-appearance: none;
135 |       -webkit-appearance: none;
136 |       background: none;
137 |       border: 0;
138 |       cursor: pointer;
139 |       height: 30px;
140 |       padding: 0;
141 |       width: 30px;
142 |     }
143 | 
144 |     *:focus {
145 |       border-radius: 0;
146 |       outline: none;
147 |     }
148 | 
149 |     ::-webkit-color-swatch-wrapper {
150 |       padding: 0;
151 |     }
152 | 
153 |     ::-webkit-color-swatch {
154 |       border: 0;
155 |       border-radius: 50%;
156 |     }
157 | 
158 |     ::-moz-color-swatch,
159 |     ::-moz-focus-inner {
160 |       border: 0;
161 |     }
162 | 
163 |     ::-moz-focus-inner {
164 |       padding: 0;
165 |     }
166 |   }
167 | 
168 |   .submit-button-div {
169 |     width: 100%;
170 |     display: flex;
171 |     column-gap: 6px;
172 |     margin-top: 12px;
173 |   }
174 | }
175 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Vue 3 Image Editor
  2 | 
  3 | Modern lightweight Vue 3 image editor component
  4 | 
  5 | <p>
  6 |   <a href="https://www.npmjs.com/package/vue3-image-editor"><img src="https://img.shields.io/npm/v/vue3-image-editor.svg" alt="npm"/></a>
  7 | </p>
  8 | 
  9 | ## Demo
 10 | https://alireza013013.github.io/example-vue-image-editor/
 11 | 
 12 | ## Features
 13 | 
 14 | -  Component user interface customization
 15 | -  Photo cropping
 16 | -  Painting On Image
 17 | -  No reduction in image quality
 18 | -  Image compression to reduce size without losing quality
 19 | -  Select desired width and height
 20 | 
 21 | ## Getting started
 22 | 
 23 | ### Installation
 24 | 
 25 | The first step is to install using `npm`:
 26 | 
 27 | ```bash
 28 | npm i vue3-image-editor
 29 | ```
 30 | 
 31 | ### Basic Using
 32 | 
 33 | #### Global Using
 34 | you should import ViewPlugin And css file in the `main.ts` and use ViewPlugin.
 35 | 
 36 | ```ts
 37 | import ViewerPlugin from "vue3-image-editor"
 38 | import "vue3-image-editor/styles.css"
 39 | 
 40 | app.use(ViewerPlugin)
 41 | ```
 42 | 
 43 | #### Local Using
 44 | You must import the component and css file in the desired file as follows.
 45 | 
 46 | ```ts
 47 | import { ImageEditor } from "vue3-image-editor"
 48 | import "vue3-image-editor/styles.css"
 49 | ```
 50 | 
 51 | ### Basic Example
 52 | Simple usage is given in the following example.
 53 | 
 54 | ```vue
 55 | <template>
 56 |     <ImageEditor @finish-editing="finishEditImage" :max-height="400"   :max-width="400" ref="imageEditor" background-crop-div-color="white"
 57 |     border-crop-div-color="#4286f4" :color-brush="colorBrush" v-model:file-image="selectedFileImageForEdit" />
 58 | 
 59 |         <div class="options-div" v-if="!activeBrushing && !activeCroping">
 60 |             <button class="option" @click="callEnablePainting">
 61 |                Painting
 62 |             </button>
 63 |             <button class="option" @click="callEnableCroping">
 64 |                Crop
 65 |             </button>
 66 |             <button class="option" @click="callDownLoadImage">
 67 |                Download
 68 |             </button>
 69 |             <button class="option" @click="callFinishEditing">
 70 |                Finish
 71 |             </button>
 72 |         </div>
 73 |         <div class="options-paiting" v-if="activeBrushing">
 74 |             <input type="color" v-model="colorBrush">
 75 |         </div>
 76 |         <div class="submit-button-div" v-if="activeBrushing || activeCroping">
 77 |             <button @click="callCancelChanges">Cancel</button>
 78 |             <button @click="callSaveChanges">Save</button>
 79 |         </div>
 80 | </template>
 81 | 
 82 | <script setup lang="ts">
 83 | import { ref } from 'vue';
 84 | import { ImageEditor } from "vue3-image-editor"
 85 | import "vue3-image-editor/styles.css"
 86 | 
 87 | const colorBrush = ref<string>("")
 88 | const selectedFileImageForEdit = ref<File>()
 89 | const imageEditor = ref<any>(null)
 90 | const activeBrushing = ref<boolean>(false)
 91 | const activeCroping = ref<boolean>(false)
 92 | 
 93 | function callEnableCroping() {
 94 |     imageEditor.value.enableCroping()
 95 |     activeCroping.value = true
 96 | }
 97 | 
 98 | function callEnablePainting() {
 99 |     imageEditor.value.enablePainting()
100 |     activeBrushing.value = true
101 | }
102 | 
103 | function callFinishEditing() {
104 |     imageEditor.value.finishEditing()
105 | }
106 | 
107 | function finishEditImage(newFile: File) {
108 |     console.log("Final File After Change",newFile)
109 | }
110 | 
111 | function callDownLoadImage() {
112 |     imageEditor.value.download()
113 | }
114 | 
115 | function callSaveChanges() {
116 |     imageEditor.value.saveChanges()
117 |     activeBrushing.value = false
118 |     activeCroping.value = false
119 | }
120 | 
121 | function callCancelChanges() {
122 |     imageEditor.value.cancelChanges()
123 |     activeBrushing.value = false
124 |     activeCroping.value = false
125 | }
126 | 
127 | </script>
128 | ```
129 | To access component functions, a variable must be defined and connected to the component through ref. In the above example, `imageEditor` variable is used, whose initial value is null. You have to put your photo file in a `selectedFileImageForEdit` variable so that the photo will be displayed for you.
130 | To change the blob to a file, you can do the following.
131 | 
132 | ```ts
133 | const finalFile: File = new File([blob], "nameFile", { type: "image/png" })
134 | ```
135 |  
136 | 
137 | ### Crop Feature
138 | To use the photo cropping function, you must call `enableCroping`. For this purpose, you can define a button as in the example above and call `enableCroping` on the @click function button.
139 | After calling `enableCroping`, the photo cropping square will appear. Now, to save the changes, you can call the `saveChanges` and to cancel the changes, you can call the `cancelChanges`.
140 | You can change the square appearance of the photo by using `background-crop-div-color` and `border-crop-div-color`.
141 | 
142 | #### Notice
143 | When the function of cutting and drawing is not yet activated, it is better not to show the buttons related to `saveChanges` and `cancelChanges` functions to the user so that the user cannot call them, because there is no need for this.
144 | When one of the functions is active, it is better not to show the other.
145 | 
146 | ### Paiting Feature
147 | To use the feature of drawing on the image, you must call `enablePainting`. For this purpose, you can define a button as in the example above and call `enablePainting` on the @click function button.
148 | Now, to save the changes, you can call the `saveChanges` and to cancel the changes, you can call the `cancelChanges`.
149 | The default color of the pen is black. To change it, you can change `color-brush` variable. You can also put a input color like the example above so that the user can choose the color himself.
150 | 
151 | ### Width And Height
152 | You can specify the maximum width and maximum height of the photo. In the absence of these values, the photo will be loaded in its actual size. The recommended amount for these two is between 400 and 500.
153 | 
154 | ### Finish Editing
155 | After finishing the changes on the image, to access the final file, you must call `finishEditing`. Then you have to rewrite the `finishEditImage` function because this function returns the final file to us. These things can be seen in the above example.
156 | 


--------------------------------------------------------------------------------
/src/components/ImageEditor.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |     <div class="main-editor-div" id="MainEditorId">
  3 |         <div class="blur-div">
  4 |             <div class="canvas-resize-div" id="CanvasImageCropRectangleIdDiv">
  5 |                 <canvas :style="{
  6 |                     maxWidth: maxWidth ? maxWidth + `px` : `unset`,
  7 |                     maxHeight: maxHeight ? maxHeight + `px` : `unset`,
  8 |                 }" class="canvas-style" @touchmove="cursorMove" @touchend="cursorEndClick"
  9 |                     @touchstart="cursorStartClick" @mousedown="cursorStartClick" @mouseup="cursorEndClick"
 10 |                     @mousemove="cursorMove" width="400" height="300" id="mainImageCanvasId"></canvas>
 11 |                 <div v-show="activeCroping" id="CropRectangleIdDiv" class='resizable'>
 12 |                     <div class='resizers' :style="{
 13 |                         border: `3px solid ${borderCropDivColor}`
 14 |                     }">
 15 |                         <div :style="{
 16 |                             border: `3px solid ${borderCropDivColor}`,
 17 |                             background: backgroundCropDivColor
 18 |                         }" @touchstart="touchStartCornerCropRectangle($event, `top-left`)"
 19 |                             @mousedown="mouseDownCornerCropRectangle($event, `top-left`)" class='resizer top-left'></div>
 20 |                         <div :style="{
 21 |                             border: `3px solid ${borderCropDivColor}`,
 22 |                             background: backgroundCropDivColor
 23 |                         }" @touchstart="touchStartCornerCropRectangle($event, `top-right`)"
 24 |                             @mousedown="mouseDownCornerCropRectangle($event, `top-right`)" class='resizer top-right'></div>
 25 |                         <div :style="{
 26 |                             border: `3px solid ${borderCropDivColor}`,
 27 |                             background: backgroundCropDivColor
 28 |                         }" @touchstart="touchStartCornerCropRectangle($event, `bottom-left`)"
 29 |                             @mousedown="mouseDownCornerCropRectangle($event, `bottom-left`)" class='resizer bottom-left'>
 30 |                         </div>
 31 |                         <div :style="{
 32 |                             border: `3px solid ${borderCropDivColor}`,
 33 |                             background: backgroundCropDivColor
 34 |                         }" @touchstart="touchStartCornerCropRectangle($event, `bottom-right`)"
 35 |                             @mousedown="mouseDownCornerCropRectangle($event, `bottom-right`)" class='resizer bottom-right'>
 36 |                         </div>
 37 |                     </div>
 38 |                 </div>
 39 |             </div>
 40 |         </div>
 41 |         <div class="show-pre-div">
 42 |             <canvas width="200" height="200" id="canvasShowPreviewCropId"></canvas>
 43 |         </div>
 44 |     </div>
 45 | </template>
 46 | 
 47 | <script setup lang="ts">
 48 | import { onMounted, ref, watch } from 'vue';
 49 | import Compressor from 'compressorjs';
 50 | import type { ImageEditorProps } from "./imageEditor"
 51 | 
 52 | onMounted(async () => {
 53 |     await loadImageGetFromProp()
 54 |     CropRectangleElement.value = document.getElementById("CropRectangleIdDiv") as HTMLElement
 55 |     distanceCanvasFromTopPage.value = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().top as number
 56 |     distanceCanvasFromLeftPage.value = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().left as number
 57 | })
 58 | 
 59 | watch(() => props.fileImage, async () => {
 60 |     await loadImageGetFromProp()
 61 |     CropRectangleElement.value = document.getElementById("CropRectangleIdDiv") as HTMLElement
 62 |     distanceCanvasFromTopPage.value = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().top as number
 63 |     distanceCanvasFromLeftPage.value = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().left as number
 64 | })
 65 | 
 66 | 
 67 | 
 68 | const props = defineProps<ImageEditorProps>();
 69 | const emit = defineEmits(["finishEditing"]);
 70 | const mainCanvasImage = ref<HTMLCanvasElement>()
 71 | const layoutMainCanvasImage = ref<CanvasRenderingContext2D>()
 72 | const isPainting = ref<boolean>(false)
 73 | const radius = ref<number>(4)
 74 | const activeBrushing = ref<boolean>(false)
 75 | const minimumSizeCropRectangle = ref<number>(50);
 76 | const widthCropRectangle = ref<number>(0);
 77 | const heightCropRectangle = ref<number>(0);
 78 | const xPositionMouseClick = ref<number>(0);
 79 | const yPositionMouseClick = ref<number>(0);
 80 | const distanceCropRectangleFromTopCanvas = ref<number>(0)
 81 | const distanceCropRectangleFromLeftCanvas = ref<number>(0)
 82 | const distanceCanvasFromTopPage = ref<number>(0)
 83 | const distanceCanvasFromLeftPage = ref<number>(0)
 84 | const CropRectangleElement = ref<HTMLElement>(document.createElement("div"))
 85 | const cornerSelected = ref<string>("")
 86 | const activeCroping = ref<boolean>(false)
 87 | const scaledWidth = ref<number>(0)
 88 | const scaledHeight = ref<number>(0)
 89 | const aspectX = ref<number>(0)
 90 | const aspectY = ref<number>(0)
 91 | const mainImageForEdit = ref<Blob>()
 92 | const imageData = ref<any>()
 93 | 
 94 | function enableCroping() {
 95 |     if (props.fileImage) {
 96 |         activeCroping.value = true
 97 |     }
 98 | }
 99 | 
100 | function calculateDistanseFromTop(element: HTMLElement) {
101 |     let distance = 0;
102 |     if (element != null) {
103 |         do {
104 |             distance += element!.offsetTop;
105 |             element = element!.offsetParent as HTMLElement;
106 |         } while (element);
107 |         distance = distance < 0 ? 0 : distance;
108 |     }
109 |     return distance
110 | }
111 | 
112 | function mouseDownCornerCropRectangle(event: MouseEvent, position: string) {
113 |     event.preventDefault()
114 |     widthCropRectangle.value = parseFloat(getComputedStyle(CropRectangleElement.value, null).getPropertyValue('width').replace('px', ''));
115 |     heightCropRectangle.value = parseFloat(getComputedStyle(CropRectangleElement.value, null).getPropertyValue('height').replace('px', ''));
116 |     xPositionMouseClick.value = event.pageX;
117 |     yPositionMouseClick.value = event.pageY;
118 | 
119 |     distanceCanvasFromLeftPage.value = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().left as number
120 |     let element = document.getElementById("CanvasImageCropRectangleIdDiv") as HTMLElement;
121 |     distanceCanvasFromTopPage.value = calculateDistanseFromTop(element)
122 |     distanceCropRectangleFromTopCanvas.value = yPositionMouseClick.value - distanceCanvasFromTopPage.value
123 |     distanceCropRectangleFromLeftCanvas.value = xPositionMouseClick.value - distanceCanvasFromLeftPage.value;
124 | 
125 |     cornerSelected.value = position
126 |     window.addEventListener('mousemove', cursorMoveCornerCropRectangle)
127 |     window.addEventListener('mouseup', mouseUpCornerCropRectangle)
128 | }
129 | 
130 | function touchStartCornerCropRectangle(event: TouchEvent, position: string) {
131 |     event.preventDefault()
132 |     widthCropRectangle.value = parseFloat(getComputedStyle(CropRectangleElement.value, null).getPropertyValue('width').replace('px', ''));
133 |     heightCropRectangle.value = parseFloat(getComputedStyle(CropRectangleElement.value, null).getPropertyValue('height').replace('px', ''));
134 | 
135 |     xPositionMouseClick.value = event.touches[0].pageX;
136 |     yPositionMouseClick.value = event.touches[0].pageY;
137 | 
138 |     distanceCanvasFromLeftPage.value = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().left as number
139 |     let element = document.getElementById("CanvasImageCropRectangleIdDiv") as HTMLElement;
140 |     distanceCanvasFromTopPage.value = calculateDistanseFromTop(element)
141 | 
142 |     distanceCropRectangleFromTopCanvas.value = yPositionMouseClick.value - distanceCanvasFromTopPage.value
143 |     distanceCropRectangleFromLeftCanvas.value = xPositionMouseClick.value - distanceCanvasFromLeftPage.value;
144 | 
145 |     cornerSelected.value = position
146 |     window.addEventListener('touchmove', cursorMoveCornerCropRectangle)
147 |     window.addEventListener('touchend', touchEndCornerCropRectangle)
148 | }
149 | 
150 | function mouseUpCornerCropRectangle(event: MouseEvent) {
151 |     window.removeEventListener('mousemove', cursorMoveCornerCropRectangle)
152 | }
153 | 
154 | function touchEndCornerCropRectangle(event: TouchEvent) {
155 |     window.removeEventListener('touchmove', cursorMoveCornerCropRectangle)
156 | }
157 | 
158 | function handleCursorOutOfImage(width: number, height: number, pageX: number, pageY: number, direction: string) {
159 |     let widthCanvas = mainCanvasImage.value?.getBoundingClientRect().width as number
160 |     let heightCanvas = mainCanvasImage.value?.getBoundingClientRect().height as number
161 |     if (pageX > distanceCanvasFromLeftPage.value + widthCanvas && direction.includes("right")) {
162 |         CropRectangleElement.value.style.width = widthCanvas - CropRectangleElement.value.offsetLeft + 'px'
163 |     }
164 |     if (pageX < distanceCanvasFromLeftPage.value && direction.includes("left")) {
165 |         CropRectangleElement.value.style.left = 0 + 'px'
166 |     }
167 |     if (pageY > distanceCanvasFromTopPage.value + heightCanvas && direction.includes("bottom")) {
168 |         CropRectangleElement.value.style.height = heightCanvas - CropRectangleElement.value.offsetTop + "px"
169 |     }
170 |     if (pageY < distanceCanvasFromTopPage.value && direction.includes("top")) {
171 |         CropRectangleElement.value.style.top = 0 + 'px'
172 |     }
173 |     if (pageY + height > distanceCanvasFromTopPage.value + heightCanvas && direction.includes("top")) {
174 |         CropRectangleElement.value.style.top = ''
175 |         CropRectangleElement.value.style.bottom = '0px'
176 |     }
177 | }
178 | 
179 | function calculateWidth(pageX: number, direction: string) {
180 |     if (direction == "right") {
181 |         return widthCropRectangle.value + (pageX - xPositionMouseClick.value)
182 |     } else {
183 |         return widthCropRectangle.value - (pageX - xPositionMouseClick.value)
184 |     }
185 | }
186 | 
187 | function calculateHeight(pageY: number, direction: string) {
188 |     if (direction == "top") {
189 |         return heightCropRectangle.value - (pageY - yPositionMouseClick.value)
190 |     } else {
191 |         return heightCropRectangle.value + (pageY - yPositionMouseClick.value)
192 |     }
193 | }
194 | 
195 | function setWidthForRightSide(pageX: number, width: number) {
196 |     let widthCanvas = mainCanvasImage.value?.getBoundingClientRect().width as number
197 |     if (width > minimumSizeCropRectangle.value && pageX < distanceCanvasFromLeftPage.value + widthCanvas) {
198 |         CropRectangleElement.value.style.width = width + 'px'
199 |     }
200 | }
201 | 
202 | function setWidthAndLeftPossitionForLeftSide(pageX: number, width: number) {
203 |     if (width > minimumSizeCropRectangle.value && pageX > distanceCanvasFromLeftPage.value) {
204 |         CropRectangleElement.value.style.left = distanceCropRectangleFromLeftCanvas.value + (pageX - xPositionMouseClick.value) + 'px'
205 |         CropRectangleElement.value.style.width = width + 'px'
206 |     }
207 | }
208 | 
209 | function setHeightForBottomSide(pageY: number, height: number) {
210 |     let heightCanvas = mainCanvasImage.value?.getBoundingClientRect().height as number
211 |     if (height > minimumSizeCropRectangle.value && pageY < distanceCanvasFromTopPage.value + heightCanvas) {
212 |         CropRectangleElement.value.style.height = height + 'px'
213 |         CropRectangleElement.value.style.top = calculateDistanseFromTop(CropRectangleElement.value) - distanceCanvasFromTopPage.value + "px"
214 |         CropRectangleElement.value.style.bottom = ''
215 |     }
216 | }
217 | 
218 | function setHeightAndTopPossitionForBottomSide(pageY: number, height: number) {
219 |     let heightCanvas = mainCanvasImage.value?.getBoundingClientRect().height as number
220 |     if (height > minimumSizeCropRectangle.value && pageY > distanceCanvasFromTopPage.value) {
221 |         if (pageY + height > distanceCanvasFromTopPage.value + heightCanvas) {
222 |             CropRectangleElement.value.style.top = ''
223 |             CropRectangleElement.value.style.bottom = '0px'
224 |         } else {
225 |             CropRectangleElement.value.style.top = distanceCropRectangleFromTopCanvas.value + pageY - yPositionMouseClick.value + 'px'
226 |         }
227 |         CropRectangleElement.value.style.height = height + 'px'
228 |     }
229 | }
230 | 
231 | async function cursorMoveCornerCropRectangle(event: MouseEvent | TouchEvent) {
232 |     let width: number;
233 |     let height: number;
234 |     let pageX = getPageXFromEvent(event)
235 |     let pageY = getPageYFromEvent(event)
236 | 
237 |     switch (cornerSelected.value) {
238 |         case "bottom-right":
239 |             width = calculateWidth(pageX, "right");
240 |             height = calculateHeight(pageY, "bottom")
241 |             handleCursorOutOfImage(width, height, pageX, pageY, "bottom-right")
242 |             setWidthForRightSide(pageX, width)
243 |             setHeightForBottomSide(pageY, height)
244 |             break;
245 |         case "bottom-left":
246 |             width = calculateWidth(pageX, "left")
247 |             height = calculateHeight(pageY, "bottom")
248 |             handleCursorOutOfImage(width, height, pageX, pageY, "bottom-left")
249 |             setWidthAndLeftPossitionForLeftSide(pageX, width)
250 |             setHeightForBottomSide(pageY, height)
251 |             break;
252 |         case "top-right":
253 |             width = calculateWidth(pageX, "right")
254 |             height = calculateHeight(pageY, "top")
255 |             handleCursorOutOfImage(width, height, pageX, pageY, "top-right")
256 |             setWidthForRightSide(pageX, width)
257 |             setHeightAndTopPossitionForBottomSide(pageY, height)
258 |             break;
259 |         case "top-left":
260 |             width = calculateWidth(pageX, "left")
261 |             height = calculateHeight(pageY, "top")
262 |             handleCursorOutOfImage(width, height, pageX, pageY, "top-left")
263 |             setWidthAndLeftPossitionForLeftSide(pageX, width)
264 |             setHeightAndTopPossitionForBottomSide(pageY, height)
265 |             break;
266 |     }
267 |     // const x = await showPreviewCropCanvas()
268 |     // console.log("x", x);
269 | }
270 | 
271 | function getPageYFromEvent(event: any) {
272 |     let pageY = event.pageY ? event.pageY : event.touches[0].pageY
273 |     let scrollFromTop = document.getElementById("MainEditorId")?.scrollTop;
274 |     return pageY + scrollFromTop
275 | }
276 | 
277 | function getPageXFromEvent(event: any) {
278 |     let pageX = event.pageX ? event.pageX : event.touches[0].pageX
279 |     return pageX
280 | }
281 | 
282 | async function showPreviewCropCanvas() {
283 |     let canvasPreviewCrop = document.getElementById("canvasShowPreviewCropId") as HTMLCanvasElement
284 |     if (canvasPreviewCrop.getContext && canvasPreviewCrop) {
285 |         let layoutCanvasPreviewCrop = canvasPreviewCrop.getContext('2d') as CanvasRenderingContext2D
286 |         let image = new Image()
287 |         image.src = URL.createObjectURL(mainImageForEdit.value!);
288 |         return new Promise((resolve, reject) => {
289 |             image.onload = () => {
290 |                 let left = parseFloat(getComputedStyle(CropRectangleElement.value, null).getPropertyValue('left').replace('px', ''))
291 |                 let top = parseFloat(getComputedStyle(CropRectangleElement.value, null).getPropertyValue('top').replace('px', ''))
292 |                 let scaledWidth = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().width as number;
293 |                 let scaledHeight = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().height as number;
294 |                 let aspectX = image.naturalWidth / scaledWidth
295 |                 let aspectY = image.naturalHeight / scaledHeight
296 |                 canvasPreviewCrop.width = Math.ceil(CropRectangleElement.value.getBoundingClientRect().width * aspectX);
297 |                 canvasPreviewCrop.height = Math.ceil(CropRectangleElement.value.getBoundingClientRect().height * aspectY);
298 |                 layoutCanvasPreviewCrop.drawImage(
299 |                     image,
300 |                     left * aspectX,
301 |                     top * aspectY,
302 |                     CropRectangleElement.value.getBoundingClientRect().width * aspectX,
303 |                     CropRectangleElement.value.getBoundingClientRect().height * aspectY,
304 |                     0,
305 |                     0,
306 |                     CropRectangleElement.value.getBoundingClientRect().width * aspectX,
307 |                     CropRectangleElement.value.getBoundingClientRect().height * aspectY,
308 |                 );
309 |                 resolve(image.naturalWidth)
310 |             }
311 |             image.onerror = reject
312 |         })
313 |     }
314 | }
315 | 
316 | async function compressFile(file: File) {
317 |     return new Promise((resolve, reject) => {
318 |         new Compressor(file, {
319 |             strict: true,
320 |             convertTypes: "image/png",
321 |             convertSize: 5000000,
322 |             minHeight: 0,
323 |             minWidth: 0,
324 |             quality: 0.6,
325 |             success: resolve,
326 |             error: reject,
327 |         });
328 |     })
329 | }
330 | 
331 | async function loadImageGetFromProp() {
332 |     if (props.fileImage) {
333 |         const file = props.fileImage
334 |         const compressedBlob: any = await compressFile(file);
335 |         mainImageForEdit.value = compressedBlob
336 |         loadImageInCanvas(compressedBlob)
337 |     }
338 | }
339 | 
340 | function loadImageInCanvas(blobImage: Blob) {
341 |     mainCanvasImage.value = document.getElementById("mainImageCanvasId") as HTMLCanvasElement
342 |     if (mainCanvasImage.value.getContext && mainCanvasImage.value) {
343 |         layoutMainCanvasImage.value = mainCanvasImage.value.getContext('2d') as CanvasRenderingContext2D
344 |         let image = new Image()
345 |         image.src = URL.createObjectURL(blobImage)
346 |         image.onload = function () {
347 |             let width = image.naturalWidth;
348 |             let height = image.naturalHeight;
349 |             mainCanvasImage.value!.width = width
350 |             mainCanvasImage.value!.height = height
351 |             layoutMainCanvasImage.value?.drawImage(image, 0, 0, image.naturalWidth, image.naturalHeight, 0, 0, width, height)
352 |             imageData.value = layoutMainCanvasImage.value?.getImageData(0, 0, image.naturalWidth, image.naturalHeight)
353 |         }
354 |         CropRectangleElement.value.style.left = 0 + "px"
355 |         CropRectangleElement.value.style.top = 0 + "px"
356 |         CropRectangleElement.value.style.width = minimumSizeCropRectangle.value + "px"
357 |         CropRectangleElement.value.style.height = minimumSizeCropRectangle.value + "px"
358 |     }
359 | }
360 | 
361 | async function getPositionYCursorFromEvent(event: any) {
362 |     let distanceFromTopCanvas = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().top as number
363 |     let pageY = event.offsetY ? event.offsetY : event.touches[0].clientY - distanceFromTopCanvas
364 |     return pageY
365 | }
366 | 
367 | async function getPositionXCursorFromEvent(event: any) {
368 |     let distanceFromLeftCanvas = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().left as number
369 |     let pageX = event.offsetX ? event.offsetX : event.touches[0].clientX - distanceFromLeftCanvas
370 |     return pageX
371 | }
372 | 
373 | async function cursorStartClick(event: MouseEvent | TouchEvent) {
374 |     event.preventDefault()
375 |     if (activeBrushing.value) {
376 |         isPainting.value = true
377 |         scaledWidth.value = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().width as number;
378 |         scaledHeight.value = document.getElementById("CanvasImageCropRectangleIdDiv")?.getBoundingClientRect().height as number;
379 |         aspectX.value = (mainCanvasImage.value?.width as number) / scaledWidth.value
380 |         aspectY.value = (mainCanvasImage.value?.height as number) / scaledHeight.value
381 |         let pageX = await getPositionXCursorFromEvent(event) * aspectX.value
382 |         let pageY = await getPositionYCursorFromEvent(event) * aspectY.value;
383 |         (layoutMainCanvasImage.value as CanvasRenderingContext2D).lineWidth = radius.value * aspectX.value;
384 |         (layoutMainCanvasImage.value as CanvasRenderingContext2D).lineCap = "round";
385 |         (layoutMainCanvasImage.value as CanvasRenderingContext2D).strokeStyle = props.colorBrush == "" ? `#000000` : props.colorBrush;
386 |         layoutMainCanvasImage.value?.beginPath()
387 |         layoutMainCanvasImage.value?.moveTo(pageX, pageY)
388 |     }
389 | }
390 | 
391 | function cursorEndClick(event: MouseEvent | TouchEvent) {
392 |     event.preventDefault()
393 |     isPainting.value = false
394 | }
395 | 
396 | async function cursorMove(event: MouseEvent | TouchEvent) {
397 |     event.preventDefault()
398 |     if (!isPainting.value) {
399 |         return
400 |     }
401 |     let pageX = Math.ceil(await getPositionXCursorFromEvent(event) * aspectX.value)
402 |     let pageY = Math.ceil(await getPositionYCursorFromEvent(event) * aspectY.value)
403 |     layoutMainCanvasImage.value?.lineTo(pageX, pageY)
404 |     layoutMainCanvasImage.value?.stroke()
405 | }
406 | 
407 | function enablePainting() {
408 |     if (props.fileImage) {
409 |         activeBrushing.value = true
410 |     }
411 | }
412 | 
413 | function addFilter() {
414 |     // let src = [...imageData.value.data];
415 |     // let dst = [...imageData.value.data];
416 | 
417 |     // const kernel = [
418 |     //     1 / 16, 2 / 16, 1 / 16,
419 |     //     2 / 16, 4 / 16, 2 / 16,
420 |     //     1 / 16, 2 / 16, 1 / 16
421 |     // ]
422 | 
423 |     // const srcWidth = imageData.value.width;
424 |     // const srcHeight = imageData.value.height;
425 | 
426 |     // const side = Math.round(Math.sqrt(kernel.length));
427 |     // const halfSide = Math.floor(side / 2);
428 | 
429 |     // // padding the output by the convolution kernel
430 |     // const w = srcWidth;
431 |     // const h = srcHeight;
432 | 
433 |     // console.log("height",h);
434 |     // console.log("width",w);
435 |     // console.log("cy",side);
436 |     // console.log("cx",side);
437 | 
438 | 
439 |     // iterating through the output image pixels
440 |     // for (let y = 0; y < h; y++) {
441 |     //     for (let x = 0; x < w; x++) {
442 |     //         let r = 0, g = 0, b = 0, a = 0;
443 | 
444 |     //         // calculating the weighed sum of the source image pixels that
445 |     //         // fall under the convolution kernel
446 |     //         for (let cy = 0; cy < side; cy++) {
447 |     //             for (let cx = 0; cx < side; cx++) {
448 |     //                 const scy = y + cy - halfSide;
449 |     //                 const scx = x + cx - halfSide;
450 | 
451 |     //                 if (scy >= 0 && scy < srcHeight && scx >= 0 && scx < srcWidth) {
452 |     //                     let srcOffset = (scy * srcWidth + scx) * 4;
453 |     //                     let wt = kernel[cy * side + cx];
454 |     //                     r += src[srcOffset] * wt;
455 |     //                     g += src[srcOffset + 1] * wt;
456 |     //                     b += src[srcOffset + 2] * wt;
457 |     //                     a += src[srcOffset + 3] * wt;
458 |     //                 }
459 |     //             }
460 |     //         }
461 | 
462 |     //         const dstOffset = (y * w + x) * 4;
463 |     //         console.log(dstOffset);
464 | 
465 |     //         dst[dstOffset] = r;
466 |     //         dst[dstOffset + 1] = g;
467 |     //         dst[dstOffset + 2] = b;
468 |     //         dst[dstOffset + 3] = a;
469 |     //     }
470 |     // }
471 |     // layoutMainCanvasImage.value?.putImageData(imageData.value, 0, 0)
472 |     // layoutMainCanvasImage.value?.putImageData(imageData.value, 0, 0)
473 |     // return sourceImageData;
474 | 
475 | 
476 |     // for (let i = 0; i < imageData.value.data.length; i += 4) {
477 |     //     const r = imageData.value.data[i];
478 |     //     const g = imageData.value.data[i + 1];
479 |     //     const b = imageData.value.data[i + 2];
480 |     //     const v = (0.2126 * r + 0.7152 * g + 0.0722 * b >= 127) ? 255 : 0;
481 |     //     imageData.value.data[i] = imageData.value.data[i + 1] = imageData.value.data[i + 2] = v
482 |     // }
483 |     // layoutMainCanvasImage.value?.putImageData(imageData.value, 0, 0)
484 | 
485 | }
486 | 
487 | function download() {
488 |     if (props.fileImage) {
489 |         mainCanvasImage.value?.toBlob(blob => {
490 |             const url = URL.createObjectURL(blob!)
491 |             const link = document.createElement("a");
492 |             link.href = url;
493 |             link.setAttribute("download", "test");
494 |             document.body.appendChild(link);
495 |             link.click();
496 |             link.remove();
497 |         });
498 |     }
499 | }
500 | 
501 | async function saveChanges() {
502 |     if (activeCroping.value) {
503 |         await showPreviewCropCanvas()
504 |         let canvasPreviewCrop = document.getElementById("canvasShowPreviewCropId") as HTMLCanvasElement
505 |         canvasPreviewCrop.toBlob(blob => {
506 |             mainImageForEdit.value = blob!
507 |             loadImageInCanvas(mainImageForEdit.value)
508 |             activeCroping.value = false
509 |         });
510 |     } else if (activeBrushing.value) {
511 |         mainCanvasImage.value?.toBlob(blob => {
512 |             mainImageForEdit.value = blob!
513 |             loadImageInCanvas(mainImageForEdit.value)
514 |             activeBrushing.value = false
515 |         });
516 |     }
517 | }
518 | 
519 | async function cancelChanges() {
520 |     activeBrushing.value = false
521 |     activeCroping.value = false
522 | }
523 | 
524 | function finishEditing() {
525 |     const finalFile: File = new File([mainImageForEdit.value!], props.fileImage?.name.split(".")[0] + ".png", { type: "image/png" })
526 |     emit("finishEditing", finalFile)
527 | }
528 | 
529 | 
530 | defineExpose({ enablePainting, enableCroping, finishEditing, download, saveChanges, cancelChanges });
531 | 
532 | </script>
533 | 
534 | <style scoped lang="scss">
535 | @import "ImageEditor.scss";
536 | </style>


--------------------------------------------------------------------------------