OpencvJs入门（1）——html+js的一个小示例

最新推荐文章于 2024-04-22 10:02:10 发布

CommissarMa

最新推荐文章于 2024-04-22 10:02:10 发布

阅读量7.1k

点赞数

分类专栏： OpencvJs

本文链接：https://blog.csdn.net/u012343179/article/details/79485518

版权

OpencvJs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

注：本文根据opencv Js tutorial改写而成。

我们从开发一个最基本的web页面开始学习，该web页面可以加载图像并进行显示。代码如下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Hello OpenCV.js</title>
</head>

<body>
  <h2>Hello OpenCV.js</h2>
  <div>
    <div class="inputoutput">
      <img id="imageSrc" alt="No Image" />
      <div class="caption">imageSrc
        <input type="file" id="fileInput" name="file" />
      </div>
    </div>
  </div>
  <script type="text/javascript">
    let imgElement = document.getElementById("imageSrc")
    let inputElement = document.getElementById("fileInput");
    inputElement.addEventListener("change", (e) => {
      imgElement.src = URL.createObjectURL(e.target.files[0]);
    }, false);
  </script>
</body>

</html>

然后我们可以将这段代码保存在一个index.html文件中，并在浏览器中打开该文件就可以看到效果了。

这是第一个程序，其中仅仅是涉及图像的显示，这是h5中已有的功能，因此我们仅仅是采用html+js来进行实现，没有用到opencvJs。我们将在后续教程中进行opencvJs的介绍与使用。

CommissarMa

2018年3月8日16点00分

CommissarMa

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
OpencvJs入门（1）——html+js的一个小示例

注：本文根据opencv Js tutorial改写而成。我们从开发一个最基本的web页面开始学习，该web页面可以加载图像并进行显示。代码如下：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;Hello OpenCV.js&lt;/title&
复制链接

扫一扫