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

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

开发工具与关键技术：Visual Studio 2015
作者：李德新
撰写时间：2019年6月04日

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

标签中放入我们需要的输入框或者其他样式即可。

如上图中所示我们在页面上就已经把我们需要的填写的数据的地方都已经搭建好空格，为后面我们填写数据做好了准备。而且还把我们这张表单的所有的别的信息都已经填写好了。那么我们就可以为我们的这张表单写上我们需要的按钮，在我们点击按钮的时候就可以自动为我们填写上我们所需要的各种查询到的数据了。

如此我们就可以在这些按钮上写上我们所需要的功能了，在我们写上了这些功能之后我们就可以去数据库中去查询到我们我们所需要的数据，然后再通过我们自己的选择把他们填写到我们现做的这张表单上面来。
在我们填写数据之前，我们还需要查询到我们需要的数据，如此我们才可以把我们选中的数据填写进我们的这张表单之中，因此我们在生成表单之前，还要先查询出我们需要的数据才可以。所以在这之前我们先写一个查询数据的方法。我们就是要把数据查找出来，然后我们就可以将这些数据之中我们需要用到的都可以先把他们拿出来了。

我们可以先使用layui插件去做一个表格去存放我们查询出来的数据，然后再为我们的表格中的每一行数据写一个监听事件，监听我们对行的所有的点击事件，因此，每当我们点击其中的每一行数据的时候就会有一个方法把我们点击选中的数据填写到我们的那张新建的表单上面，如此我们就可以把每一行数据的数据都绑定好。

如图所示我们为我们的数据标的每一行都添加上一个监听点击事件，每当我们点击哪一行的时候，我们的数据就会主动填写上到我们的这张新的表单上面。因此，我们要准备好待会如何在控制器上去获取到我们需要的数据，并且要如何才能回填到我们想要他回填到的位置上面去。
接下来我们就是要在控制器上去获取到我们需要的数据，然后把数据回填到我们所药房的位置，所以我们在获取到数据之后还要确认我们数据放置的位置。

从图中我们可以看的到我们在控制器之中连表查询出我们所有需要的数据之后，再建立另一张新的表格去存放我们所需要的五条数据。那么接下来我们就是要在控制器上去获取到我们页面上的那张空白的数据表单的位置，然后就可以在控制器上为我们的数据确认好数据填写的位置了。

我们可以从图中看出来我们要想完成这种在图片上添加数据并生成图片的效果，我们就必须要先得到它的位置，然后再Bitmap（Bitmap这个方法是VS中用来封装 GDI+ 位图，此位图由图形图像及其特性的像素数据组成。 System.Drawing.Bitmap 是用于处理由像素数据定义的图像的对象。）这个方法把这张图片转化为栅格图，然后再为这张图片转化为的栅格图封装好一个绘画的图面，如此我们绘画的图面就有了。既然有了绘画的图面，那么又如何少的一支画笔呢，所以接下来我们就还要再定义一个单色的画笔。如此我们就同时拥有了绘画的图面以及一支单色的画笔，那么接下来就是要看我们如何去绘制我们的这张绘画的图面了。
那么我们接下来就是要去为这张绘画图纸在指定位置添加上我们所需要的所有数据，因此我们就需要用到我们的DrawString这个方法，DrawString方法主要是用来在我们指定的位置用自己亲自指定的画笔(Brush)以及我们喜欢的字体(Font)去对对象绘制我们自己指定的文本字符串的内容。但是DrawString方法也是有自己固定的格式的：DrawString方法(要绘制的文本内容，所使用的字体，绘制文本的画刷，开始绘制的坐标点)。

如此我们就可以从图中看出来，我们已经在我们的那张新的图片中的固定的位置上填写上我们所需要的所有的数据了，因此我们就需要把他们输出到页面上就可以了，那么我们有应该如何去把这张图片在控制器上把他输出到页面上呢？
其实我们也就只需要再建一个支持存储功能的流就可以，我们就可以把我们的那张新的表单转换成留的形式把它存储进我们的新建的这个存储区的流之中就可以了，然后再转换一个类型再把它们输出到页面上就行了。如下图所示：

我们最后就只需要把我们的图像转换成jpeg的格式保存到我们的数据流之中，然后再把这张图片从我们新建的存储区中以byte的类型输出到我们页面上就可以了。

在图片上添加文字并生成图片相关推荐

iOS在图片上添加文字图片
图片上添加文字,在网上找的都是iOS10弃用的一个方法(怕以后麻烦就找了另一种方法替代)弃用链接简洁版 - (UIImage*)text:(NSString*)text addToImage:(UI ...
python怎么加图片_怎么在图片旁边加文字 python如何在图片上添加文字 - 励志 - 52资讯网...
Python在图片上添加文字的两种方法:OpenCV和PIL 一.OpenCV方法 1.安装cv2 pip install opencv-python 2.利用putText方法来实现在图片的指定位置 ...
html和css的图片怎么加,html+css如何在图片上添加文字
html+css如何在图片上添加文字 2018-09-14 效果如图思路:div相对定位. 图片默认定位, 文字绝对定位参考代码 html> /*div1下面包含着1个图片和1段文字*/ ...
python在图片上添加文字 - cv2模块的安装与使用
一.cv2的安装一般来说,在pycharm中安装包的方式如下: 点击"+"之后,在搜索框中输入"cv2",点击下方的"Install package ...
iOS在图片上添加文字或图片
Objective-C在图片上添加文字,请使用如下方法: /**在图片上添加文字,只支持英文,如果想添加其他文字,请看下面的方法@param image 图片@param string 要添加的文字@ ...
php 图片上加文字,php使用GD库实现图片上添加文字的方法（代码）
本篇文章给大家带来的内容是关于php使用GD库实现图片上添加文字的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 我们可以利用php的gd库扩展来对我们的图片进行处理,例 ...
【PHP实例】使用GD2函数在图片上添加文字
实例说明 PHP 中的 GD 库支持中文,但必须要以 UTF-8 格式的参数来进行传递.如果使用imageString () 函数直接绘制中文字符串,就会显示乱码,这是因为GD2 对中文只能接收UTF ...
qt怎么在图片上添加文字
你可以使用 Qt 的 QPainter 类来在图片上添加文字.首先,你需要创建一个 QPixmap 对象,并使用 QPainter 类的构造函数将其作为参数传入.然后,你可以使用 QPainter 的 ...
opencv怎么在图片上添加文字？
在 OpenCV 中,可以使用 cv2.putText() 函数在图像上添加文本.这个函数需要指定文本.文本位置.字体.字体比例.颜色.线宽等参数. opencv怎么在图片上添加文字? 下面是一个示例 ...

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

在图片上添加文字并生成图片相关推荐

最新文章

热门文章