bibabo-tech/croppa

通过特别格式化的URL为Laravel创建图片缩略图

维护者

详细信息

github.com/BibaboTech/croppa

来源

安装: 10

依赖: 0

建议者: 0

安全性: 0

星标: 0

关注者: 0

分支: 91

4.12.2 2022-04-14 06:32 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.

Conflicts

MIT 0d0179a404f097f11a0f772c223afcc8ae5d21fc

  • Robert Reinhard

This package is not auto-updated.

Last update: 2024-09-27 13:14:33 UTC

README

Packagist Build Status

Croppa是Laravel 4.x、5.x和Lumen（仅本地存储）的缩略图生成包。它采用与像Paperclip这样的库不同的方法，这些库将缩略图尺寸存储在模型中。相反，缩放和裁剪说明来自特别格式化的URL。例如，假设你有一个图像路径

/uploads/09/03/screenshot.png

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

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

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

同时，它将新裁剪的图像保存到请求的同一位置（例如“…-300x200.png”路径）的磁盘上。因此，**所有未来的请求都直接从磁盘提供服务**，绕过了PHP和所有这些开销。换句话说，**你的应用**不需要启动**只是为了提供一张图片**。这是与其他类似库的不同之处。

从4.0版本开始，Croppa允许将图像存储在远程磁盘上，如S3、Dropbox、FTP等，这是由于Flysystem集成。

安装

服务器要求

  • gd
  • exif - 如果你想要Croppa根据EXIF元数据自动旋转来自手机等设备的图像，则必需。

Laravel

  1. 将Croppa添加到你的项目中：composer require bkwld/croppa
  2. 如果使用Laravel < 5.5
    • 将Croppa添加到你的app配置的提供者列表中：'Bkwld\Croppa\ServiceProvider'
    • 将外观添加到你的app配置的别名中：'Croppa' => 'Bkwld\Croppa\Facade'

Lumen

  1. 将Croppa添加到你的项目中：composer require bkwld/croppa
  2. 启用外观，并在bootstrap/app.php中添加外观：class_alias('Bkwld\Croppa\Facade', 'Croppa');。
  3. 在bootstrap/app.php中添加提供者：$app->register('Bkwld\Croppa\ServiceProvider');。
  4. 在项目根目录中创建一个名为'config'的目录，并将配置文件复制到那里，然后将其重命名为croppa.php。
  5. 将Laravel辅助文件添加到你的composer.json中，如此文件，到文件自动加载部分。

Nginx

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

# 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";
}

配置

阅读配置文件的源以获取配置选项的文档。以下是一些常见的设置示例（更多示例可以在这里找到）

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

php artisan vendor:publish --tag=croppa

本地src和裁剪目录

最常见的情况，源图像及其裁剪是在doc_root的"uploads"目录中创建的。

return [
	'src_dir' => public_path().'/uploads',
	'crops_dir' => public_path().'/uploads',
	'path' => 'uploads/(.*)$',
];

因此，如果你有<img src="<?=Croppa::url('/uploads/file.jpg', 200)?>">，返回的URL将是/uploads/file-200x_.jpg，源图像将在public_path().'/uploads/file.jpg'中查找，新裁剪将在public_path().'/uploads/file-200x_.jpg'中创建。并且因为由Croppa::url()生成的URL指向裁剪创建的位置，Web服务器（Apache等）将在下一个请求中直接提供它（你的应用不需要启动只是为了提供一张图片）。

这里是一个另一个示例

return [
	'src_dir' => '/www/public/images',
	'crops_dir' => '/www/public/images/crops',
	'path' => 'images/(?:crops/)?(.*)$',
	'url_prefix' => '/images/crops/',
];

如果你有 <img src="<?=Croppa::url('http://domain.com/images/crops/file.jpg', 200, 100)?>">，返回的URL将是 http://domain.com/images/crops/file-200x100.jpg，源图像将在 /www/public/images/file.jpg 中查找，并且新的裁剪图像将创建在 /www/public/images/crops/file-200x100.jpg。

S3上的源图像，本地裁剪

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

// Early in App bootstrapping, bind a Flysystem instance.  This example assumes
// you are using the `graham-campbell/flysystem` Laravel adapter package
// https://github.com/GrahamCampbell/Laravel-Flysystem
App::singleton('s3', function($app) {
	return $app['flysystem']->connection();
});

// Or alternatively, without the Laravel-Flysystem package
App::singleton('s3', function () {
    return Storage::disk('s3')->getDriver();
});

// Croppa config.php
return [
	'src_dir' => 's3',
	'crops_dir' => public_path().'/uploads',
	'path' => 'uploads/(.*)$',
];

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

使用方法

Croppa使用的URL模式是

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

因此这些都是有效的

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

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

为了使准备Croppa期望的URL变得更加容易，你可以使用以下视图助手

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

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

  • $url : 源图像的URL。使用 path 配置正则表达式提取相对于 src_dir 的图像路径。
  • $width : 一个数字或null作为通配符
  • $height : 一个数字或null作为通配符
  • $options - 键值对数组，其中值是可选的参数数组。支持以下选项
    • resize - 通过调整大小使图像适合提供的宽度和高度。省略时，默认为裁剪以适应边界（除非有一边是通配符）。
    • pad - 填充图像到所需的尺寸。将图像移动到中心并用给定的颜色填充剩余部分。如果没有指定颜色，则使用白色 [255,255,255]
    • quadrant($quadrant) - 使用传入的象限头裁剪图像的剩余溢出。支持的 $quadrant 值是：T - 顶部（适合头像），B - 底部，L - 左侧，R - 右侧，C - 中心（默认）。有关更多信息，请参阅PHPThumb 文档。
    • 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 以打开或关闭交错
    • upscale($bool) - 设置为 1 或 0 以允许图像被放大。如果为假，并且请求的尺寸大于源图像，它将 只 创建与原始源图像一样大的图像。

Croppa::render($cropurl)

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

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

或者

Croppa::render(Croppa::url('/uploads/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_dir并匹配所有符合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 项目发布以获取发行说明。

此捆绑包使用PHPThumb进行所有图片缩放。"裁剪"相当于其adaptiveResize()，而"缩放"是…缩放。支持通过Flysystem与非本地磁盘交互。