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

最新推荐文章于 2023-12-19 23:46:40 发布

Hyellice

最新推荐文章于 2023-12-19 23:46:40 发布

阅读量9.1k

点赞数 5

分类专栏：深度学习文章标签： tensorflowjs js

本文链接：https://blog.csdn.net/weixin_44554475/article/details/102478494

版权

深度学习专栏收录该内容

7 篇文章 0 订阅

订阅专栏

新建一个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数据，但是得到的数据是一维数组，形式为[R,G,B,R,G,B……R,G,B]

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>TinyYOLO</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-converter"></script>
</head>
<body>
<canvas id="myCanvas" width="448" height="448">
    <img src="./test/dog1.jpg" id="img" alt=""/>
</canvas>

<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)

    // 将js数组转化为tensor数据，并reshape
    var imgMat = tf.tensor(imgArr);
    var img = imgMat.reshape([1,448, 448, 3]);

    const MODEL_URL = './web_model/model.json';             // 模型文件名
    async function fun(){	                                // 预测函数
        const model = await tf.loadGraphModel(MODEL_URL);	// 加载图模型
        var predictData = model.predict(img);               // 预测
        console.log(predictData.shape);
        predictData.print()
        }

    fun()	//调用函数

</script>
</body>
</html>

注：此代码为使用tensorflowjs调用python训练的TinyYOLO模型

Hyellice

关注

5
点赞
踩
20

收藏

觉得还不错? 一键收藏
0
评论
使用js获取图像的像素矩阵

新建一个h5文件，首先定义画布和图像标签，如下：<canvas id="myCanvas" width="448" height="448"> <img src="./test/dog1.jpg" id="img" alt=""/></canvas>然后使用js获取图像数据：<script> // 通过js获取图像数据 ...
复制链接

扫一扫