fix: eslinit errors
This commit is contained in:
+115
-109
@@ -101,12 +101,17 @@ function newImage() {
|
||||
|
||||
function download() {
|
||||
const link = document.createElement("a");
|
||||
link.download = `coverify-${new Date().getTime()}.png`;
|
||||
link.download = `coverify-${new Date().getTime().toString()}.png`;
|
||||
link.href = canvas.value?.toDataURL() ?? "#";
|
||||
link.click();
|
||||
}
|
||||
|
||||
function applyFilter(f: Filter, r: number, g: number, b: number): [number, number, number] {
|
||||
function applyFilter(
|
||||
f: Filter,
|
||||
r: number,
|
||||
g: number,
|
||||
b: number,
|
||||
): [number, number, number] {
|
||||
switch (f) {
|
||||
case Filter.Gray:
|
||||
const gray = 0.21 * r + 0.72 * g + 0.07 * b;
|
||||
@@ -147,11 +152,12 @@ function draw() {
|
||||
targetSize.value,
|
||||
targetSize.value,
|
||||
);
|
||||
const pixelData = imageData.data;
|
||||
// @ts-expect-error: safer to cast
|
||||
const pixelData = imageData.data as number[];
|
||||
for (let i = 0; i < pixelData.length; i += 4) {
|
||||
const r1 = (pixelData[i] as number);
|
||||
const g1 = (pixelData[i + 1] as number);
|
||||
const b1 = (pixelData[i + 2] as number);
|
||||
const r1 = pixelData[i];
|
||||
const g1 = pixelData[i + 1];
|
||||
const b1 = pixelData[i + 2];
|
||||
|
||||
const [r2, g2, b2] = applyFilter(filter.value, r1, g1, b1);
|
||||
|
||||
@@ -249,109 +255,109 @@ onMounted(() => {
|
||||
<col style="width: 10%" />
|
||||
</colgroup>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td><label for="center-x">Center X:</label></td>
|
||||
<td>
|
||||
<input
|
||||
id="center-x"
|
||||
v-model="centerX"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
@input="draw"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ (centerX * 100).toFixed(0) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="center-y">Center Y:</label></td>
|
||||
<td>
|
||||
<input
|
||||
id="center-y"
|
||||
v-model="centerY"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
@input="draw"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ (centerY * 100).toFixed(0) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="zoom">Zoom:</label></td>
|
||||
<td>
|
||||
<input
|
||||
id="zoom"
|
||||
v-model="zoom"
|
||||
type="range"
|
||||
min="1"
|
||||
max="4"
|
||||
step="0.01"
|
||||
@input="draw"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ (zoom * 100).toFixed(0) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="filter">Filter:</label></td>
|
||||
<td>
|
||||
<select id="filter" v-model="filter" @change="draw">
|
||||
<option
|
||||
v-for="value in Object.values(Filter)"
|
||||
:key="`filter-${value}`"
|
||||
>
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="pa-pos">Sticker Position:</label></td>
|
||||
<td>
|
||||
<select id="pa-pos" v-model="paPos" @change="draw">
|
||||
<option
|
||||
v-for="value in Object.values(PAPosition)"
|
||||
:key="`pa-pos-${value}`"
|
||||
>
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr v-if="paPos !== PAPosition.None">
|
||||
<td><label for="pa-scale">Sticker Scale:</label></td>
|
||||
<td>
|
||||
<input
|
||||
id="pa-scale"
|
||||
v-model="paScale"
|
||||
type="range"
|
||||
min="0.10"
|
||||
max="0.30"
|
||||
step="0.01"
|
||||
@input="draw"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ (paScale * 100).toFixed(0) }}%</td>
|
||||
</tr>
|
||||
<tr v-if="paPos !== PAPosition.None">
|
||||
<td><label for="pa-margin">Sticker Margin:</label></td>
|
||||
<td>
|
||||
<input
|
||||
id="pa-margin"
|
||||
v-model="paMargin"
|
||||
type="range"
|
||||
min="0"
|
||||
max="0.1"
|
||||
step="0.01"
|
||||
@input="draw"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ (paMargin * 100).toFixed(0) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="center-x">Center X:</label></td>
|
||||
<td>
|
||||
<input
|
||||
id="center-x"
|
||||
v-model="centerX"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
@input="draw"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ (centerX * 100).toFixed(0) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="center-y">Center Y:</label></td>
|
||||
<td>
|
||||
<input
|
||||
id="center-y"
|
||||
v-model="centerY"
|
||||
type="range"
|
||||
min="0"
|
||||
max="1"
|
||||
step="0.01"
|
||||
@input="draw"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ (centerY * 100).toFixed(0) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="zoom">Zoom:</label></td>
|
||||
<td>
|
||||
<input
|
||||
id="zoom"
|
||||
v-model="zoom"
|
||||
type="range"
|
||||
min="1"
|
||||
max="4"
|
||||
step="0.01"
|
||||
@input="draw"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ (zoom * 100).toFixed(0) }}%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="filter">Filter:</label></td>
|
||||
<td>
|
||||
<select id="filter" v-model="filter" @change="draw">
|
||||
<option
|
||||
v-for="value in Object.values(Filter)"
|
||||
:key="`filter-${value}`"
|
||||
>
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><label for="pa-pos">Sticker Position:</label></td>
|
||||
<td>
|
||||
<select id="pa-pos" v-model="paPos" @change="draw">
|
||||
<option
|
||||
v-for="value in Object.values(PAPosition)"
|
||||
:key="`pa-pos-${value}`"
|
||||
>
|
||||
{{ value }}
|
||||
</option>
|
||||
</select>
|
||||
</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr v-if="paPos !== PAPosition.None">
|
||||
<td><label for="pa-scale">Sticker Scale:</label></td>
|
||||
<td>
|
||||
<input
|
||||
id="pa-scale"
|
||||
v-model="paScale"
|
||||
type="range"
|
||||
min="0.10"
|
||||
max="0.30"
|
||||
step="0.01"
|
||||
@input="draw"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ (paScale * 100).toFixed(0) }}%</td>
|
||||
</tr>
|
||||
<tr v-if="paPos !== PAPosition.None">
|
||||
<td><label for="pa-margin">Sticker Margin:</label></td>
|
||||
<td>
|
||||
<input
|
||||
id="pa-margin"
|
||||
v-model="paMargin"
|
||||
type="range"
|
||||
min="0"
|
||||
max="0.1"
|
||||
step="0.01"
|
||||
@input="draw"
|
||||
/>
|
||||
</td>
|
||||
<td>{{ (paMargin * 100).toFixed(0) }}%</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user