0
139
ViewsWhy is getImageData only giving data ouput of the first 300 pixels?
HTML:
The div is for the first four lines of JavaScript code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>title</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<img src="./colorful_cat.png" id="img">
<script src="script.js"></script>
</body>
</html>
JS:
First I get the width and height of the image that I have chosen via the div.
Then in the function I create a new imagevariable and link the source to it.
After that I create a canvas and draw the image on the canvas.
Finally I request the colordata from the canvas from topleft to bottomright.
var myImg = document.getElementById('img');
var realWidth = myImg.naturalWidth;
var realHeight = myImg.naturalHeight;
console.log(realWidth, realHeight);
function get_rgba_data() {
var img = new Image();
img.src = "colorful_cat.png";
var canvas = document.createElement("canvas");
var context = canvas.getContext("2d");
context.drawImage(img, 0, 0);
return context.getImageData(0, 0, realWidth, realHeight).data;
}
var imageInfo = get_rgba_data();
console.log("imageInfo", imageInfo);
CSS:
Does not (yet) exit in this project.
Console ouput:
Outputs only zeroes after imageInfo[1199] (300*4 for rgba)
Btw, this is the link for the testimage I am using:
https://www.google.com/url?sa=i&url=https%3A%2F%2Fdiamondpaintingplanet.com%2Fproducts%2Froefpakket-kleurrijke-leeuw&psig=AOvVaw3ipP5DjINR25o2P0thcLPV&ust=1634563635475000&source=images&cd=vfe&ved=0CAsQjRxqFwoTCIDurJ_G0fMCFQAAAAAdAAAAABAH