酷应用

Python 写了一个网页版的「P图软件」，惊呆了！

百家作者：AI100 2022-02-07 20:32:59

作者 | 小欣

来源 |?Python爱好者集中营

今天是开工第一天，这篇文章可以算作是虎年的第一篇干货技术类文章了，今天小编用Python做了一个网页版的“P图软件”，大致的流程在于我们可以将上传的照片进行黑白处理、铅笔素描处理、模糊化处理等一系列操作，具体如下

下面我们来看一下该整个网页是怎么写的

网页左侧的工具栏部分

首先第一步在于导入我们所需要用到的模块，代码如下

import?streamlit?as?st
import?numpy?as?np
import?cv2
from?PIL?import?Image,?ImageEnhance

我们先设计到网页当中的标题和左边的工具栏，左边的工具栏部分代码如下

st.sidebar.markdown('<p?class="font">My?First?Photo?Converter?App</p>',?unsafe_allow_html=True)
with?st.sidebar.expander("About?the?App"):
?????st.write("""
????????Use?this?simple?app?to?convert?your?favorite?photo?to?a?pencil?sketch,?a?grayscale?image?or?an?image?with?blurring?effect.??\n??\nThis?app?was?created?by?Junxin?as?a?side?project?to?learn?Streamlit?and?computer?vision.?Hope?you?enjoy!
?????""")

首先在工具栏当中添加的是关于该应用的介绍，通过调用streamlit模块当中的sidebar方法来生成一个下拉框，在通过点击“+”键来打开，

然后则是5个单选框，代码如下

filter?=?st.sidebar.radio('Covert?your?photo?to:',?['Original',?'Gray?Image',?'Black?and?White',?'Pencil?Sketch',?'Blur?Effect'])

单选框是通过sidebar方法来实现的，当中添加上分别是哪些的单选项，

紧接着是最后的“感谢反馈”的部分，代码如下

st.sidebar.title('?')
st.sidebar.markdown('?')
st.sidebar.subheader('Please?help?us?improve!')
with?st.sidebar.form(key='columns_in_form',clear_on_submit=True):?
????rating=st.slider("Please?rate?the?app",?min_value=1,?max_value=5,?value=3,help='Drag?the?slider?to?rate?the?app.?This?is?a?1-5?rating?scale?where?5?is?the?highest?rating')
????text=st.text_input(label='Please?leave?your?feedback?here')
????submitted?=?st.form_submit_button('Submit')
????if?submitted:
??????.......

网页正文的标题部分

标题部分的代码如下

with?col1:
????st.markdown("""?<style>?.font?{
????font-size:35px?;?font-family:?'Cooper?Black';?color:?#FF9633;}?
????</style>?""",?unsafe_allow_html=True)
????st.markdown('<p?class="font">Upload?your?photo?here...</p>',?unsafe_allow_html=True)

当然除此之外，我们需要的是上传图片的功能，代码如下

uploaded_file?=?st.file_uploader("",?type=['jpg',?'png',?'jpeg'])

这里调用的是streamlit模块当中的file_uploader方法，其中允许上传的有三种文件格式，分别是jpg、png以及jpeg。

接下去便是上传图片的处理逻辑部分，代码如下，

with?col2:
????filter?=?st.sidebar.radio('Covert?your?photo?to:',?['Original',?'Gray?Image',?'Black?and?White',?'Pencil?Sketch',?'Blur?Effect'])
????if?filter?==?'Gray?Image':
????????converted_img?=?np.array(image.convert('RGB'))
????????gray_scale?=?cv2.cvtColor(converted_img,?cv2.COLOR_RGB2GRAY)
????????????......
????elif?filter?==?'Black?and?White':
????????????......
????elif?filter?==?'Pencil?Sketch':
????????????......
????elif?filter?==?'Blur?Effect':
????????????......
????else:
????????st.image(image,?width=300)