Question

我正在尝试制作一个照片操作页面，而我正试图对我的图像进行阈值处理，我正在尝试设置一个滑块控件，它将更改阈值以更改阈值。问题是，当我点击图像时，它会对它进行灰度化，然后模糊它然后对其进行阈值处理。我正在使用HTML5画布，因此我创建了我的imagedata并将其存储在两个像素数组中，以便从操作和设置回来。

首次调用阈值时，我传入原始像素和空像素数组和阈值问题是，当我使用范围输入时，它只能通过新的阈值。

"onmouseup="updateThreshold(this.value)"

当我的阈值函数接受3个参数“threshold（newPix，tempPix，thresholdVal）”

无论如何我可以使用原始参数再次运行该函数但是使用更新的阈值？

function threshold(thresholdVal){
var eCanv = eventCanvas.getContext("2d")
var imageData = eCanv.getImageData(750-(scaledWidth/2),250-(scaledHeight/2),scaledWidth,scaledHeight);
var orPix = imageData.data;
var newPix = imageData.data;
var tempPix = imageData.data;
var w = imageData.width;

for (var i = 0, n = orPix.length; i < n; i += 4) {

    var red = orPix[i];
    var green = orPix[i + 1];
    var blue = orPix[i + 2]; 
    if ((red * 0.2126 + green * 0.7152 + blue * 0.0722) >= thresholdVal) {
       tempPix[i]=255;
       tempPix[i+1]=255;
       tempPix[i+2] = 255;
   }
   else{
       tempPix[i]=0;
       tempPix[i+1]=0;
       tempPix[i+2] = 0;
   }
}   
newPix=tempPix
eCanv.putImageData(imageData,750-(scaledWidth/2),250-(scaledHeight/2));
return newPix   
    }
<input id="thresholdVal" type="range" min="000" max="200" step="1" onmouseup="threshold(this.value)" />

使用Range Input调用具有多个参数的Javascript函数

0 个答案: