我想做一个简单的网页图片编辑器。我想更改亮度、对比度等
下面是我的代码:
<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>
我们从“模拟”数据库读取数据(只是一个函数,返回图像作为base64-data)。
改变屏幕上的亮度和对比度非常容易。
但是在修改后如何保存被处理的图像数据呢?
Playground...
3条答案
按热度按时间wf82jlnq1#
首先,你实际上并没有操纵图像。您正在使用CSS过滤器设置图像样式。图像未更改,请在应用滤镜后尝试保存图像;还是原始图像。
要进行图像处理,您可以使用Canvas,因为它允许一些非常整洁的图像处理。
Mozilla有一个很棒的教程,我会推荐阅读;https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial
但我会给予你一个基本的例子,我们可以变亮和变暗的图像,我们从“DB”加载。
以及我们如何从画布中获取操作数据,以便我们可以使用它更新我们的“DB”。
v6ylcynt2#
为了让数据“改变”,你需要某种方式从服务器上采样变化,要么是轮询机制,要么是消息传递(例如:g WebSocket或SSE)
bmp9r5qi3#
尝试用CSS属性i来解决这个问题。e.,
filter
您可以在过滤器here上找到更多详细信息检查此codesandbox demo,查看Vue中的图像亮度和滤镜更改。js
希望这对你有帮助