-
-
Notifications
You must be signed in to change notification settings - Fork 180
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #151 from rwv:canvas-scan
add scan effect using <canvas>
- Loading branch information
Showing
36 changed files
with
1,430 additions
and
0 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
66 changes: 66 additions & 0 deletions
66
src/components/canvas-scan/canvas-scan-settings/ScanSettingsCard.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,66 @@ | ||
<template> | ||
<n-card | ||
:segmented="{ | ||
content: true, | ||
footer: 'soft', | ||
}" | ||
> | ||
<n-collapse :default-expanded-names="['Settings']"> | ||
<template #header-extra> | ||
<n-icon><ChevronDown12Regular /></n-icon> | ||
</template> | ||
<template #arrow> | ||
<n-icon style="margin-right: 2px"> | ||
<AreaCustom /> | ||
</n-icon> | ||
</template> | ||
<n-collapse-item :title="t('settings.settings')" name="Settings"> | ||
<!-- Scan Settings --> | ||
<n-space :size="40" style="margin-bottom: 10px"> | ||
<ColorspaceSetting v-model:colorspace="config.colorspace" /> | ||
<BorderSetting v-model:border="config.border" /> | ||
</n-space> | ||
|
||
<RotateSetting v-model:rotate="config.rotate" /> | ||
<RotateVarianceSetting v-model:rotate_var="config.rotate_var" /> | ||
<BrightnessSetting v-model:brightness="config.brightness" /> | ||
<ContrastSetting v-model:contrast="config.contrast" /> | ||
<BlurSetting v-model:blur="config.blur" /> | ||
<NoiseSetting v-model:noise="config.noise" /> | ||
<ScaleSetting v-model:scale="config.scale" /> | ||
</n-collapse-item> | ||
</n-collapse> | ||
</n-card> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { NCard, NSpace, NCollapse, NCollapseItem, NIcon } from "naive-ui"; | ||
import { AreaCustom } from "@vicons/carbon"; | ||
import { ChevronDown12Regular } from "@vicons/fluent"; | ||
import BorderSetting from "./settings/BorderSetting.vue"; | ||
import RotateSetting from "./settings/RotateSetting.vue"; | ||
import RotateVarianceSetting from "./settings/RotateVarianceSetting.vue"; | ||
import ColorspaceSetting from "./settings/ColorspaceSetting.vue"; | ||
import BlurSetting from "./settings/BlurSetting.vue"; | ||
import NoiseSetting from "./settings/NoiseSetting.vue"; | ||
import ScaleSetting from "./settings/ScaleSetting.vue"; | ||
import BrightnessSetting from "./settings/BrightnessSetting.vue"; | ||
import ContrastSetting from "./settings/ContrastSetting.vue"; | ||
import type { ScanConfig } from "@/utils/canvas-scan"; | ||
import { useI18n } from "vue-i18n"; | ||
import { useVModel } from "@vueuse/core"; | ||
const { t } = useI18n(); | ||
const props = defineProps<{ | ||
config: ScanConfig; | ||
}>(); | ||
const emit = defineEmits<{ | ||
(e: "update:config", config: ScanConfig): void; | ||
}>(); | ||
const config = useVModel(props, "config", emit); | ||
</script> |
38 changes: 38 additions & 0 deletions
38
src/components/canvas-scan/canvas-scan-settings/settings/BlurSetting.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
<template> | ||
<n-form-item :label="t('settings.blur')" :show-feedback="false"> | ||
<template #label> | ||
<span :style="style"> | ||
{{ t("settings.blur") }} | ||
</span> | ||
</template> | ||
<n-slider v-model:value="blur_computed" :max="1" :min="0" :step="0.01" /> | ||
</n-form-item> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { computed } from "vue"; | ||
import { NFormItem, NSlider } from "naive-ui"; | ||
import { useI18n } from "vue-i18n"; | ||
const { t } = useI18n(); | ||
type blurType = number; | ||
const props = defineProps<{ | ||
blur: blurType; | ||
}>(); | ||
const emit = defineEmits<{ | ||
(e: "update:blur", value: blurType): void; | ||
}>(); | ||
const blur_computed = computed({ | ||
get: () => props.blur, | ||
set: (value) => emit("update:blur", value), | ||
}); | ||
const style = computed(() => { | ||
return { | ||
filter: `blur(${blur_computed.value}px)`, | ||
}; | ||
}); | ||
</script> |
40 changes: 40 additions & 0 deletions
40
src/components/canvas-scan/canvas-scan-settings/settings/BorderSetting.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
<template> | ||
<n-form-item :show-feedback="false"> | ||
<template #label> | ||
<span :style="style">{{ t("settings.border.label") }}</span> | ||
</template> | ||
<NSwitch v-model:value="borderSwitch"></NSwitch> | ||
</n-form-item> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { computed } from "vue"; | ||
import { NFormItem, NSwitch } from "naive-ui"; | ||
import { useI18n } from "vue-i18n"; | ||
const { t } = useI18n(); | ||
type borderType = boolean; | ||
const props = defineProps<{ | ||
border: borderType; | ||
}>(); | ||
const emit = defineEmits<{ | ||
(e: "update:border", value: borderType): void; | ||
}>(); | ||
const borderSwitch = computed({ | ||
get: () => props.border == true, | ||
set: (border) => emit("update:border", border ? true : false), | ||
}); | ||
const style = computed(() => { | ||
if (borderSwitch.value) { | ||
return { | ||
outline: "1px solid var(--n-label-text-color)", | ||
}; | ||
} else { | ||
return {}; | ||
} | ||
}); | ||
</script> |
43 changes: 43 additions & 0 deletions
43
src/components/canvas-scan/canvas-scan-settings/settings/BrightnessSetting.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<template> | ||
<n-form-item :label="t('settings.brightness')" :show-feedback="false"> | ||
<template #label> | ||
<span :style="style"> | ||
{{ t("settings.brightness") }} | ||
</span> | ||
</template> | ||
<n-slider | ||
v-model:value="brightness_computed" | ||
:max="2" | ||
:min="0" | ||
:step="0.01" | ||
/> | ||
</n-form-item> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { computed } from "vue"; | ||
import { NFormItem, NSlider } from "naive-ui"; | ||
import { useI18n } from "vue-i18n"; | ||
const { t } = useI18n(); | ||
type brightnessType = number; | ||
const props = defineProps<{ | ||
brightness: brightnessType; | ||
}>(); | ||
const emit = defineEmits<{ | ||
(e: "update:brightness", value: brightnessType): void; | ||
}>(); | ||
const brightness_computed = computed({ | ||
get: () => props.brightness, | ||
set: (value) => emit("update:brightness", value), | ||
}); | ||
const style = computed(() => { | ||
return { | ||
filter: `brightness(${brightness_computed.value})`, | ||
}; | ||
}); | ||
</script> |
65 changes: 65 additions & 0 deletions
65
src/components/canvas-scan/canvas-scan-settings/settings/ColorspaceSetting.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
<template> | ||
<n-form-item :label="t('settings.colorspace.label')" :show-feedback="false"> | ||
<template #label> | ||
<n-gradient-text :gradient="linearGradient" v-show="colorspaceSwitch"> | ||
{{ t("settings.colorspace.label") }} | ||
</n-gradient-text> | ||
<n-text v-show="!colorspaceSwitch">{{ | ||
t("settings.colorspace.label") | ||
}}</n-text> | ||
</template> | ||
<NSwitch v-model:value="colorspaceSwitch" :rail-style="railStyle"> | ||
<template #checked>{{ t("settings.colorspace.colorful") }}</template> | ||
<template #unchecked>{{ t("settings.colorspace.grayscale") }}</template> | ||
</NSwitch> | ||
</n-form-item> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { type CSSProperties, computed } from "vue"; | ||
import { NFormItem, NSwitch, NGradientText, NText } from "naive-ui"; | ||
import { useI18n } from "vue-i18n"; | ||
const { t } = useI18n(); | ||
type colorspaceType = "sRGB" | "gray"; | ||
const props = defineProps<{ | ||
colorspace: colorspaceType; | ||
}>(); | ||
const emit = defineEmits<{ | ||
(e: "update:colorspace", value: colorspaceType): void; | ||
}>(); | ||
const colorspaceSwitch = computed({ | ||
get: () => props.colorspace !== "gray", | ||
set: (colorspace) => emit("update:colorspace", colorspace ? "sRGB" : "gray"), | ||
}); | ||
const linearGradient = | ||
"linear-gradient(to right top, #845ec2, #a55dbd, #c15db5, #d95fab, #ec64a0, #f76e91, #fd7b84, #ff8a7a, #ffa26e, #ffbd66, #ffda65, #f9f871)"; | ||
const railStyle = ({ | ||
focused, | ||
checked, | ||
}: { | ||
focused: boolean; | ||
checked: boolean; | ||
}) => { | ||
const style: CSSProperties = {}; | ||
if (checked) { | ||
// If colorspace is colorful, the rail is colored. | ||
// get random color from array | ||
style.background = linearGradient; | ||
if (focused) { | ||
style.boxShadow = "0 0 0 2px #FF6F9140"; | ||
} | ||
} else { | ||
style.background = "#000000"; | ||
if (focused) { | ||
style.boxShadow = "0 0 0 2px #00000040"; | ||
} | ||
} | ||
return style; | ||
}; | ||
</script> |
43 changes: 43 additions & 0 deletions
43
src/components/canvas-scan/canvas-scan-settings/settings/ContrastSetting.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,43 @@ | ||
<template> | ||
<n-form-item :label="t('settings.contrast')" :show-feedback="false"> | ||
<template #label> | ||
<span :style="style"> | ||
{{ t("settings.contrast") }} | ||
</span> | ||
</template> | ||
<n-slider | ||
v-model:value="contrast_computed" | ||
:max="2" | ||
:min="0" | ||
:step="0.01" | ||
/> | ||
</n-form-item> | ||
</template> | ||
|
||
<script lang="ts" setup> | ||
import { computed } from "vue"; | ||
import { NFormItem, NSlider } from "naive-ui"; | ||
import { useI18n } from "vue-i18n"; | ||
const { t } = useI18n(); | ||
type contrastType = number; | ||
const props = defineProps<{ | ||
contrast: contrastType; | ||
}>(); | ||
const emit = defineEmits<{ | ||
(e: "update:contrast", value: contrastType): void; | ||
}>(); | ||
const contrast_computed = computed({ | ||
get: () => props.contrast, | ||
set: (value) => emit("update:contrast", value), | ||
}); | ||
const style = computed(() => { | ||
return { | ||
filter: `contrast(${contrast_computed.value})`, | ||
}; | ||
}); | ||
</script> |
Oops, something went wrong.