1
同じ位置の2つの画像の画像値を比較できるJSアプリケーションを作成しようとしています。2つの画像の色の値をキャンバスと平行に比較する
私の考えは、画像をアップロードし、それらをオブジェクトとして変数として保存することです。マウスのキャンバス要素をブラウザで移動する場合は、座標をこれから取得し、格納されたキャンバスからイメージ値を要求するために使用する必要があります。
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>残念ながら、私は私のエラーを見つけることができません。 画像の値が0になるだけです。 1つの側面は、画像を読み込む時間が必要なことがあるかもしれませんが、数分間待っても正しく動作しません。時には、ある画像から値を取得することはできますが、両方から値を取得することはできません。
誰でもエラーを見つけたり、2つの画像の色の値を比較しやすくする方法がありますか？
種類を使用すると、イメージがロードされていることを確認し、使用可能な状態にすることができますImageのonloadイベントを使用して ニクラス