如何在HTML文档中调用Python程序？

简介：

前几天突然遇到这样的一个需求，在html页面中调用python程序对图像进行处理，之后将处理后的图像重新显示在页面中。刚开始还不知道html页面中能够调用python程序，之后了解了才发现可以。html页面中确实能够调用python程序，不过只能调“一点点”,在html中运行python程序有许多限制，首先必须要使用ie浏览器（它是通过一个叫Activex的控件来调用的，通过Activex控件可以在命令行中执行命令，如果把python解释器添加到环境变量中就可以调用python程序），别的浏览器好像都不可以，其次，对于运行程序的路径要求较为严格，不能随意变动。

html用来做页面展示比较方便，但不建议在html中调用外部程序，python能写的大多数东西都可以交给js来写。

示例程序介绍：

本文展示了一个在html中调用python程序进行图像处理，之后再进行显示的示例。

示例逻辑介绍：

在html页面中设置input标签用来上传文件，设置两个图片标签用来展示处理前和处理后的图片，当点击浏览时，左边的图像标签将显示选中的图片，同时，python图像处理程序开始运行，对图像进行处理，之后将处理后的图像复制并保存到该html文件的同级目录，默认图像处理完后是不会自动刷新显示的，需要手动点击显示处理结果按钮。

注意一定要选择IE浏览器运行，同时要选择运行运行Activex控件

YOLOv5简介：

yolo算法是目标检测领域的扛把子，目标检测通俗来说就是把图像中的物体给找出来，得到物体的种类和在图像中的位置两个信息。网上有许多关于yolo算法的资料，本文采用的是yolov5的体积最小的那个模型，要想运行该模型，还需配置相应的python环境，网上有许多教程，感兴趣的同学可以自己去了解

html代码：

<!--* @Author: your name* @Date: 2021-09-27 21:13:03* @LastEditTime: 2021-09-28 13:00:13* @LastEditors: Please set LastEditors* @Description: In User Settings Edit* @FilePath: \html夹杂python\index.html
-->
<!DOCTYPE html>
<html>  <head>  <meta charset="utf-8">  <style>#header {background-color:black;color:white;text-align:center;padding:5px;}#nav {line-height:50px;background-color:#eeeeee;height:540px;width:220px;float:left;padding:5px;         }#org {width:350px;float:left;padding:7px;         }#result {width:350px;float:right;padding:7px;      }#footer {background-color:black;color:white;clear:both;text-align:center;padding:1px;      }</style>    <script language="javascript">     function exec1(command) {     var ws = new ActiveXObject("WScript.Shell");      ws.run(command);           //exec 和 runws = null;//alert("ok");             弹出一个小框显示“ok”}    function imgChange(obj) {//获取点击的文本框var file = document.getElementById("file");var imgUrl = window.URL.createObjectURL(file.files[0]);var exeUrl = 'python E:\\Demo\\html-python\\yolov5-master\\detect.py --source ' + document.getElementById('file').value + ' --weights E:\\Demo\\yolov5Test\\yolov5-master\\yolov5s.pt --project E:\\Demo\\ --name html-python --exist-ok'var img = document.getElementById('imghead');var result = document.getElementById('rightimg');var arr=file.files[0].name.split('\\');//注split可以用字符或字符串分割var my=arr[arr.length-1];//这就是要取得的图片名称var resultUrl = 'E:\\Demo\\' + my;img.setAttribute('src', imgUrl); // 修改img标签src属性值exec1(exeUrl);result.src = 'E:\\Demo\\12ddddd3.jpg';}; function refresh1(obj){var file = document.getElementById("file");var arr=file.files[0].name.split('\\');//注split可以用字符或字符串分割var my=arr[arr.length-1];//这就是要取得的图片名称var resultUrl = 'E:\\Demo\\html-python\\' + my;var result = document.getElementById('rightimg');result.src = resultUrl;}function refreshimg(obj){var img = document.getElementById("rightimg");var rightUrl = "E:\\Demo\\html-python\\" + file.files[0].name;img.src = rightUrl;}</script>   </head>  <body><div id="header"><h1>测试</h1></div><div >图像处理         <a href="E:\\Demo\\yolov5Test\\yolov5-master\\detect.py" target="show"> 源代码 </a>    <br/> <input type="file" name="file" id="file" accept="image/*" onchange="imgChange(this);"/> <!--文件上传选择按钮--><input type="button" value="显示处理结果" onclick="refreshimg(this)" />  </div><table><tr><td><h2>original:</h2></td><td><h2>result:</h2></td></tr><tr><td><img src=org.png  width="800" border=0 id="imghead"></td><td><img src=result.png  width="800" border=0 id="rightimg"></td></tr></table></body>
</html>

如果想要运行自己的python程序需要在下面这个位置进行更改：

tips:该模型默认使用的是自带的coco2017数据集的20种物体的目标检测模型，我自己也训练了一个检测口罩的模型，如需更改，只需将yolov5s.pt换成best.pt

注意：该压缩包需要放在E://Demo路径下才能运行，否则会有路径问题

此法运行python文件局限性太大，对路径要求严格，推荐采用html_+js的方式，或者采用python图形化界面的方式

压缩包下载地址：

链接：https://pan.baidu.com/s/1-NW3969iZuBnrzqcTQ3svQ
提取码：zo13

E://Demo路径下才能运行，否则会有路径问题

此法运行python文件局限性太大，对路径要求严格，推荐采用html_+js的方式，或者采用python图形化界面的方式

压缩包下载地址：

链接：https://pan.baidu.com/s/1-NW3969iZuBnrzqcTQ3svQ
提取码：zo13