Make paper look recycled yellowish (#225) (fix #222)

* feat: adds yellowish option

* fix: fix scan using canvas yellowish effect

---------

Co-authored-by: rwv <[email protected]>

src/components/scan-settings/ScanSettingsCard.vue

@@ -24,6 +24,7 @@
         <RotateSetting v-model:rotate="config.rotate" />
         <RotateVarianceSetting v-model:rotate_var="config.rotate_var" />
         <BrightnessSetting v-model:brightness="config.brightness" />
+        <YellowishSetting v-model:yellowish="config.yellowish" />
         <ContrastSetting v-model:contrast="config.contrast" />
         <BlurSetting v-model:blur="config.blur" />
         <NoiseSetting v-model:noise="config.noise" />
@@ -46,6 +47,7 @@ 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 YellowishSetting from './settings/YellowishSetting.vue'
 import ContrastSetting from './settings/ContrastSetting.vue'
 
 import type { ScanConfig } from '@/utils/scan-renderer'

src/components/scan-settings/settings/YellowishSetting.vue

@@ -0,0 +1,47 @@
+<template>
+  <n-form-item :label="t('settings.yellowish')" :show-feedback="false">
+    <template #label>
+      <span :style="style" class="white-variance-label">
+        {{ t('settings.yellowish') }}
+      </span>
+    </template>
+    <n-slider v-model:value="yellowish" :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'
+import { useVModel } from '@vueuse/core'
+
+const { t } = useI18n()
+
+type yellowishType = number
+
+const props = defineProps<{
+  yellowish: yellowishType
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:yellowish', value: yellowishType): void
+}>()
+
+const yellowish = useVModel(props, 'yellowish', emit)
+
+const style = computed(() => {
+  const value = Math.max(0, Math.min(1, yellowish.value))
+  const [r, g, b] = [255, 255, 255].map((start, i) =>
+    Math.round(start + ([252, 242, 199][i] - start) * value)
+  )
+  return {
+    color: `rgb(${r}, ${g}, ${b})`
+  }
+})
+</script>
+
+<style scoped>
+.white-variance-label {
+  transition: filter 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+</style>

src/locale/en/settings.ts

@@ -18,6 +18,7 @@ export const settings = {
   pdfSelectLabel: 'Select PDF',
   pdfNoSelectMessage: 'No PDF selected',
   scale: 'Resolution',
+  yellowish: 'Yellowish',
   brightness: 'Brightness',
   contrast: 'Contrast'
 }

src/utils/scan-renderer/canvas-scan/scan-canvas.ts

@@ -47,6 +47,9 @@ export async function scanCanvas(
   // add brightness
   ctx.filter += ` brightness(${config.brightness})`
 
+  // modify yellowish
+  ctx.filter += ` sepia(${config.yellowish})`
+
   // add contrast
   ctx.filter += ` contrast(${config.contrast})`
 

src/utils/scan-renderer/canvas-scan/types.ts

@@ -9,6 +9,7 @@ export interface ScanConfig {
   border: boolean
   scale: number
   brightness: number
+  yellowish: number
   contrast: number
   output_format: 'image/png' | 'image/jpeg'
 }
@@ -22,6 +23,7 @@ export const defaultConfig: ScanConfig = {
   border: false,
   scale: 2,
   brightness: 1,
+  yellowish: 0,
   contrast: 1,
   output_format: 'image/jpeg'
 }

src/utils/scan-renderer/config.types.ts

@@ -9,6 +9,7 @@ export interface ScanConfig {
   border: boolean
   scale: number
   brightness: number
+  yellowish: number
   contrast: number
   output_format: 'image/png' | 'image/jpeg'
 }

src/utils/scan-renderer/magica-scan/apply-scan-effect/getProcessCommand.ts

@@ -5,7 +5,8 @@ export function getProcessCommand(
   inputFilename: string,
   outputFilename: string
 ): string {
-  const { rotate, rotate_var, colorspace, blur, noise, border, brightness, contrast } = config
+  const { rotate, rotate_var, colorspace, blur, noise, border, brightness, yellowish, contrast } =
+    config
   const thresholdFunc = (value: number) => !(value > -0.05 && value < 0.05)
   const args: string[] = []
   args.push('convert')
@@ -41,6 +42,9 @@ export function getProcessCommand(
 
   args.push(`-brightness-contrast ${brightness_.toFixed(2)}x${contrast_.toFixed(2)}`)
 
+  const yellowish_ = (yellowish * 20) / 1
+  args.push(`-fill 'rgb(252,242,199)' -colorize ${yellowish_}%`)
+
   args.push(outputFilename)
 
   // join with space

src/utils/scan-renderer/magica-scan/types.ts

@@ -9,6 +9,7 @@ export interface ScanConfig {
   border: boolean
   scale: number
   brightness: number
+  yellowish: number
   contrast: number
   output_format: 'image/png' | 'image/jpeg'
 }
@@ -22,6 +23,7 @@ export const defaultConfig: ScanConfig = {
   border: false,
   scale: 2,
   brightness: 1,
+  yellowish: 0,
   contrast: 1,
   output_format: 'image/jpeg'
 }