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

最新推荐文章于 2024-04-24 13:35:29 发布

Admin_ghj

最新推荐文章于 2024-04-24 13:35:29 发布

阅读量1.2w

点赞数 8

分类专栏： python 文章标签： python html

本文链接：https://blog.csdn.net/weixin_45674624/article/details/120680878

版权

python 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

如何在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 和 run
	  ws = 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

Admin_ghj

关注

8
点赞
踩
66

收藏

觉得还不错? 一键收藏
4
评论
如何在HTML文档中调用Python程序？

如何在HTML文档中调用Python程序？简介：前几天突然遇到这样的一个需求，在html页面中调用python程序对图像进行处理，之后将处理后的图像重新显示在页面中。刚开始还不知道html页面中能够调用python程序，之后了解了才发现可以。html页面中确实能够调用python程序，不过只能调“一点点”,在html中运行python程序有许多限制，首先必须要使用ie浏览器（它是通过一个叫Activex的控件来调用的，通过Activex控件可以在命令行中执行命令，如果把python解释器添加到环
复制链接

扫一扫