Skip to content

Commit 7edfd86

Browse files
markus-wamarkus-wa
committed
linting cfg
1 parent 5e86006 commit 7edfd86

File tree

9 files changed

+1098
-125
lines changed

9 files changed

+1098
-125
lines changed

‎.eslintrc.yml‎

Lines changed: 176 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,176 @@
1+
env:
2+
node: true
3+
commonjs: true
4+
es2021: true
5+
root: true
6+
extends:
7+
- 'plugin:node/recommended'
8+
- 'eslint:recommended'
9+
- 'plugin:@typescript-eslint/recommended'
10+
- 'prettier'
11+
parser: '@typescript-eslint/parser'
12+
parserOptions:
13+
ecmaVersion: 12
14+
sourceType: module
15+
plugins: ['@typescript-eslint']
16+
rules:
17+
array-bracket-spacing: 'error'
18+
array-callback-return: 'error'
19+
brace-style: ['error', '1tbs']
20+
class-methods-use-this: 'error'
21+
computed-property-spacing: 'error'
22+
consistent-return: 'error'
23+
curly: ['error', 'all']
24+
default-case: 'error'
25+
default-param-last: 'error'
26+
dot-location: ['error', 'property']
27+
dot-notation: ['error', { allowKeywords: true }]
28+
eol-last: 'error'
29+
eqeqeq: 'error'
30+
func-call-spacing: 'error'
31+
func-style: ['error', 'declaration']
32+
function-paren-newline: ['error', 'consistent']
33+
generator-star-spacing: 'error'
34+
#guard-for-in: "error"
35+
key-spacing: ['error', { beforeColon: false, afterColon: true }]
36+
keyword-spacing: 'error'
37+
max-len:
38+
[
39+
'error',
40+
160,
41+
{
42+
'ignoreComments': true,
43+
'ignoreUrls': true,
44+
'ignoreStrings': true,
45+
'ignoreTemplateLiterals': true,
46+
'ignoreRegExpLiterals': true,
47+
},
48+
]
49+
max-statements-per-line: 'error'
50+
new-cap: 'error'
51+
new-parens: 'error'
52+
no-alert: 'error'
53+
no-array-constructor: 'error'
54+
no-caller: 'error'
55+
no-confusing-arrow: 'error'
56+
#no-console: "error"
57+
no-delete-var: 'error'
58+
no-else-return: ['error', { allowElseIf: false }]
59+
no-eval: 'error'
60+
no-extend-native: 'error'
61+
no-extra-bind: 'error'
62+
no-fallthrough: 'error'
63+
no-floating-decimal: 'error'
64+
no-global-assign: 'error'
65+
no-implied-eval: 'error'
66+
no-invalid-this: 'error'
67+
no-iterator: 'error'
68+
no-label-var: 'error'
69+
no-labels: 'error'
70+
no-lone-blocks: 'error'
71+
no-loop-func: 'error'
72+
no-mixed-spaces-and-tabs: ['error', false]
73+
no-multi-spaces: 'error'
74+
no-multi-str: 'error'
75+
no-multiple-empty-lines: ['error', { max: 2, maxBOF: 0, maxEOF: 0 }]
76+
no-nested-ternary: 'error'
77+
no-new: 'error'
78+
no-new-func: 'error'
79+
no-new-object: 'error'
80+
no-new-wrappers: 'error'
81+
no-octal: 'error'
82+
no-octal-escape: 'error'
83+
no-param-reassign: 'error'
84+
no-proto: 'error'
85+
no-process-exit: 'off'
86+
no-redeclare: 'error'
87+
no-restricted-properties:
88+
[
89+
'error',
90+
{ property: 'substring', message: 'Use .slice instead of .substring.' },
91+
{ property: 'substr', message: 'Use .slice instead of .substr.' },
92+
{ object: 'assert', property: 'equal', message: 'Use assert.strictEqual instead of assert.equal.' },
93+
{ object: 'assert', property: 'notEqual', message: 'Use assert.notStrictEqual instead of assert.notEqual.' },
94+
{ object: 'assert', property: 'deepEqual', message: 'Use assert.deepStrictEqual instead of assert.deepEqual.' },
95+
{
96+
object: 'assert',
97+
property: 'notDeepEqual',
98+
message: 'Use assert.notDeepStrictEqual instead of assert.notDeepEqual.',
99+
},
100+
]
101+
no-return-assign: 'error'
102+
no-script-url: 'error'
103+
no-self-assign: 'error'
104+
no-self-compare: 'error'
105+
no-sequences: 'error'
106+
no-throw-literal: 'error'
107+
no-trailing-spaces: 'error'
108+
no-undef: ['error', { typeof: true }]
109+
no-undef-init: 'error'
110+
#no-undefined: "error"
111+
no-underscore-dangle: ['error', { allowAfterThis: true }]
112+
no-unmodified-loop-condition: 'error'
113+
no-unneeded-ternary: 'error'
114+
no-unused-expressions: 'error'
115+
no-use-before-define: 'error'
116+
no-useless-call: 'error'
117+
no-useless-computed-key: 'error'
118+
no-useless-concat: 'error'
119+
no-useless-escape: 'error'
120+
no-useless-rename: 'error'
121+
no-useless-return: 'error'
122+
no-whitespace-before-property: 'error'
123+
no-var: 'error'
124+
node/callback-return: ['error', ['cb', 'callback', 'next']]
125+
node/handle-callback-err: ['error', 'err']
126+
node/no-deprecated-api: 'error'
127+
node/no-mixed-requires: 'error'
128+
node/no-new-require: 'error'
129+
node/no-path-concat: 'error'
130+
node/no-process-exit: 'error'
131+
object-curly-newline: ['error', { 'consistent': true, 'multiline': true }]
132+
object-curly-spacing: ['error', 'always']
133+
object-property-newline: ['error', { 'allowAllPropertiesOnSameLine': true }]
134+
object-shorthand: 'error'
135+
one-var-declaration-per-line: 'error'
136+
operator-assignment: 'error'
137+
operator-linebreak: 'error'
138+
padding-line-between-statements:
139+
[
140+
'error',
141+
{ blankLine: 'always', prev: ['const', 'let', 'var'], next: '*' },
142+
{ blankLine: 'any', prev: ['const', 'let', 'var'], next: ['const', 'let', 'var'] },
143+
]
144+
prefer-arrow-callback: 'error'
145+
prefer-const: 'error'
146+
prefer-numeric-literals: 'error'
147+
prefer-promise-reject-errors: 'error'
148+
prefer-regex-literals: 'error'
149+
prefer-rest-params: 'error'
150+
prefer-spread: 'error'
151+
prefer-template: 'error'
152+
quotes: ['error', 'single', { avoidEscape: true }]
153+
quote-props: ['error', 'as-needed']
154+
radix: 'error'
155+
require-unicode-regexp: 'error'
156+
rest-spread-spacing: 'error'
157+
semi: 'error'
158+
semi-spacing: ['error', { before: false, after: true }]
159+
semi-style: 'error'
160+
space-before-blocks: 'error'
161+
space-before-function-paren: ['error', { 'anonymous': 'never', 'named': 'never', 'asyncArrow': 'always' }]
162+
space-in-parens: 'error'
163+
space-infix-ops: 'error'
164+
space-unary-ops: ['error', { words: true, nonwords: false }]
165+
spaced-comment: ['error', 'always', { exceptions: ['-'] }]
166+
#strict: ["error", "global"]
167+
switch-colon-spacing: 'error'
168+
symbol-description: 'error'
169+
template-curly-spacing: ['error', 'never']
170+
template-tag-spacing: 'error'
171+
unicode-bom: 'error'
172+
wrap-iife: 'error'
173+
yield-star-spacing: 'error'
174+
yoda: ['error', 'never', { exceptRange: true }]
175+
'node/no-unsupported-features/es-syntax': ['error', { ignores: ['modules'] }]
176+
'node/no-missing-import': off

