<template> <div class="container"> <img :src="originalImage" class="original" @load="convertToGrayscale"> <img :src="grayscaleImage" class="grayscale" v-show="grayscale"> </div> </template> <script> export default { data() { return { originalImage: '/images/pic.jpg', grayscaleImage: '', grayscale: false }; }, methods: { convertToGrayscale() { let canvas = document.createElement('canvas'); let ctx = canvas.getContext('2d'); let img = document.querySelector('.original'); canvas.width = img.width; canvas.height = img.height; ctx.drawImage(img, 0, 0); let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height); let data = imageData.data; for (let i = 0; i < data.length; i += 4) { let brightness = (data[i] + data[i + 1] + data[i + 2]) / 3; data[i] = brightness; data[i + 1] = brightness; data[i + 2] = brightness; } ctx.putImageData(imageData, 0, 0); this.grayscaleImage = canvas.toDataURL(); this.grayscale = true; } } }; </script> <style scoped> .container { display: flex; justify-content: center; align-items: center; height: 100vh; } .original, .grayscale { max-width: 300px; } .grayscale { display: none; } </style>
标签: Vue图片处理
上面是“如何在Vue中实现图片的灰度处理?”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://m.ipkd.cn/webs_12894.html
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!