使用JavaScript操作文件读写需要借助于浏览器提供的File API。其中，FileReader对象提供了读取文件的方法，如下所示：
// 选择文件
const fileInput = document.querySelector('input[type="file"]');
// 获取文件
const file = fileInput.files[0];
// 创建FileReader对象
const reader = new FileReader();
// 读取文件内容
reader.readAsText(file);
// 读取完成后执行回调函数
reader.onload = function() {
console.log(reader.result);
};
使用JavaScript实现图像滤镜功能需要借助于<canvas>元素。下面是一个简单的例子，实现了灰度滤镜的效果：
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src = 'image.jpg';
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0);
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const r = data[i];
const g = data[i + 1];
const b = data[i + 2];
const gray = 0.299 r + 0.587 g + 0.114 * b;
data[i] = gray;
data[i + 1] = gray;
data[i + 2] = gray;
}
ctx.putImageData(imageData, 0, 0);
};
上述代码首先创建了一个<canvas>元素和一个CanvasRenderingContext2D对象，然后加载一张图片并将其绘制到<canvas>上。接着，使用getImageData()方法获取画布上所有像素点的颜色值，将其转换为灰度值，并使用putImageData()方法将处理后的像素点重新绘制到<canvas>上。