将宽图像输出到页面


Output wideimage to page

我正在尝试使用 WideImage 插件并将图像加载到其中,调整其大小,然后以以下形式输出它:

<img class="image" src="image.jpg" />

到目前为止,我有这个:

<?php
  $image = WideImage::load('image.jpg');
  $resizedImage = $image->resize(150, 150, 'outside')->crop('center', 'middle', 150, 150);
?>

如何输出调整后的图像,使其采用上述形式?帮助!

调整大小

可以通过将一些参数传递给 resize() 方法来调整图像大小。前两个是图像的新尺寸,可以是智能坐标值。如果未指定一个维度(或给定 null),则根据另一个维度的比率计算该维度。

将图像大小调整为 400×300 框。默认情况下,调整大小会保持原始图像的纵横比,并且生成的图像会从内部适合给定的尺寸。

$resized = $image->resize(400, 300);

这等于将"内部"作为值传递$fit。

$resized = $image->resize(400, 300, 'inside');

通过将"外部"传递给$fit参数,从外部调整图像大小以适合 400×300 框。这意味着图像将至少与 400×300 一样大,并且将保持纵横比。

$resized = $image->resize(400, 300, 'outside');

通过将"fill"作为参数的值传递$fit来调整图像大小以完全适合 400×300 框。图像将根据需要拉伸,纵横比可能不会保留。

$resized = $image->resize(400, 300, 'fill');

第四个参数 ($scale) 确定何时缩放图像。可能的值包括任何(默认值)、向下和向上:

down – resize if image is larger than the new dimensions
up – resize if image is smaller than the new dimensions
any – resize regardless of the image size
调整大小

方法有两个别名:调整大小向上和调整大小向下。这两个等于分别调用 resize() $scale = 'up' 和 $scale = 'down'。

$resized = $image->resize(350, 500, 'inside', 'down');
// is equal to
$resized = $image->resizeDown(350, 500, 'inside');

在您的 HTML 中添加

<img src= "<?= $resized ?>"> – Moises Zaragoza just now edit 

问题是浏览器试图像阅读文本一样读取图像,更具体地说是 html 文档。为了解决这个问题,我会为图像处理创建一个新的 php 脚本,比如说 image.php ,带有一个函数,用于获取图像路径和修改参数。最后,只需像以前一样显示图像,只需确保将内容的标题更改为以下内容:

 header('Content-type: image/jpg');

header('Content-type: image/png');

这样,浏览器将知道如何解释收到的数据。

首先,您必须将调整大小的图像另存为文件。在你 php 放:

<?php
    $image = WideImage::load('image.jpg');
    $resizedImage = $image->resize(150, 150, 'outside')->crop('center', 'middle', 150, 150);
    $resizedImage ->saveToFile('resized_image.jpg');
?>

然后使您的图像引用新文件:

<img class="image" src="resized_image.jpg" />