‎.github/dependabot.yml‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
version: 2
22
updates:
3-
- package-ecosystem: npm
4-
directory: '/'
5-
schedule:
6-
interval: weekly
7-
day: monday
8-
time: "04:00"
9-
open-pull-requests-limit: 10
3+
- package-ecosystem: npm
4+
directory: '/'
5+
schedule:
6+
interval: weekly
7+
day: monday
8+
time: '04:00'
9+
open-pull-requests-limit: 10

‎.prettierrc‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"semi": true,
3+
"useTabs": true,
4+
"trailingComma": "es5",
5+
"singleQuote": true,
6+
"printWidth": 120
7+
}

‎README.md‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
# stickerify
2+
23
Add sticker-like border effect to images with transparency
34

45
Input:
@@ -20,33 +21,33 @@ Stickerify can run in a web browser, or in a Node.js environment. For Node.js, y
2021
### HTML
2122

2223
```html
23-
<img id="out"/>
24+
<img id="out" />
2425
```
2526

2627
```js
2728
const img = new Image(),
28-
out = document.getElementById("out");
29+
out = document.getElementById('out');
2930

30-
img.crossOrigin = "anonymous";
31+
img.crossOrigin = 'anonymous';
3132
img.onload = () => {
32-
out.src = stickerify(img, 3, "white").toDataURL();
33+
out.src = stickerify(img, 3, 'white').toDataURL();
3334
};
34-
img.src = "https://raw.githubusercontent.com/markus-wa/stickerify/main/example/input.png";
35+
img.src = 'https://raw.githubusercontent.com/markus-wa/stickerify/main/example/input.png';
3536
```
3637

