时间戳

首页 > 解决方案 > 为什么 getImageData 只给出前 300 个像素的数据输出？

javascript - 为什么 getImageData 只给出前 300 个像素的数据输出？

问题描述

HTML：
div 用于 JavaScript 代码的前四行

<!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：
首先我通过 div 获得我选择的图像的宽度和高度。
然后在函数中创建一个新的图像变量并将源链接到它。
之后，我创建一个画布并在画布上绘制图像。
最后，我从画布从左上角到右下角请求颜色数据。

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：（
尚未）退出此项目。
控制台输出：
在 imageInfo[1199] 之后仅输出零（对于 rgba 为 300*4） 顺便说一句，这是我正在使用的 testimage 的链接： 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_G0fMCFQAAAAAdAAAAAABAHConsole.log 输出

标签： javascripthtmlcanvas

解决方案

推荐阅读