So i have a local image stream (through an eps32cam that streams images to a specific ip) that I then want to transfer to a canvas to display the RGB values. My problem is that other images work without problems only the images of the stream do not. It seems like nothing is drawn by the function drawImage() in that case.
Here is my code html code with JS (I apologize for my bad coding. I'm quite new to HTML and co.):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
#canvas{
background-color: blue;
}
</style>
<body>
<img src="http://192.168.137.10/" id="Image">
<canvas id="canvas"></canvas>
<p id="text">DATA</p>
<p id="text1">DATA</p>
</body>
<script>
function loop () {
document.getElementById("Image").crossOrigin = "Anonymous";
var rgbValuesNow = getRGBValues(document.getElementById("Image"));
document.getElementById("text").innerHTML = "RGB Values: " + rgbValuesNow;
}
setInterval(loop,300);
function getRGBValues(img) {
var canvas = document.getElementById('canvas'),
context = canvas.getContext && canvas.getContext('2d'),
rgbValues = [100,100,100], // Set a base colour as a fallback for non-compliant browsers
pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel
data;
// return the base colour for non-compliant browsers
if (!context) { alert('Your browser does not support CANVAS'); return rgbValues; }
// set the height and width of the canvas element to that of the image
var height = canvas.height = img.naturalHeight || img.offsetHeight || img.height,
width = canvas.width = img.naturalWidth || img.offsetWidth || img.width;
context.drawImage(img, 0, 0,);
try {
data = context.getImageData(0, 0, width, height);
} catch (e) {
// catch errors - usually due to cross domain security issues
alert(e);
return rgbValues;
}
data = data.data;
length = data.length;
rgbValues[0] = countColorValue("red", data);
rgbValues[1] = countColorValue("green", data);
rgbValues[2] = countColorValue("blue", data);
return rgbValues;
}
function countColorValue(color, imageData) {
let colorValue = 0;
if (color == "red") {
for (let i = 0; i < imageData.length; i = i + 4) {
colorValue = colorValue + imageData[i];
}
}
else if (color == "green") {
for (let i = 1; i < imageData.length; i = i + 4) {
colorValue = colorValue + imageData[i];
}
}
else if (color == "blue") {
for (let i = 2; i < imageData.length; i = i + 4) {
colorValue = colorValue + imageData[i];
}
}
return colorValue;
}
</script>
</html>
I'm not sure it might be some issue with "crossOrigin". However, I'm pretty much clueless.Thanks in advance :)