[英]Javascript - how to greyscale an image using this code?
我在使用圖像處理應用程序時遇到了另一個問題。 我的工作簿中有計算:
f(x.y) = (max(R, G, B) + min(R, G, B)) / 2
這是最突出和最不突出顏色的平均值。
f(x.y) = (0.21 R + 0.72 G + 0.07 B)
這是亮度,加權平均值。
f(x.y) = R + G + B) / 3
這是平均水平,但我已經這樣做了。
這是我的代碼。 我很抱歉這件事。
var mySrcImg = new Image ();
mySrcImg.crossOrigin = "";
mySrcImg.onload = test;
mySrcImg.src = "Your image";
function test () {
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
context.fillStyle = "rgb(0,200,0)";
context.fillRect (0, 0, 800, 800);
// Copy the image to the canvas
context.drawImage (mySrcImg, 0, 0);
// Get your image data
var myImageData;
myImageData = context.getImageData(0, 0, canvas.width, canvas.height);
// Loop over each pixel and invert the colours
var pixelComponents = myImageData.data;
var n = pixelComponents.length;
for (var i = 0; i < n; i += 4) {
// One pixel:
var average = (Math.max(pixelComponents[i ], pixelComponents[i+1],
pixelComponents[i+2]) + Math.min(pixelComponents[i ],
pixelComponents[i+1], pixelComponents[i+2])) / 2;
pixelComponents[i ]; // red
pixelComponents[i+1]; // green
pixelComponents[i+2]; // blue
// i+3 is alpha (the fourth element)
}
// Draw the ImageData object at the given (x,y) coordinates
context.putImageData(myImageData, 0, 0);
document.getElementById("srcImgDiv").appendChild(mySrcImg);
}
!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>My Image Processing App</title>
</head>
<body>
<h1 id="MyHeader">Image Processing App</h1>
<p><b>Original Image:</b></p>
<div id='srcImgDiv'></div>
<p><br></p>
<p><b>Converted Image:</b></p>
<canvas id="canvas" width="800" height="800"> </canvas>
<p><br></p>
我的問題是:我怎樣才能使它成為灰度? 他們放了:
var average = (Math.max(pixelComponents[i ], pixelComponents[i+1],
pixelComponents[i+2]) + Math.min(pixelComponents[i ],
pixelComponents[i+1], pixelComponents[i+2])) / 2;
對於灰度。
任何幫助將不勝感激。
謝謝。
如果您想輕松地對圖像進行灰度化,您可以使用 CSS。 它已經為您提供了一個filter: grayscale()
。 見MDN 。
如果你不能使用 CSS,你應該看看Jimp (JavaScript Image Manipulation Program) 。 這讓您可以做任何事情,從灰度到反轉再到其他任何事情。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.