3738
When run in the browser, `stickerify()` returns a [HTML5 canvas element](https://www.w3schools.com/html/html5_canvas.asp).
3839

3940
### Node.js
4041

4142
```js
42-
const { stickerify } = require("stickerify");
43-
const { loadImage } = require( "canvas" );
44-
const { writeFile } = require( "fs" );
45-
46-
loadImage("https://raw.githubusercontent.com/markus-wa/stickerify/main/example/input.png")
47-
.then(image => stickerify(image, 3, "white"))
48-
.then(image => stickerify(image, 1, "grey"))
49-
.then(canvas => writeFile("output.png", canvas.toBuffer(), err => console.log(err || "done")));
43+
const { stickerify } = require('stickerify');
44+
const { loadImage } = require('canvas');
45+
const { writeFile } = require('fs');
46+
47+
loadImage('https://raw.githubusercontent.com/markus-wa/stickerify/main/example/input.png')
48+
.then((image) => stickerify(image, 3, 'white'))
49+
.then((image) => stickerify(image, 1, 'grey'))
50+
.then((canvas) => writeFile('output.png', canvas.toBuffer(), (err) => console.log(err || 'done')));
5051
```
5152

5253
When run in Node.js, `stickerify()` returns a [Canvas](https://www.npmjs.com/package/canvas) object.

‎package.json‎

Lines changed: 27 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,29 @@
11
{
2-
"name": "stickerify",
3-
"version": "0.1.4",
4-
"description": "add sticker outline to images with transparent edges",
5-
"main": "dist/index.js",
6-
"types": "dist/index.d.ts",
7-
"repository": "https://github.com/markus-wa/stickerify",
8-
"author": "Markus Walther",
9-
"license": "MIT",
10-
"scripts": {
11-
"build": "tsc"
12-
},
13-
"dependencies": {
14-
"@types/node": "^16.11.4",
15-
"canvas" : "^2.8.0",
16-
"typescript": "^4.4.4"
17-
},
18-
"devDependencies": {
19-
"ts-node": "^10.4.0"
20-
}
2+
"name": "stickerify",
3+
"version": "0.1.4",
4+
"description": "add sticker outline to images with transparent edges",
5+
"main": "dist/index.js",
6+
"types": "dist/index.d.ts",
7+
"repository": "https://github.com/markus-wa/stickerify",
8+
"author": "Markus Walther",
9+
"license": "MIT",
10+
"scripts": {
11+
"build": "tsc",
12+
"lint": "eslint",
13+
"pretty": "prettier --write ."
14+
},
15+
"dependencies": {
16+
"@types/node": "^16.11.4",
17+
"canvas": "^2.8.0",
18+
"typescript": "^4.4.4"
19+
},
20+
"devDependencies": {
21+
"@typescript-eslint/eslint-plugin": "^5.4.0",
22+
"@typescript-eslint/parser": "^5.4.0",
23+
"eslint": "^8.2.0",
24+
"eslint-config-prettier": "^8.3.0",
25+
"eslint-plugin-node": "^11.1.0",
26+
"prettier": "^2.4.1",
27+
"ts-node": "^10.4.0"
28+
}
2129
}

‎src/index.ts‎

Lines changed: 23 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,35 @@
1-
import { createCanvas, Canvas, Image } from "canvas";
1+
import { createCanvas, Canvas, Image } from 'canvas';
22

3-
import trim from "./trim";
3+
import trim from './trim';
44

55
function stickerify(
6-
img: Image | HTMLImageElement,
7-
thickness: number = 1,
8-
fillStyle: string | CanvasGradient | CanvasPattern = "white",
9-
samples: number = 36
6+
img: Image | HTMLImageElement,
7+
thickness: number = 1,
8+
fillStyle: string | CanvasGradient | CanvasPattern = 'white',
9+
samples: number = 36
1010
): Canvas | HTMLCanvasElement {
11+
const x = thickness + 1, // 1px buffer in case of rounding errors etc.
12+
y = thickness + 1;
1113

12-
const x = thickness + 1, // 1px buffer in case of rounding errors etc.
13-
y = thickness + 1;
14+
const canvas = createCanvas(img.width + x * 2, img.height + y * 2),
15+
ctx = canvas.getContext('2d')!;
1416

15-
const canvas = createCanvas(img.width + x * 2, img.height + y * 2),
16-
ctx = canvas.getContext("2d")!;
17+
for (let angle = 0; angle < 360; angle += 360 / samples) {
18+
ctx.drawImage(
19+
img,
20+
thickness * Math.sin((Math.PI * 2 * angle) / 360) + x,
21+
thickness * Math.cos((Math.PI * 2 * angle) / 360) + y
22+
);
23+
}
1724

18-
for (let angle = 0; angle < 360; angle += 360 / samples) {
19-
ctx.drawImage(
20-
img,
21-
thickness * Math.sin((Math.PI * 2 * angle) / 360) + x,
22-
thickness * Math.cos((Math.PI * 2 * angle) / 360) + y
23-
);
24-
}
25+
ctx.globalCompositeOperation = 'source-in';
26+
ctx.fillStyle = fillStyle;
27+
ctx.fillRect(0, 0, canvas.width, canvas.height);
2528

26-
ctx.globalCompositeOperation = "source-in";
27-
ctx.fillStyle = fillStyle;
28-
ctx.fillRect(0, 0, canvas.width, canvas.height);
29+
ctx.globalCompositeOperation = 'source-over';
30+
ctx.drawImage(img, x, y);
2931

30-
ctx.globalCompositeOperation = "source-over";
31-
ctx.drawImage(img, x, y);
32-
33-
return trim(canvas);
32+
return trim(canvas);
3433
}
3534

3635
export { stickerify };

0 commit comments

Comments
 (0)