Skip to content

Commit 530d07f

Browse files
b4rtazb4rtaz
committed
0.1.0.
1 parent 6bb2a82 commit 530d07f

File tree

14 files changed

+239
-70
lines changed

14 files changed

+239
-70
lines changed

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ Online Examples:
1717

1818
* [🎬 Template Creator](https://img-js.github.io/mini-canvas-editor/webpack-app/public/template-creator.html)
1919
* [🎨 Inpainting Mask](https://img-js.github.io/mini-canvas-editor/webpack-app/public/inpainting-mask.html)
20+
* [🔲 Crop](https://img-js.github.io/mini-canvas-editor/webpack-app/public/crop.html)
2021
* [📦 Vanilla JavaScript](https://img-js.github.io/mini-canvas-editor/webpack-app/public/vanilla-javascript.html)
2122

2223
## 🚀 Installation
@@ -54,8 +55,8 @@ Add the below code to your head section in HTML document.
5455
```html
5556
<head>
5657
...
57-
<link href="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.10/css/editor.css" rel="stylesheet">
58-
<script src="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.10/dist/index.umd.js"></script>
58+
<link href="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.1.0/css/editor.css" rel="stylesheet">
59+
<script src="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.1.0/dist/index.umd.js"></script>
5960
```
6061

6162
Create the editor by:

‎demos/svelte-app/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
"prettier:fix": "prettier --write ./src"
1515
},
1616
"dependencies": {
17-
"mini-canvas-editor": "^0.0.10",
18-
"mini-canvas-core": "^0.0.10",
17+
"mini-canvas-editor": "^0.1.0",
18+
"mini-canvas-core": "^0.1.0",
1919
"fabric": "6.0.0-beta13",
2020
"canvas": "^2.11.2"
2121
},

‎demos/svelte-app/static/favicon.ico‎

-102 Bytes
Binary file not shown.

‎demos/webpack-app/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,12 @@
1010
"build": "pnpm clean && webpack --mode production",
1111
"eslint": "eslint ./src --ext .ts",
1212
"test:single": "echo \"No tests yet\"",
13-
"prettier": "prettier --check ./src",
14-
"prettier:fix": "prettier --write ./src"
13+
"prettier": "prettier --check ./src ./public/**/*.html ./public/**/*.css",
14+
"prettier:fix": "prettier --write ./src ./public/**/*.html ./public/**/*.css"
1515
},
1616
"dependencies": {
17-
"mini-canvas-editor": "^0.0.10",
18-
"mini-canvas-core": "^0.0.10"
17+
"mini-canvas-editor": "^0.1.0",
18+
"mini-canvas-core": "^0.1.0"
1919
},
2020
"devDependencies": {
2121
"ts-loader": "^9.4.2",

‎demos/webpack-app/public/assets/common.css‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
html,
2+
body {
3+
margin: 0;
4+
padding: 0;
5+
font: 14px/1.5em Arial, Verdana, sans-serif;
6+
}
7+
8+
.header {
9+
position: relative;
10+
z-index: 1000;
11+
display: flex;
12+
width: 100%;
13+
background: #474747;
14+
color: #fff;
15+
}
16+
.header.bb {
17+
border-bottom: 4px solid #252525;
18+
}
19+
.header-title {
20+
flex: 1;
21+
padding: 10px;
22+
}
23+
.header-title h1 {
24+
margin: 0;
25+
padding: 0;
26+
font-size: 14px;
27+
font-weight: normal;
28+
}
29+
.header-links {
30+
padding: 10px;
31+
}
32+
.header-links a {
33+
color: #fff;
34+
text-decoration: underline;
35+
}
36+
.header-links a:hover {
37+
text-decoration: none;
38+
}

‎demos/webpack-app/public/assets/favicon.ico‎

-102 Bytes
Binary file not shown.

‎demos/webpack-app/public/crop.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>🔲 Crop Example - Mini Canvas Editor</title>
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
7+
<link rel="icon" href="./assets/favicon.ico" />
8+
<link href="./assets/common.css" rel="stylesheet" />
9+
<style>
10+
body {
11+
background: url('./assets/background-pattern.svg');
12+
}
13+
p {
14+
text-align: center;
15+
margin: 0;
16+
padding: 10px 0;
17+
}
18+
#editor-placeholder {
19+
margin: 0 auto;
20+
width: 50vw;
21+
height: 50vh;
22+
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
23+
}
24+
@media only screen and (max-width: 600px) {
25+
#editor-placeholder {
26+
width: 100%;
27+
}
28+
}
29+
#save-button {
30+
border: 0;
31+
padding: 10px 20px;
32+
color: #fff;
33+
background: navy;
34+
cursor: pointer;
35+
border-radius: 5px;
36+
}
37+
#save-button:hover {
38+
opacity: 0.8;
39+
}
40+
a {
41+
color: navy;
42+
}
43+
a:hover {
44+
text-decoration: none;
45+
}
46+
</style>
47+
<script src="./builds/crop.js" defer></script>
48+
</head>
49+
<body>
50+
<header class="header">
51+
<div class="header-title">
52+
<h1>🔲 Crop Example</h1>
53+
</div>
54+
<div class="header-links">
55+
<a href="https://github.com/img-js/mini-canvas-editor" target="_blank">Mini Canvas Editor</a>
56+
</div>
57+
</header>
58+
59+
<div id="editor-placeholder"></div>
60+
<p>
61+
<button id="save-button">💾 Save cropped image</button>
62+
</p>
63+
</body>
64+
</html>

