bkwld/croppa

使用特别格式的URL为Laravel创建图像缩略图

维护者

详细信息

github.com/BKWLD/croppa

主页

源代码

问题

安装: 416 861

依赖项: 23

建议者: 0

安全: 0

星级: 492

观察者: 30

分支: 91

开放问题: 26

7.0.4 2024-06-11 15:55 UTC

Requires

Requires (Dev)

Suggests

  • ext-exif: Required if you want to have Croppa auto-rotate images from devices like mobile phones based on exif meta data.

MIT 09dc88f7a3bfc1f979dc8aba8afd76cec097225c

  • Robert Reinhard
  • Samuel De Backer

imageresizelaravelthumb

This package is auto-updated.

Last update: 2024-09-11 16:32:25 UTC

README

Packagist

Croppa是Laravel的缩略图生成器包。它采用与将缩略图尺寸存储在模型中的库不同的方法。相反，调整大小和裁剪指令来自特别格式的URL。

/storage/uploads/09/03/screenshot.png

要生成一个300x200的缩略图，您需要将路径更改为

/storage/uploads/09/03/screenshot-300x200.png

当然，这个文件还不存在。Croppa监听特定格式的图像路由，并在运行时构建这个缩略图，将图像数据（带有正确头部的数据）输出到浏览器，而不是返回404响应。

同时，它将新裁剪的图像保存到磁盘上，位置与您请求的位置相同（即"…-300x200.png"路径）。因此，所有未来的请求都将直接从磁盘提供服务，绕过PHP，避免不必要的开销。换句话说，您的应用程序不需要启动只是为了服务一个图像。这是与其他类似库的关键区别。

自4.0版本以来，Croppa通过Flysystem集成允许图像存储在远程磁盘上，如S3、Dropbox、FTP等。

服务器要求

  • gd
  • exif - 如果您想使用Croppa根据EXIF元数据自动旋转来自手机等设备的图像，则需要此功能。

Nginx

当使用Nginx HTTP服务器模板配置时，请将error_page 404 = /index.php?$query_string;添加到位于文件h5bp/location/expires.conf中的媒体位置块中。

# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
  error_page 404 = /index.php?$query_string;
  expires 1M;
  access_log off;
  add_header Cache-Control "public";
}

安装

将Croppa添加到您的项目：composer require bkwld/croppa

配置

请阅读配置文件源代码以了解配置选项的文档。以下是一些常见的设置示例（更多示例可以在此处找到）

您可以通过运行以下命令将配置文件发布到应用程序的配置目录

php artisan vendor:publish --tag=croppa-config

本地源和裁剪目录

最常见的情况是，源图像及其裁剪图像在默认的”public”Laravel磁盘上创建。

return [
    'src_disk' => 'public',
    'crops_disk' => 'public',
    'path' => 'storage/(.*)$',
];

因此，如果您有<img src="{{ Croppa::url('file.jpg', 200) }}">，返回的URL将是/storage/file-200x_.jpg，源图像将在'/storage/app/public/file.jpg'中查找，新裁剪将在'/storage/app/public/file-200x_.jpg'中创建。由于由Croppa::url()生成的URL指向裁剪创建的位置，因此Web服务器（Apache等）将在下一次请求时直接提供它（您的应用程序不会启动仅为了服务一个图像）。

在S3上的源图像，在本地裁剪

这是一个适合负载均衡环境的解决方案。每个应用程序服务器最终都会拥有自己的裁剪图像缓存，因此会有一些空间浪费。但是，Web服务器（Apache等）仍然可以在后续的裁剪请求上直接提供服务。

// Croppa config.php
return [
    'src_disk' => 's3',
    'crops_disk' => 'public',
    'path' => 'storage/(.*)$',
];

因此，如果您有 <img src="{{ Croppa::url('file.jpg', 200, 100) }}">，返回的URL将是 /storage/file-200x100.jpg，源图片将在配置为Flysystem实例一部分的S3桶中立即查找，并且新的裁剪将创建在 /storage/app/public/file-200x100.jpg。

用法

Croppa使用的URL模式是

/path/to/image-widthxheight-option1-option2(arg1,arg2).ext

所以这些都是有效的

/storage/image-300x200.webp             // Crop to fit in 300x200
/storage/image-_x200.webp               // Resize to height of 200px
/storage/image-300x_.webp               // Resize to width of 300px
/storage/image-300x200-resize.webp      // Resize to fit within 300x200
/storage/image-300x200-quadrant(T).webp // See the quadrant description below

Croppa::url($url, $width, $height, $options)

为了使准备Croppa期望的URL更容易，您可以使用以下视图辅助函数

