在图片上添加文字并生成图片

                              在图片上添加文字并生成图片
开发工具与关键技术:Visual Studio 2015
作者:李德新
撰写时间:2019年6月04日

在我们的日常生活中,我们经常能看到各样格式的表单,而且有时候我们还要去填写这些各种各样的不同的表单,但是你真的知道我们的这些表单是如何做出来的吗?而且我们填写的这些真的是表单吗?不,也许我们填写的这些只不过是一张照片而已;只不过是做出来的效果让我们看起来像是表单而已。其实,这些表单不过是在一张空白的图片之上,填写数据而已。那么这种在图片上添加数据并生成图片的效果是如何做到的呢?
其实,这种效果要想做出来并不难,只不过是非常的麻烦而已,因此我们需要做好充分的准备以及足够的耐心。首先呢,我们要先准备一张空白的照片作为我们这个表单的背景,然后再在它上面添加我们所需要的文字或者别的样式,我们都可以在这张空白的照片上添加。但在这之前我们应该要先设置好我们需要的样式再把它放在我们的照片之上,如此就需要我们花点心思去布局了,虽然要花点心思去布局,但也花不了我们多少时间,我们就只需要在一个

标签中放入我们需要的输入框或者其他样式即可。
在这里插入图片描述
如上图中所示我们在页面上就已经把我们需要的填写的数据的地方都已经搭建好空格,为后面我们填写数据做好了准备。而且还把我们这张表单的所有的别的信息都已经填写好了。那么我们就可以为我们的这张表单写上我们需要的按钮,在我们点击按钮的时候就可以自动为我们填写上我们所需要的各种查询到的数据了。
在这里插入图片描述
如此我们就可以在这些按钮上写上我们所需要的功能了,在我们写上了这些功能之后我们就可以去数据库中去查询到我们我们所需要的数据,然后再通过我们自己的选择把他们填写到我们现做的这张表单上面来。
在我们填写数据之前,我们还需要查询到我们需要的数据,如此我们才可以把我们选中的数据填写进我们的这张表单之中,因此我们在生成表单之前,还要先查询出我们需要的数据才可以。所以在这之前我们先写一个查询数据的方法。我们就是要把数据查找出来,然后我们就可以将这些数据之中我们需要用到的都可以先把他们拿出来了。
在这里插入图片描述
我们可以先使用layui插件去做一个表格去存放我们查询出来的数据,然后再为我们的表格中的每一行数据写一个监听事件,监听我们对行的所有的点击事件,因此,每当我们点击其中的每一行数据的时候就会有一个方法把我们点击选中的数据填写到我们的那张新建的表单上面,如此我们就可以把每一行数据的数据都绑定好。
在这里插入图片描述
如图所示我们为我们的数据标的每一行都添加上一个监听点击事件,每当我们点击哪一行的时候,我们的数据就会主动填写上到我们的这张新的表单上面。因此,我们要准备好待会如何在控制器上去获取到我们需要的数据,并且要如何才能回填到我们想要他回填到的位置上面去。
接下来我们就是要在控制器上去获取到我们需要的数据,然后把数据回填到我们所药房的位置,所以我们在获取到数据之后还要确认我们数据放置的位置。
在这里插入图片描述
从图中我们可以看的到我们在控制器之中连表查询出我们所有需要的数据之后,再建立另一张新的表格去存放我们所需要的五条数据。那么接下来我们就是要在控制器上去获取到我们页面上的那张空白的数据表单的位置,然后就可以在控制器上为我们的数据确认好数据填写的位置了。
在这里插入图片描述
我们可以从图中看出来我们要想完成这种在图片上添加数据并生成图片的效果,我们就必须要先得到它的位置,然后再Bitmap(Bitmap这个方法是VS中用来封装 GDI+ 位图,此位图由图形图像及其特性的像素数据组成。 System.Drawing.Bitmap 是用于处理由像素数据定义的图像的对象。)这个方法把这张图片转化为栅格图,然后再为这张图片转化为的栅格图封装好一个绘画的图面,如此我们绘画的图面就有了。既然有了绘画的图面,那么又如何少的一支画笔呢,所以接下来我们就还要再定义一个单色的画笔。如此我们就同时拥有了绘画的图面以及一支单色的画笔,那么接下来就是要看我们如何去绘制我们的这张绘画的图面了。
那么我们接下来就是要去为这张绘画图纸在指定位置添加上我们所需要的所有数据,因此我们就需要用到我们的DrawString这个方法,DrawString方法主要是用来在我们指定的位置用自己亲自指定的画笔(Brush)以及我们喜欢的字体(Font)去对对象绘制我们自己指定的文本字符串的内容。但是DrawString方法也是有自己固定的格式的:DrawString方法(要绘制的文本内容,所使用的字体,绘制文本的画刷,开始绘制的坐标点)。
在这里插入图片描述
如此我们就可以从图中看出来,我们已经在我们的那张新的图片中的固定的位置上填写上我们所需要的所有的数据了,因此我们就需要把他们输出到页面上就可以了,那么我们有应该如何去把这张图片在控制器上把他输出到页面上呢?
其实我们也就只需要再建一个支持存储功能的流就可以,我们就可以把我们的那张新的表单转换成留的形式把它存储进我们的新建的这个存储区的流之中就可以了,然后再转换一个类型再把它们输出到页面上就行了。如下图所示:
在这里插入图片描述
我们最后就只需要把我们的图像转换成jpeg的格式保存到我们的数据流之中,然后再把这张图片从我们新建的存储区中以byte的类型输出到我们页面上就可以了。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值