php图像处理库_一个简单PHP图像库

php图像处理库

I’ve shown how to make galleries using only HTML and CSS in the past. While you can create a spectacular gallery page using just those technologies, the amount of code required is quite high, and grows linearly with the number of images.

过去，我已经展示了如何仅使用HTML和CSS制作画廊 。 尽管仅使用这些技术就可以创建引人入胜的图库页面，但是所需的代码量却很高，并且随着图像数量的增加而线性增长。

We can use PHP to address each of these issues. We won't use CSS for the sake of simplicity and clarity, but there is nothing to prevent you from adding as many presentation rules as you like (see the end of this article for an example.

我们可以使用PHP解决这些问题。 为了简单明了，我们不会使用CSS ，但是没有什么可以阻止您添加任意多的表示规则(请参阅本文的末尾作为示例。

To understand the central concept of what we’re about to do, it make help to take a form.html and formhandler.php page (as I developed in a previous article) and make a single change to the form tag on the first page:

要理解我们将要做什么的中心概念，请采取form.html和formhandler.php页面(如我在上一篇文章中开发的 )并在第一页上对form标记进行一次更改会有所帮助。 ：

<form action="formhandler.php" method="get">

Go ahead and submit the form as before. You should see that formhandler.php does not display the form information in the body, but now in the URL resembles something like the following:

继续并像以前一样提交表单。 您应该看到formhandler.php不在正文中显示表单信息，但是现在URL中类似于以下内容：

http://localhost:8888/formhandler.php?firstname=Dudley&lastname=Storey

http：// localhost：8888 / formhandler.php？firstname = Dudley＆lastname = Storey

The GET method places the information from the form in the URL. This is inherently insecure, and for that reason the method is rarely used with forms… but we can use a variation on the technique to create a gallery. The important thing is the format used: there is a question mark after the page name, then the name of the first variable and what its value is, an ampersand, and the second variable and its value.

GET方法将来自表单的信息放置在URL中。 这本质上是不安全的，因此，该方法很少用于表格……但是我们可以使用该技术的一种变体来创建画廊。 重要的是使用的格式：页面名称后有一个问号，然后是第一个变量的名称及其值，“＆”号和第二个变量及其值。

For this simple gallery exercise, you’ll need several thumbnail images that are approximately the same size, along with full-size versions of the same images. We’ll start as if we were making an HTML page with standard markup: create a page called gallery.php and add markup like the following:

对于此简单的画廊练习，您将需要几个大小近似相同的缩略图，以及相同图像的全尺寸版本。 就像创建带有标准标记HTML页面一样，我们将开始：创建一个名为gallery.php的页面，并添加如下标记：

<ul>
	<li><a href="#">
			<img src="landscape1_thumb.jpg" alt>
		</a>
	<li>
		<a href="#">
			<img src="landscape2_thumb.jpg" alt>
		</a>
	<li>
		<a href="#">
			<img src="landscape3_thumb.jpg" alt>
		</a>
</ul>
<figure>
	<img src="landscape1_large.jpg" alt>
	<figcaption>Caption</figcaption>
</figure>

We want to use the links to inform PHP which “hero” image we wish to show. To do this, we’ll use a variation of the GET method. Let’s take the first link as an example:

我们想要使用链接通知PHP我们希望显示哪个“英雄”图像。 为此，我们将使用GET方法的一种变体。 让我们以第一个链接为例：

<li><a href="gallery.php?img=landscape1_large.jpg">
<img src="landscape1_thumb.jpg" alt></a>

Saving and uploading the page and clicking on the first thumbnail won’t produce any change in the body of the page, but you should see the URL being modified. Essentially we are looping back on gallery.php, passing a variable and its value when we do so. Because we are not moving to a new page, we can drop the filename in the link:

保存和上传页面并单击第一个缩略图不会对页面的主体产生任何更改，但是您应该看到URL已被修改。 从本质上讲，我们正在循环返回gallery.php ，并在执行此操作时传递变量及其值。 由于我们不移至新页面，因此可以在链接中删除文件名：

<li><a href="?img=landscape1_large.jpg">
<img src="landscape1_thumb.jpg" alt></a>

Now go ahead and add information to the other links as well, specifying the appropriate filename as the value of the img variable in each link.

现在，继续向其他链接添加信息，并在每个链接中将适当的文件名指定为img变量的值。

Next, we want to gain the value of the variable and use it in PHP. We used $_POST['name'] in our form example, and this gallery uses the GET method: how do you think we do that?

接下来，我们要获取变量的值并在PHP中使用它。 我们在表单示例中使用了$_POST['name'] ，而该库使用了GET方法：您如何看待我们？

Let’s echo the variable to replace the name of the large static image. Note that we have to retain the path information: PHP knows the value of the variable, but not where the associated image is.

让我们echo该变量以替换大型静态图像的名称。 请注意，我们必须保留路径信息：PHP知道变量的值，但不知道关联图像的位置。

<figure>
	<img src="<?php echo $_GET['img']; ?>" alt>
	<figcaption>Caption</figcaption>
</figure>

Uploading the page, you should find that clicking on the thumbnails now produces the associated large image. In addition, a user returning to this page from a bookmark will see the same large image that was present when they bookmarked the page, as doing so records the entire URL, including the GET information. Our code always reads the URL to determine which large image to show.

上传页面后，您应该发现单击缩略图现在会产生关联的大图像。 此外，从书签返回该页面的用户将看到他们在对该页面添加书签时看到的相同的大图像，因为这样做会记录整个URL，包括GET信息。 我们的代码总是读取URL以确定要显示的大图像。

Right now, our caption doesn’t change. Let’s fix that by adding another variable to the URL. We have to be careful when doing so: adding a simple ampersand will render the HTML of our page invalid, so we must separate the variable/value pairs with an HTML entity equivalent instead:

目前，我们的标题不变。 让我们通过在URL中添加另一个变量来解决此问题。 我们在执行此操作时必须小心：添加一个简单的＆符号会使页面HTML无效，因此我们必须使用等效的HTML实体来分隔变量/值对：

<li>
	<a href="?img=landscape1_large.jpg&amp;caption=Landscape 1">
		<img src="landscape1_thumb.jpg" alt>
	</a>

Now we have two variables, $_GET['img'] and $_GET['caption']. We can use the latter much as we did the former:

现在我们有两个变量， $_GET['img']和$_GET['caption'] 。 我们可以像使用前者一样使用后者：

<figure>
	<img src="<?php echo $_GET['img']; ?>" alt>
	<figcaption>
		<?php echo $_GET['caption']; ?>
	</figcaption>
</figure>

You can (and should) also use this caption variable for other purposes too: as the value for alt attribute for the large image, for example, or within the <title> of the page.

您也可以(并且应该)将此标题变量也用于其他目的：例如，作为大图像的alt属性值，或在页面的<title>中。

There is just one remaining issue. When the page is first loaded, neither $_GET['img'] nor $_GET['caption'] is set as a variable. Therefore, our page will come up without a large image very first time it is visited, and PHP will very likely produce an “unknown variable” error.

剩下的只有一个问题。 首次加载页面时， $_GET['img']和$_GET['caption']均未设置为变量。 因此，我们的页面在第一次被访问时就不会显示大图，PHP很可能会产生“未知变量”错误。

A better option would be to check to see if $_GET['img'] had been set, and if not, to set the variable to a default value: the large image we would prefer our first-time visitor to see. In addition, the variable names themselves are getting a little long to type. To solve both problems we will add the following code to the top of the page:

更好的选择是检查是否设置了$_GET['img'] ，如果没有设置，则将变量设置为默认值：较大的图像，我们希望我们的首次访问者看到。 另外，变量名称本身也要键入一些时间。 为了解决这两个问题，我们将在页面顶部添加以下代码：

<?php if (!isset($_GET['img']) {
	$img = "landscape1_large.jpg"; $caption="Landscape 1";
} else {
	$img = $_GET['img'];
	$caption = $_GET['caption'];
} ?>

Referring back to the previous section on if conditional statements, these lines of code do three things: test if the $_GET['img'] variable exists, and if it does, create new, shorter variables that have the same values as the longer $_GET variables, making them easier to reference; if it does not, set both $img and $title to default values.

回顾上一节有关条件语句的内容 ，这些代码行可以完成三件事：测试$_GET['img']变量是否存在，如果存在，则创建新的，较短的变量，其值与较长的变量相同。 $_GET变量，使其更易于引用； 如果不是，请将$img和$title都设置为默认值。

It is now required that we change the references to these variables later in the code:

现在需要在以后的代码中更改对这些变量的引用：

<figure>
	<img src="<?=$img?>" alt="<?=$caption?>">
	<figcaption><?=$caption?>
</figcaption>

(I’m using PHP shortcuts for the echo statements in this case).

(在这种情况下，我将PHP快捷方式用于echo语句)。

We can now build up an entire gallery from this simple template: all we have to be careful about is that filename references we use in the links match real files uploaded to the correct location on our server. It shouldn’t surprise you that there’s an even more efficient way to do this, but before we get there we’ll take a step that will help us on the way: displaying random images.

现在，我们可以从这个简单的模板构建一个完整的库：我们需要注意的是，链接中使用的文件名引用与上载到服务器上正确位置的实际文件相匹配。 让您感到惊讶的是，还有一种更有效的方法可以做到这一点 ，但是在我们到达那里之前，我们将采取一个可以帮助我们的步骤： 显示随机图像 。

添加动画 (Adding animation)

Learners often think that PHP is somehow “separate but equal” to HTML and CSS. Nothing could be further from the truth: PHP produces pages, and any other web technology can be used alongside it. For example, to add a fade-in effect, we could use a CSS keyframe animation:

学习者经常认为PHP在某种程度上与HTML和CSS是“独立但平等的”。 事实并非没有：PHP可以生成页面，并且可以将其他任何Web技术与它一起使用。 例如，要添加淡入效果，我们可以使用CSS关键帧动画：

@keyframes fadein { 
	to { opacity: 1; }
}
figure img {
	opacity: 0;
	animation: 1s fadein forwards;
}

翻译自: https://thenewcode.com/196/A-Simple-PHP-Image-Gallery

php图像处理库