使用js获取图像的像素矩阵

最新推荐文章于 2025-06-25 09:06:42 发布

原创

最新推荐文章于 2025-06-25 09:06:42 发布 · 9.7k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#tensorflowjs #js

新建一个h5文件，首先定义画布和图像标签，如下：

<canvas id="myCanvas" width="448" height="448">
    <img src="./test/dog1.jpg" id="img" alt=""/>
</canvas>

然后使用js获取图像数据：

<script>
    // 通过js获取图像数据
    var canvas_obj = document.getElementById("myCanvas");   // 获取canvas标签对象
    var ctx = canvas_obj.getContext("2d");                  // 设置在画布上绘图的环境
    var img_obj = document.getElementById("img");           // 获取img标签对象
    ctx.drawImage(img_obj, 0, 0);                           // 将图片绘制到画布上
    var imgData_obj = ctx.getImageData(0,0,canvas_obj.width,canvas_obj.height);    // 获取画布上的图像像素矩阵
    var imgData = imgData_obj.data;     // 获取到的数据为一维数组，包含图像的RGBA四个通道数据
    // console.log(imgData.length);

    // 将获取到的图像数据去除A通道
    var imgArr = [];
    for(var i=0; i<imgData.length; i += 4){
        imgArr.push(imgData[i], imgData[i+1], imgData[i+2])
    }
    // console.log(imgArr)
    
</script>

通过以上js得到图像的RGB数据，但是得到的数据