在 Javascript 中过滤图像的最佳方法是通过图像处理框架。一些纯 Javascript 选项:
对于MarvinJ,使用以下代码加载您的图像:
var image = new MarvinImage();
image.load("https://i.imgur.com/By6tvip.jpg", imageLoaded);
我将使用以下输入图像来演示一些过滤器:
灰度:
Marvin.grayScale(image, imageOut);
黑与白:
Marvin.blackAndWhite(image, imageOut, 10);
棕褐色:
Marvin.sepia(image, imageOut, 40);
浮雕:
Marvin.emboss(image, imageOut);
边缘检测:
Marvin.prewitt(image, imageOut);
模糊:
Marvin.gaussianBlur(image, imageOut, 3);
亮度和对比度:
Marvin.brightnessAndContrast(image, imageOut, 70, 60);
颜色通道:
Marvin.colorChannel(image, imageOut, 0, 0, 110);
先前过滤器的可运行示例:
var canvas1 = document.getElementById("canvas1");
var image = new MarvinImage();
image.load("https://i.imgur.com/By6tvip.jpg", imageLoaded);
function imageLoaded(){
var imageOut = new MarvinImage(image.getWidth(), image.getHeight());
// GrayScale
Marvin.grayScale(image, imageOut);
imageOut.draw(canvas1);
// Black and White
Marvin.blackAndWhite(image, imageOut, 10);
imageOut.draw(canvas2);
// Sepia
Marvin.sepia(image, imageOut, 40);
imageOut.draw(canvas3);
// Emboss
Marvin.emboss(image, imageOut);
imageOut.draw(canvas4);
// Edge
imageOut.clear(0xFF000000);
Marvin.prewitt(image, imageOut);
imageOut.draw(canvas5);
// Gaussian Blur
Marvin.gaussianBlur(image, imageOut, 5);
imageOut.draw(canvas6);
// Brightness
Marvin.brightnessAndContrast(image, imageOut, 70, 60);
imageOut.draw(canvas7);
// Color Channel
Marvin.colorChannel(image, imageOut, 0, 0, 110);
imageOut.draw(canvas8);
}
<script src="https://www.marvinj.org/releases/marvinj-0.7.js"></script>
<canvas id="canvas1" width="192" height="120"></canvas>
<canvas id="canvas2" width="192" height="120"></canvas>
<canvas id="canvas3" width="192" height="120"></canvas>
<canvas id="canvas4" width="192" height="120"></canvas>
<canvas id="canvas5" width="192" height="120"></canvas>
<canvas id="canvas6" width="192" height="120"></canvas>
<canvas id="canvas7" width="192" height="120"></canvas>
<canvas id="canvas8" width="192" height="120"></canvas>