比较平行于 canvas 的两个图像颜色值

Question

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

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

请求图像值

const images = new ImageHandler(); // ToDo: UpperCaseLetters as constant

(function createFileUploadButton() {
    var x = document.createElement("INPUT");
    x.setAttribute("type", "file");
    x.id = "imageUploader";
    document.body.appendChild(x);
})();


function ImageHandler() {
    const  WIDTH = 1030;
    const  HEIGHT = 650;

    let upperImage = null;
    let lowerImage = null;


    this.setImage = imageData => {
        if (upperImage && lowerImage) {
            alert("Seite neu laden, um neue Bilder zu laden");
        }
        console.log("lowerImage: " + lowerImage)
        if (!lowerImage) {
            let canvas = this.getNewCanvasWithImage(imageData);
            console.log("setting lower image")
            lowerImage = canvas;
        } else {
            console.log("ELSE");
            let canvas = this.getNewCanvasWithImage(imageData);
            console.log("setting upper image")
            upperImage = canvas;
        }
    };




    this.getNewCanvasWithImage = imageData => {
        console.log("getNewCanvas")
        console.log("typeof imageData " + typeof imageData);

        let canvas = document.createElement('canvas');
        //canvas.id = "";
        //canvas.style.zIndex = 2; ? Wofür gut? Brauchen wir das?
        canvas.width = WIDTH;
        canvas.height = HEIGHT;

        let context = canvas.getContext('2d');
        let image = new Image();
        image.src = imageData;
        context.drawImage(image, 1, 1);

        return canvas;
    };



    this.getColorValues = (coordinates) => {
        console.log("X " + coordinates.x);
        console.log("Y " + coordinates.y);
        var lowerImageContext = lowerImage.getContext('2d');
        var lowerImageData = lowerImageContext.getImageData(coordinates.x, coordinates.y, 1, 1).data;
        console.log("lowerImageData: " + lowerImageData);

        var upperImageContext = upperImage.getContext('2d');
        var upperImageData = upperImageContext.getImageData(coordinates.x, coordinates.y, 1, 1).data;
        console.log("upperImageData: " + upperImageData);
        
    };

    this.drawUpper = () => {
        console.log("appendUpper to body");
    };

    this.drawLower = () => {
        document.appendChild(this.lowerImage);
    };



}


document.getElementById("imageUploader").onchange = function(event) {

    var input = event.target;
    var reader = new FileReader();

    // Callback when the file is loaded
    reader.onload = function() {
        try {
            var filecontent = reader.result; // Loaded content
            images.setImage(filecontent);

        } catch (error) {
            alert(error);
        }

    };

    // Read the file
    reader.readAsDataURL(input.files[0]);
};






$('#canvas').mousemove(function(e) {
    console.log("mousemove");
    var pos = findPos(this);
    var xPos = e.pageX - pos.x;
    var yPos = e.pageY - pos.y;
    //var coordinates = "x=" + x + ", y=" + y;
    console.log("x=" + xPos + ", y=" + yPos);
    var coordinates = {};
    coordinates.x = xPos;
    coordinates.y = yPos;

    images.getColorValues(coordinates);
});



function findPos(obj) {
    var curleft = 0, curtop = 0;
    if (obj.offsetParent) {
        do {
            curleft += obj.offsetLeft;
            curtop += obj.offsetTop;
        } while (obj = obj.offsetParent);
        return {x: curleft, y: curtop};
    }
    return undefined;
}

<!DOCTYPE html>

<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <div>
            <canvas id="canvas" width="300" height="250" style="border:1px solid #000000;"></canvas>
        </div>
    </body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</html>

不幸的是我找不到我的错误。我得到的图像值只有零。一方面可能是图像需要时间来加载，但即使我等待几分钟，它也无法正常工作。有时我从一张图片中获取值，但从未从两张图片中获取值。

任何人都可以发现错误或知道如何更轻松地比较两个图像的颜色值吗？

亲切的问候尼克拉斯

Answer 1

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

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

话虽如此，我不确定您的代码中是否还有其他问题。

If you try to call drawImage() before the image has finished loading, it won't do anything (or, in older browsers, may even throw an exception). So you need to be sure to use the load event so you don't try this before the image has loaded:

您可以查看 this page 以获得全面的文档

比较平行于 canvas 的两个图像颜色值

Compare two images color values parallel with canvas

javascript

rgb

canvas

image