"use strict";
function newEl(tag){return document.createElement(tag)}
function newTxt(txt){return document.createTextNode(txt)}
function byId(id){return document.getElementById(id)}
function allByClass(clss,parent){return (parent==undefined?document:parent).getElementsByClassName(clss)}
function allByTag(tag,parent){return (parent==undefined?document:parent).getElementsByTagName(tag)}
function toggleClass(elem,clss){elem.classList.toggle(clss)}
function addClass(elem,clss){elem.classList.add(clss)}
function removeClass(elem,clss){elem.classList.remove(clss)}
function hasClass(elem,clss){elem.classList.contains(clss)}
// useful for HtmlCollection, NodeList, String types
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need
// callback gets data via the .target.result field of the param passed to it.
function loadFileObject(fileObj, loadedCallback){var a = new FileReader();a.onload = loadedCallback;a.readAsDataURL(fileObj);}
function ajaxGet(url, onLoad, onError)
{
\t var ajax = new XMLHttpRequest();
\t ajax.onload = function(){onLoad(this);}
\t ajax.onerror = function(){console.log("ajax request failed to: "+url);onError(this);}
\t ajax.open("GET",url,true);
\t ajax.send();
}
function ajaxPost(url, phpPostVarName, data, onSucess, onError)
{
\t var ajax = new XMLHttpRequest();
\t ajax.onload = function(){ onSucess(this);}
\t ajax.onerror = function() {console.log("ajax request failed to: "+url);onError(this);}
\t ajax.open("POST", url, true);
\t ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
\t ajax.send(phpPostVarName+"=" + encodeURI(data));
}
function ajaxPostForm(url, formElem, onSuccess, onError)
{
\t var formData = new FormData(formElem);
\t ajaxPostFormData(url, formData, onSuccess, onError)
}
function ajaxPostFormData(url, formData, onSuccess, onError)
{
\t var ajax = new XMLHttpRequest();
\t ajax.onload = function(){onSuccess(this);}
\t ajax.onerror = function(){onError(this);}
\t ajax.open("POST",url,true);
\t ajax.send(formData);
}
function getTheStyle(tgtElement)
{
\t var result = {}, properties = window.getComputedStyle(tgtElement, null);
\t forEach(properties, function(prop){result[prop] = properties.getPropertyValue(prop);});
\t return result;
}
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////////////////////////
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
// \t var image_url = 'http://i.imgur.com/j6oJO8s.png';
// \t var image_url = 'onePixel.png';
\t var image_url = 'j6oJO8s.png';
\t
\t byId('theImage').src = image_url;
\t solve_darkest(image_url, function(x,y){alert('x: '+x+' y: '+y);});
\t solve_darkest_2(image_url, function(x,y){alert('x: '+x+' y: '+y);});
}
function rgbToHsl(r, g, b)
{
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b),
min = Math.min(r, g, b);
var h, s, l = (max + min)/2;
if (max == min) {
h = s = 0; // achromatic
} else {
var d = max - min;
s = l > 0.5 ? d/(2 - max - min) : d/(max + min);
switch (max) {
case r:
h = (g - b)/d + (g < b ? 6 : 0);
break;
case g:
h = (b - r)/d + 2;
break;
case b:
h = (r - g)/d + 4;
break;
}
h /= 6;
}
return ({
h: h,
s: s,
l: l,
})
}
function solve_darkest(url, callback)
{
\t var image = new Image();
\t image.src = url;
\t image.onload = function()
\t {
\t \t var canvas = document.createElement('canvas');
\t \t canvas.width = 300;
\t \t canvas.height = 300;
\t \t var context = canvas.getContext("2d");
\t \t context.drawImage(image, 0, 0);
\t \t var imgData = context.getImageData(0, 0, 300, 300);
\t \t var pixel = 0;
\t \t var darkest_pixel_lightness = 100;
\t \t var darkest_pixel_location = 0;
\t \t for (var i = 0; i < imgData.data.length; i += 4)
\t \t {
\t \t \t var red = imgData.data[i + 0];
\t \t \t var green = imgData.data[i + 1];
\t \t \t var blue = imgData.data[i + 2];
\t \t \t var alpha = imgData.data[i + 3];
\t \t \t var hsl = rgbToHsl(red, green, blue);
\t \t \t var lightness = hsl.l;
\t \t \t if (lightness < darkest_pixel_lightness)
\t \t \t {
\t \t \t \t darkest_pixel_lightness = lightness;
\t \t \t \t darkest_pixel_location = pixel;
\t \t \t \t console.log("Darkest found at index: " + pixel);
\t \t \t }
\t \t \t pixel++;
\t \t }
\t // var y = Math.floor(darkest_pixel_location/200);
\t // var x = darkest_pixel_location-(y*200);
\t \t var y = Math.floor(darkest_pixel_location/this.width);
\t \t var x = darkest_pixel_location-(y*this.width);
\t \t callback(x,y);
\t };
}
function solve_darkest_2(url, callback)
{
\t var image = new Image();
\t image.src = url;
\t image.onload = function()
\t {
\t \t var canvas = document.createElement('canvas');
\t \t canvas.width = 300;
\t \t canvas.height = 300;
\t \t var context = canvas.getContext("2d");
\t \t context.drawImage(image, 0, 0);
\t \t var imgData = context.getImageData(0,0, canvas.width, canvas.height);
\t \t var darkest_pixel_luminance = 100;
\t \t var darkest_pixel_xPos = 0;
\t \t var darkest_pixel_yPos = 0;
\t \t for (var y=0; y<canvas.height; y++)
\t \t {
\t \t \t for (var x=0; x<canvas.width; x++)
\t \t \t {
\t \t \t \t var luminance = averagePixels(imgData, x, y, 10);
\t \t \t \t if (luminance < darkest_pixel_luminance)
\t \t \t \t {
\t \t \t \t \t darkest_pixel_luminance = luminance;
\t \t \t \t \t darkest_pixel_xPos = x;
\t \t \t \t \t darkest_pixel_yPos = y;
\t \t \t \t }
\t \t \t }
\t \t }
\t \t callback(darkest_pixel_xPos,darkest_pixel_yPos);
\t };
}
function averagePixels(imgData, xPos, yPos, averagingBlockSize)
{
// \t var ctx = canvas.getContext("2d");
// \t var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
// \t imgData
\t
\t // we average pixels found in a square region, we need to know how many pixels
\t // are in the region to divide the accumalated totals by the number of samples (pixels) in the
\t // averaging square
\t var numPixelsMax = averagingBlockSize * averagingBlockSize;
\t var numPixelsActual = 0;
\t
\t var red, green, blue;
\t red = green = blue = 0;
\t
\t var rowStride = imgData.width * 4; \t \t // add this to an index into the canvas's data to get the pixel
\t \t \t \t \t \t \t \t \t \t // immediatelly below it.
\t var x, y;
\t var initialIndex = ((yPos * imgData.width) + xPos) * 4;
\t var index = initialIndex;
\t
\t var pixel = 0;
\t var darkest_pixel_lightness = 100;
\t var darkest_pixel_location = 0;
\t
\t for (y=0; y<averagingBlockSize; y++)
\t {
\t \t index = initialIndex + y * rowStride;
\t \t
\t \t for (x=0; x<averagingBlockSize; x++)
\t \t {
\t \t \t if ((x+xPos < imgData.width) && (y+yPos < imgData.height))
\t \t \t {
\t \t \t \t red += imgData.data[index+0];
\t \t \t \t green += imgData.data[index+1];
\t \t \t \t blue += imgData.data[index+2];
\t \t \t \t numPixelsActual++;
\t \t \t }
\t \t \t index += 4;
\t \t }
\t }
\t red /= numPixelsActual;
\t green /= numPixelsActual;
\t blue /= numPixelsActual;
\t
\t var hsl = rgbToHsl(red, green, blue);
\t var luminance = hsl.l;
\t return luminance;
}
img
{
\t border: solid 1px red;
}
<h1>300px</h1>
<img id='theImage'/>
可能重复[需要单击图像中最暗点](https://stackoverflow.com/questions/37739177/need-to- click-darkest-spot-in-image) –
谢谢你,但是这个问题中的代码似乎没有帮助。我从头开始,因此提出了新的问题。我觉得我非常接近,但似乎无法弄清楚为什么返回给我的坐标不是我正在寻找的坐标。 – user1828398