<img src="{{ Croppa::url($url, $width, $height, $options) }}" />
<!-- Examples (that would produce the URLs above) -->
<img src="{{ Croppa::url('storage/image.webp', 300, 200) }}" />
<img src="{{ Croppa::url('storage/image.webp', null, 200) }}" />
<img src="{{ Croppa::url('storage/image.webp', 300) }}" />
<img src="{{ Croppa::url('storage/image.webp', 300, 200, ['resize']) }}" />
<img src="{{ Croppa::url('storage/image.webp', 300, 200, ['pad']) }}" />
<img src="{{ Croppa::url('storage/image.webp', 300, 200, ['pad' => [45,168,147]]) }}" />
<img src="{{ Croppa::url('storage/image.webp', 300, 200, ['quadrant' => 'T']) }}" />
<!-- Or, if there were multiple arguments for the last example -->
<img src="{{ Croppa::url('/uploads/image.png', 300, 200, ['quadrant' => ['T']]) }}" />

Croppa::url()接受的参数如下

  • $url : 源图片的URL。使用path配置正则表达式从相对src_disk的路径中提取。
  • $width : 一个数字或null表示通配符
  • $height : 一个数字或null表示通配符
  • $options - 键值对数组，其中值是选项的可选参数数组。支持的选项有
    • resize - 通过调整大小使图片适应提供的宽度和高度。省略时，默认为裁剪以适应边界（除非一边是通配符）。
    • pad - 将图片填充到所需的尺寸。将图片移动到中心并用给定颜色填充其余部分。如果没有指定颜色，它将使用白色 [255,255,255]
    • quadrant($quadrant) - 使用传递的象限标题裁剪图片的剩余溢出。支持的$quadrant值是：T - 顶部（适用于头像），B - 底部，L - 左侧，R - 右侧，C - 中心（默认）。
    • trim($x1, $y1, $x2, $y2) - 在应用$width和$height参数之前将源图片裁剪到由两组坐标定义的大小（$x1, $y1, ...）。这是设计用来与前端裁剪UI（如jcrop）一起使用，以便您可以尊重用户定义的裁剪选择，然后使用Croppa输出所选区域的缩略图或缩小版本。
    • trim_perc($x1_perc, $y1_perc, $x2_perc, $y2_perc) - 与trim()具有相同的效果，但接受坐标作为百分比。因此，图片的左上角是“0”，右下角是“1”。因此，如果您想将图片裁剪到中心周围的一半大小，您需要添加一个选项trim_perc(0.25,0.25,0.75,0.75)
    • quality($int) - 将jpeg压缩质量设置为0到100。
    • interlace($bool) - 设置为1或0以打开或关闭交错
    • upsize($bool) - 设置为1或0以允许放大图片。如果为假，并且您请求的大小大于源图片，则将仅创建与原始源图片一样大的图片。

Croppa::render($cropurl)

如果您想程序化地创建图片，可以将Croppa::url生成的URL传递给此函数。这将仅创建缩略图并退出。

Croppa::render('image-300x200.png');

或者

Croppa::render(Croppa::url('image.png', 300, 200));

Croppa::delete($url)

您可以通过运行以下命令来删除源图片及其所有裁剪

Croppa::delete('/path/to/src.png');

Croppa::reset($url)

与Croppa::delete()类似，除了保留源图片，仅删除裁剪。

Croppa::reset('/path/to/src.png');

控制台命令

croppa:purge

删除所有裁剪。这通过递归扫描crops_disk并匹配所有符合Croppa命名约定且可以找到相应src文件的文件来实现。接受以下选项

  • --filter - 对裁剪应用白名单正则表达式过滤器。例如：--filter=^01/匹配"./public/uploads/01/"目录下的所有裁剪
  • --dry-run - 将要删除的文件输出到控制台，但实际上并不删除

croppa.js

包含一个模块，用于从JS生成格式化的URL。在您从AJAX请求的JSON响应创建视图时，这很有帮助；您不需要在服务器上格式化URL。可以通过Require.js、CJS或作为浏览器全局变量来加载。

croppa.url(url, width, height, options)

与PHP中的Croppa::url功能相同，只是选项的格式化方式不同（因为JS没有关联数组）。

croppa.url('/path/to/img.jpg', 300, 200, ['resize']);
croppa.url('/path/to/img.jpg', 300, 200, ['resize', { quadrant: 'T' }]);
croppa.url('/path/to/img.jpg', 300, 200, ['resize', { quadrant: ['T'] }]);

运行php artisan asset:publish bkwld/croppa，Laravel将把JS复制到您的公开目录。默认情况下，它将放入/public/packages/bkwld/croppa/js。

历史记录

请阅读Github上的项目发布以获取发行说明。

此包使用Intervention Image进行所有图像缩放。 "Crop"相当于其cover()方法，"resize"相当于scale()。支持与非本地磁盘交互，由Flysystem提供。