‎demos/webpack-app/public/inpainting-mask.html‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,16 @@
55
<title>🎨 Inpainting Mask Example - Mini Canvas Editor</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
77
<link rel="icon" href="./assets/favicon.ico" />
8+
<link href="./assets/common.css" rel="stylesheet" />
89
<style>
9-
html,
1010
body {
11-
margin: 0;
12-
padding: 0;
13-
font: 14px/1.5em Arial, Verdana, sans-serif;
14-
min-height: 100%;
1511
background: url('./assets/background-pattern.svg');
1612
}
1713
#placeholder {
1814
width: 100%;
1915
height: 50vh;
2016
}
21-
p, .debug {
17+
.debug {
2218
text-align: center;
2319
margin: 0;
2420
padding: 10px 0;
@@ -33,15 +29,20 @@
3329
<script src="./builds/inpainting-mask.js" defer></script>
3430
</head>
3531
<body>
32+
<header class="header bb">
33+
<div class="header-title">
34+
<h1>🎨 Inpainting Mask Example</h1>
35+
</div>
36+
<div class="header-links">
37+
<a href="https://github.com/img-js/mini-canvas-editor" target="_blank">Mini Canvas Editor</a>
38+
</div>
39+
</header>
40+
3641
<div id="placeholder"></div>
3742

3843
<div class="debug">
3944
<img id="previewImage" class="preview-image" />
4045
<img id="previewMaskImage" class="preview-image" />
4146
</div>
42-
43-
<p>
44-
<a href="https://github.com/img-js/mini-canvas-editor">Mini Canvas Editor</a>
45-
</p>
4647
</body>
4748
</html>

‎demos/webpack-app/public/template-creator.html‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,14 @@
55
<title>🎬 Template Creator Example - Mini Canvas Editor</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
77
<link rel="icon" href="./assets/favicon.ico" />
8+
<link href="./assets/common.css" rel="stylesheet" />
89
<style>
9-
html,
1010
body {
11-
margin: 0;
12-
padding: 0;
13-
font: 14px/1.5em Arial, Verdana, sans-serif;
1411
background: url('./assets/background-pattern.svg');
15-
min-height: 100%;
1612
}
1713
#placeholder {
1814
width: 100%;
19-
height: 60vh;
15+
height: 50vh;
2016
}
2117
p {
2218
text-align: center;
@@ -39,6 +35,15 @@
3935
<script src="./builds/template-creator.js" defer></script>
4036
</head>
4137
<body>
38+
<header class="header bb">
39+
<div class="header-title">
40+
<h1>🎬 Template Creator Example</h1>
41+
</div>
42+
<div class="header-links">
43+
<a href="https://github.com/img-js/mini-canvas-editor" target="_blank">Mini Canvas Editor</a>
44+
</div>
45+
</header>
46+
4247
<div id="placeholder"></div>
4348

4449
<p>Rects named $cat are replaced with a cat image, $name variables in texboxes are replaced by some name.</p>
@@ -48,9 +53,5 @@
4853
<div class="debug">
4954
<img id="preview" />
5055
</div>
51-
52-
<p>
53-
<a href="https://github.com/img-js/mini-canvas-editor">Mini Canvas Editor</a>
54-
</p>
5556
</body>
5657
</html>

‎demos/webpack-app/public/vanilla-javascript.html‎

Lines changed: 23 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,9 @@
55
<title>📦 Vanilla JavaScript Example - Mini Canvas Editor</title>
66
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
77
<link rel="icon" href="./assets/favicon.ico" />
8+
<link href="./assets/common.css" rel="stylesheet" />
89
<style>
9-
html,
1010
body {
11-
margin: 0;
12-
padding: 0;
13-
font: 14px/1.5em Arial, Verdana, sans-serif;
14-
min-height: 100%;
1511
background: url('./assets/background-pattern.svg');
1612
}
1713
#placeholder {
@@ -25,28 +21,39 @@
2521
</style>
2622
</head>
2723
<body>
24+
<header class="header bb">
25+
<div class="header-title">
26+
<h1>📦 Vanilla JavaScript Example</h1>
27+
</div>
28+
<div class="header-links">
29+
<a href="https://github.com/img-js/mini-canvas-editor" target="_blank">Mini Canvas Editor</a>
30+
</div>
31+
</header>
32+
2833
<div id="placeholder"></div>
2934

3035
<p>
3136
<button id="saveButton">Save bitmap</button>
3237
</p>
33-
<p>
34-
<a href="https://github.com/img-js/mini-canvas-editor">Mini Canvas Editor</a>
35-
</p>
38+
<p>This example uses vanilla JavaScript!</p>
3639

37-
<link href="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.10/css/editor.css" rel="stylesheet">
38-
<script src="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.0.10/dist/index.umd.js"></script>
40+
<link href="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.1.0/css/editor.css" rel="stylesheet" />
41+
<script src="https://cdn.jsdelivr.net/npm/mini-canvas-editor@0.1.0/dist/index.umd.js"></script>
3942
<script>
4043
const placeholder = document.getElementById('placeholder');
4144
const saveButton = document.getElementById('saveButton');
4245
const editor = miniCanvasEditor.Editor.createBlank(placeholder, 200, 300, {});
4346

44-
saveButton.addEventListener('click', () => {
45-
const a = document.createElement('a');
46-
a.download = 'filename.png';
47-
a.href = editor.render().toDataURL('image/png');
48-
a.click();
49-
}, false);
47+
saveButton.addEventListener(
48+
'click',
49+
() => {
50+
const a = document.createElement('a');
51+
a.download = 'filename.png';
52+
a.href = editor.render().toDataURL('image/png');
53+
a.click();
54+
},
55+
false
56+
);
5057
</script>
5158
</body>
5259
</html>

0 commit comments

Comments
 (0)