tfjs 配合opencvjs 读取网页图像并显示

最新推荐文章于 2022-04-29 22:12:53 发布

阿豪boy

最新推荐文章于 2022-04-29 22:12:53 发布

阅读量315

点赞数

文章标签： opencv js javascript canvas css

本文链接：https://blog.csdn.net/qq_35516360/article/details/122065756

版权

原文链接: tfjs 配合opencvjs 读取网页图像并显示

上一篇: fast style transfer 快速风格转换 tfjs

下一篇: canvas 绘制图像

下载文件

opencv.js

tf.js

https://download.csdn.net/download/qq_35516360/10981194

https://download.csdn.net/download/qq_35516360/10981197

效果,第一张是网页上的图片,使用tf读取为tensor后,再转化为数组,经过opencv包装后显示到canvas中

第三张图片是opencv读取第二个canvas内容然后显示到第三个canvas中

数据类型

Data Properties	C++ Type	JavaScript Typed Array	Mat Type
data	uchar	Uint8Array	CV_8U
data8S	char	Int8Array	CV_8S
data16U	ushort	Uint16Array	CV_16U
data16S	short	Int16Array	CV_16S
data32S	int	Int32Array	CV_32S
data32F	float	Float32Array	CV_32F
data64F	double	Float64Array	CV_64F

8uc1表示uint8类型1通道,8uc3表示一般的rgb三通道

    mat = cv.matFromArray(2, 2, cv.CV_8UC1, [1, 2, 3, 4]);

  function onOpenCvReady() {
    // 获取img对象
    let img = document.getElementById('img')
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
    console.log(cv)
    mat = cv.matFromArray(2, 2, cv.CV_8UC1, [1, 2, 3, 4]);
    console.log(mat)
    console.log(tf)
    // img.onload = function () {

    //使用tf读取img,将图片转化为矩阵格式
    tensor = tf.browser.fromPixels(img).toFloat()
    let [h, w, c] = tensor.shape
    tensor = tensor.flatten()
    console.log(tensor.shape, h, w, c)
    console.log(tensor)
    // 获取tensor中的数据
    data = tensor.dataSync()
    console.log(data.length)
    // 使用opencv将数组转换为hwc格式的矩阵
    mat = cv.matFromArray(h, w, cv.CV_8UC3, data);
    console.log(mat)
    //显示到canvas中
    cv.imshow('canvasOutput', mat);

    // 读取canvas中的数据,并将显示在另一个canvas中
    canvas = document.getElementById('canvasOutput')
    ctx = canvas.getContext("2d");
    imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    mat = cv.matFromImageData(imgData);
    cv.imshow('canvasOutput2', mat);

  }

完整代码

引入js的方式及其奇怪,而且不按照这个来根本无法引入!

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello OpenCV.js</title>
  <style>
    .img {
      max-height: 600px;
      max-width: 600px;
    }
  </style>
  <script async type="text/javascript" src="opencv.js" onload="onOpenCvReady()"></script>
  <script type="text/javascript" src="tf.js"></script>
</head>
<body>
<p id="status">OpenCV.js is loading...</p>
<div>
  <img src="./default.jpg" id="img" class="img">
  <canvas id="canvasOutput"></canvas>
  <canvas id="canvasOutput2"></canvas>
</div>
<script type="text/javascript">
  function onOpenCvReady() {
    let img = document.getElementById('img')
    document.getElementById('status').innerHTML = 'OpenCV.js is ready.';
    console.log(cv)
    mat = cv.matFromArray(2, 2, cv.CV_8UC1, [1, 2, 3, 4]);
    console.log(mat)
    console.log(tf)
    // img.onload = function () {
    tensor = tf.browser.fromPixels(img).toFloat()
    let [h, w, c] = tensor.shape
    tensor = tensor.flatten()
    console.log(tensor.shape, h, w, c)
    console.log(tensor)
    data = tensor.dataSync()
    console.log(data.length)
    mat = cv.matFromArray(h, w, cv.CV_8UC3, data);
    console.log(mat)
    cv.imshow('canvasOutput', mat);
    canvas = document.getElementById('canvasOutput')

    ctx = canvas.getContext("2d");
    imgData = ctx.getImageData(0, 0, canvas.width, canvas.height);
    mat = cv.matFromImageData(imgData);
    cv.imshow('canvasOutput2', mat);

  }

  // window.onload = function () {
  //
  //   console.log(cv)
  //   console.log(tf)
  // }
</script>
<!--<script async type="text/javascript" src="opencv.js" onload="onOpenCvReady()"/>-->
<!--<script type="text/javascript" src="tf.js"/>-->

</body>


</html>