VUE如何美颜
// main.js
import Vue from 'vue';
import App from './App.vue';
import VueBeauty from 'vue-beauty';
Vue.use(VueBeauty);
new Vue({
render: h => h(App),
}).$mount('#app');
// App.vue
在线美颜应用
亮度:
对比度:
export default {
data() {
return {
brightness: 1,
contrast: 1,
img: null,
};
},
methods: {
onFileChange(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = (event) => {
this.img = new Image();
this.img.src = event.target.result;
this.img.onload = () => {
this.drawImage();
};
};
reader.readAsDataURL(file);
},
drawImage() {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
canvas.width = this.img.width;
canvas.height = this.img.height;
ctx.drawImage(this.img, 0, 0);
this.applyFilters();
},
applyFilters() {
const canvas = this.$refs.canvas;
const ctx = canvas.getContext('2d');
let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
imageData = this.applyBrightness(imageData, this.brightness);
imageData = this.applyContrast(imageData, this.contrast);
ctx.putImageData(imageData, 0, 0);
},
applyBrightness(imageData, brightness) {
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
data[i] *= brightness;
data[i + 1] *= brightness;
data[i + 2] *= brightness;
}
return imageData;
},
applyContrast(imageData, contrast) {
const data = imageData.data;
const factor = (259 * (contrast + 255)) / (255 * (259 - contrast));
for (let i = 0; i < data.length; i += 4) {
data[i] = factor * (data[i] - 128) + 128;
data[i + 1] = factor * (data[i + 1] - 128) + 128;
data[i + 2] = factor * (data[i + 2] - 128) + 128;
}
return imageData;
},
},
};
.controls {
margin-top: 20px;
}
.controls label {
display: block;
margin: 10px 0;
}