How do I change the brightness of an image? – Javascript

I want to make a simple web photo editor. I need to change the brightness, contrast.
Here’s the code.

<script setup lang="ts">
import { ref } from 'vue'
import { getFromDB } from './db.ts'

const data=ref(getFromDB())
const img=ref<HTMLImageElement>()
const onLighter=()=>img.value.style['filter']='brightness(120%)';
const onDarker=()=>img.value.style['filter']='brightness(80%)';
</script>

<template>
  <h1>{{ src===data }}</h1>
  <button @click="onLighter">lighter</button>
  <button @click="onDarker">darker</button>
  <img ref="img" :src="'data:image/jpeg;base64,'+data"/>
</template>

We read the data from the emulation database.
Changing the brightness and contrast on the screen is very easy.
But how do we make the data change?
playground…