Javascript 比较两个与画布平行的图像颜色值

我正在尝试创建一个JS应用程序，它允许比较同一位置两个图像的图像值

我的想法是上传图像并将它们作为变量存储在对象中。如果我将鼠标移动到浏览器中的画布元素，则应从此元素获取坐标，并用于从存储的画布请求图像值

const images=new ImageHandler（）；//ToDo:大写字母为常量
（函数createFileUploadButton（）{
var x=document.createElement（“输入”）；
x、 setAttribute（“类型”、“文件”）；
x、 id=“图像上传器”；
文件.正文.附件（x）；
})();
函数ImageHandler（）{
常数宽度=1030；
常数高度=650；
设upperImage=null；
设lowerImage=null；
this.setImage=imageData=>{
if（上图像和下图像）{
警报（“塞特新拉登，乌姆新比尔德祖拉登”）；
}
日志（“lowerImage:+lowerImage”）
如果（！lowerImage）{
让canvas=this.getNewCanvasWithImage（imageData）；
console.log（“设置较低的图像”）
最低年龄=帆布；
}否则{
控制台日志（“其他”）；
让canvas=this.getNewCanvasWithImage（imageData）；
console.log（“设置上部图像”）
upperImage=画布；
}
};
this.getNewCanvasWithImage=imageData=>{
log（“getNewCanvas”）
控制台日志（“图像数据类型”+图像数据类型）；
让canvas=document.createElement（'canvas'）；
//canvas.id=“”；
//canvas.style.zIndex=2；？Wofür gut？Brauchen wir das？
画布宽度=宽度；
canvas.height=高度；
让context=canvas.getContext（'2d'）；
让图像=新图像（）；
image.src=图像数据；
上下文。drawImage（图像，1，1）；
返回画布；
};
this.getColorValues=（坐标）=>{
控制台日志（“X”+坐标.X）；
控制台日志（“Y”+坐标.Y）；
var lowerImageContext=lowerImage.getContext（'2d'）；
var lowerImageData=lowerImageContext.getImageData（坐标.x，坐标.y，1，1）；
日志（“lowerImageData:+lowerImageData”）；
var upperImageContext=upperImage.getContext（'2d'）；
var upperImageData=upperImageContext.getImageData（坐标.x，坐标.y，1,1）.data；
console.log（“upperImageData:+upperImageData”）；
};
this.drawUpper=（）=>{
console.log（“附在身体上部”）；
};
this.drawLower=（）=>{
文件。附录子项（此为最低年龄）；
};
}
document.getElementById（“imageUploader”）.onchange=函数（事件）{
var输入=event.target；
var reader=new FileReader（）；
//加载文件时回调
reader.onload=函数（）{
试一试{
var filecontent=reader.result；//加载的内容
image.setImage（filecontent）；
}捕获（错误）{
警报（错误）；
}
};
//读文件
reader.readAsDataURL（input.files[0]）；
};
$（'#canvas'）.mousemove（函数（e）{
console.log（“mousemove”）；
var pos=findPos（本）；
var xPos=e.pageX-pos.x；
var yPos=e.pageY-pos.y；
//var coordinates=“x=”+x+”，y=“+y；
console.log（“x=“+xPos+”，y=“+yPos”）；
变量坐标={}；
坐标x=xPos；
坐标y=yPos；
获取颜色值（坐标）；
});
功能findPos（obj）{
var curleft=0，curtop=0；
if（对象抵销父对象）{
做{
curleft+=obj.offsetLeft；
curtop+=对象偏移量；
}而（对象=对象抵销母公司）；
返回{x:curleft，y:curtop}；
}
返回未定义；
}

提供头衔

使用

图像的
onload
事件可以帮助您确保图像已加载并准备好使用

    let image = new Image();
    image.onload = function(){
        context.drawImage(this, 1, 1);
    }
    image.src = imageData;

尽管如此，我不确定您的代码中是否存在其他问题

如果在图像加载完成之前尝试调用drawImage（），
它不会做任何事情（或者，在较旧的浏览器中，甚至可能抛出
例外情况）。因此，您需要确保使用load事件，这样您就不会
请在加载图像之前尝试以下操作：

您可以使用
onload
查看全面的文档
，
Image
事件可以帮助您确保图像已加载并准备好使用

    let image = new Image();
    image.onload = function(){
        context.drawImage(this, 1, 1);
    }
    image.src = imageData;

尽管如此，我不确定您的代码中是否存在其他问题

如果在图像加载完成之前尝试调用drawImage（），
它不会做任何事情（或者，在较旧的浏览器中，甚至可能抛出
例外情况）。因此，您需要确保使用load事件，这样您就不会
请在加载图像之前尝试以下操作：

您可以查看全面的文档