README

关于 Blade Image Crop 3

无需头疼即可使用WebP。为您的用户提供的首选显示提供备用图像大小。在服务器上参考一个图像，然后在blade组件中指定其尺寸。

所有您懒得做的图像工作，但只需一个blade标签的便利。

它自动裁剪和调整大小，并为高DPI设备和新的图像格式创建多个版本。然后创建显示它们的HTML。

它支持：

自动裁剪到指定的宽高比和焦点点
不同DPI的多个文件
WebP作为回退（在图片标签中）
显示在慢速连接上的内联背景
移动和桌面版本
本地和在线图像
排队图像处理

安装

您可以通过composer安装此包

composer require dnabeast/bladeimagecrop

您可以发布配置文件

php artisan vendor:publish --provider="DNABeast\BladeImageCrop\BladeImageCropServiceProvider"

默认情况下，系统设置为使用Laravel公共存储路径，因此请务必设置

php artisan storage:link

或者对存储进行任何您想要的更改。（更多信息见下文）

升级指南

因为它使用Laravel Http助手，所以此程序不再支持Laravel 6。默认情况下，我们使用Image Magick，它是Laravel Forge默认安装的。您仍然可以选择通过发布配置文件并选择GD选项来切换到GD库。系统现在从公共目录或URL获取原始src（而不是FileStorage系统所需的奇怪的工作区）从公共目录）。下次您使用blade组件加载图像时，它将复制您的图像到存储目录并重新创建调整大小的图像。它只会这样做一次。您可以安全地删除旧版本的文件。如果已将images_from_public_path更改为false，则它将不再工作，您必须更新您的img src属性。如果原始图像太小，则不再放大图像。（允许浏览器这样做）

用法

简单的图像标签

仅调整图像大小

如果要将图像调整到特定宽度而不裁剪高度，则您的图像可能如下所示

<img src="/storage/overlyLargeImage.jpg" class="" alt="" />

相反，您会这样做

<x-img src="/storage/overlyLargeImage.jpg" width="300" class="" alt="" />

初始图像将被调整大小并保存为300像素宽的版本和600像素宽的版本（用于高清显示），格式为JPG。生成的输出将是

<img srcset="
/storage/blade_image_crop_holding/overlyLargeImage_jpg/300x200_50_50.jpg 1x,
/storage/blade_image_crop_holding/overlyLargeImage_jpg/600x400_50_50.jpg 2x"
style="
background-size: 100% 100%;
background-image: url('data:image/png;base64,*very_low_res_base64_encoded_img*")"
src="/storage/blade_image_crop_holding/overlyLargeImage_jpg/320x240_50_50.jpg"
width="300" height="200" class="" alt="">

注意，不同的DPI版本设置在srcset标签中。创建一个非常低分辨率的png图像并将其转换为base64，然后内联放置在style标签中。它还计算出调整大小后的图像高度。这种组合意味着加载的图像无需进行HTML调用即可显示在屏幕上，并避免了重绘问题。为什么这很重要

此图像处理是异步进行的，因此首次加载将显示未压缩的图像，允许有足够的时间处理各种版本，而不会减慢页面加载速度。如果原始图像在后续页面加载中继续加载，请检查您的队列设置。

调整大小和裁剪图像

像以前一样，您的图像可能如下所示

<img src="/storage/overlyLargeImage.jpg" class="" alt="" />

在这个例子中，你可能想让图片宽度为300像素，高度为180像素。

（注意在 properties 前面的 :，这样让blade识别它是一个数组而不是一个字符串）

<x-img src="/storage/overlyLargeImage.jpg" :properties="[300, 180]" class="" alt="" />

这将裁剪掉图片的顶部和底部。（或者如果原始图片的宽高比更宽，则裁剪掉左右两侧）这对于你有多张不同大小和形状的原始图片，但想让网站上的图片相同非常有用。

创建不同大小和形状的版本

你不必有不同的DPI设置，你可以指定大小（和形状）。生成的代码将不再使用DPI乘数，而是设置像素宽度版本。

<x-img src="/storage/overlyLargeImage.jpg" :properties="[[300, 180], [1024, 300], 2048]" class="" alt="" />

这将创建一个300像素 x 180像素的版本，一个1024像素 x 300像素的版本，以及一个2048像素 x 600像素的版本（以之前的宽高比为参考）

生成的代码将是

<img srcset="
	/storage/blade_image_crop_holding/overlyLargeImage_jpg/300x180_50_50.jpg 300w,
	/storage/blade_image_crop_holding/overlyLargeImage_jpg/1024x300_50_50.jpg 1024w,
	/storage/blade_image_crop_holding/overlyLargeImage_jpg/2048x600_50_50.jpg 2048w"
style="background-size: 100% 100%; background-image: url('data:image/png;base64,*very_low_res_base64_encoded_img*")
	 src="/storage/blade_image_crop_holding/overlyLargeImage_jpg/300x180_50_50.jpg"
	 width="300" height="180" class="" alt="">

注意，现在srcset使用的是300w、1024w和2048w，而不是1x、2x。同时请注意，你需要添加CSS样式来确保高度（或宽度）设置为auto，否则某些图片版本可能会失真。（tailwindcss默认会这样做）

创建具有特定焦点点的版本

如果你的原始图片的焦点不在图片中心（例如左侧的人物）你可以设置裁剪水平偏移。

<x-img src="/storage/overlyLargeImage.jpg" :properties="[300, 200, 75]"/>

上述设置将裁剪以包含原始图片宽度的75%和高度的50%的位置。

<x-img src="/storage/overlyLargeImage.jpg" :properties="[300, 200, 50, 25]"/>

这将聚焦于水平中心，但比顶部向下25%。

这对于头像或相同图片的移动版本非常有用。

pic标签

JPG是给傻瓜用的。所有酷孩子现在都在使用WebP。问题是它还没有完全得到支持。解决方案是制作多分辨率的webp和JPG（以及你想要使用的任何其他格式）。然后，你将你的默认img和源标签放在一个picture标签内。想象一下，这和写一个img标签一样简单。

你不必这样做。Blade Image Crop的真正强大之处在于pic标签。（注意：你必须用picture标签包裹这个标签）

<picture>
	<x-pic src="/storage/overlyLargeImage.jpg" :properties="[300, 100]"/>
</picture>

这将导致

<picture>
	<source type="image/webp" srcset="
	/storage/blade_image_crop_holding/overlyLargeImage_jpg/300x100_50_50.webp 1x,
	/storage/blade_image_crop_holding/overlyLargeImage_jpg/600x200_50_50.webp 2x">
	<source type="image/jpeg" srcset="
	/storage/blade_image_crop_holding/overlyLargeImage_jpg/300x100_50_50.jpg 1x,
	/storage/blade_image_crop_holding/overlyLargeImage_jpg/600x200_50_50.jpg 2x">
	<img  style="background-size: 100% 100%; background-image: url('data:image/png;base64,*very_low_res_base64_encoded_img*"')"
	src="/storage/blade_image_crop_holding/overlyLargeImage_jpg/300x100_50_50.jpg"
	width="300" height="100" class="" alt="">
</picture>

如果浏览器可以使用WebP，它将使用WebP。如果不行，它将尝试加载JPG。

picture标签可能需要一些时间来适应。默认情况下，它是内联的，所以你可能需要用block或inline-block样式来设置它。你可以向picture标签添加类，或者向blade组件标签添加类（因此也是img标签），具体取决于你要针对哪个元素。

picture标签对于这种技术至关重要，因为你需要多个源标签来检查格式。

sources标签

你可能想要对源标签有更多的控制。如果你想添加媒体查询或大小信息，你可以分部分构建picture。

注意img标签需要sources="false"属性，这样srcset就会只放在源标签中，而不是源和img标签中。

<picture>
	<x-sources src="/storage/blade_image_crop_holding/overlyLargeImage_jpg" :properties="[[800, 600], 1024]" sizes="(min-width: 60rem) 80vw, 100vw"/>
	<x-img sources="false" src="/img/OverlyLargeImage.png" :properties="[[800, 600], 1024]"/>
</picture>

这将输出

<picture>
	<source type="image/webp" srcset="
	/cater_jpg/800x600_50_50.webp 800w,
	/cater_jpg/1024x768_50_50.webp 1024w"
	sizes="(min-width: 60rem) 80vw, 100vw">
	<source type="image/jpeg" srcset="
	/cater_jpg/800x600_50_50.jpg 800w,
	/cater_jpg/1024x768_50_50.jpg 1024w"
	sizes="(min-width: 60rem) 80vw, 100vw">
	<img style="background-size: 100% 100%; background-image: url('*very_low_res_base64_encoded_img*')" src="/cater_jpg/800x600_50_50.jpg" width="800" height="600" >
</picture>

或者，如果你想要一个正方形的移动版本和宽的桌面版本。（并且假设图片的焦点稍微偏向左边）

<picture>
	<x-sources src="/storage/blade_image_crop_holding/overlyLargeImage_jpg" :properties="[300, 300, 35, 50]" media="(max-width: 450px) and (orientation: portrait)" />
	<x-sources src="/storage/blade_image_crop_holding/overlyLargeImage_jpg" :properties="[800, 600]" />
	<x-img sources="false" src="/img/OverlyLargeImage.png" :properties="[800, 600]" alt="" class=""/>
</picture>

这将创建一组额外的源文件，仅在媒体查询匹配时激活。

配置选项

'disk' => 'public'

选择你想要用于存储的磁盘

默认偏移量

'offset_x' => 50, // percentage
'offset_y' => 50,

如果你有某种疯狂的理由想要默认裁剪不在中心。

'pixel_device_ratios' => ['1x', '2x']

如果你想支持超高分辨率屏幕，你可以将其更改为任何你想要的乘数。例如['1x', '2x', '4x']

或者，如果你不想有任何DPI选项，只需将其设置为['1x']

'backgrounds' => true,

可以关闭内联背景。如果你需要在图片上添加样式标签，你可能需要关闭此选项。

'text_labels' => env('BLADE_CROP_TEST_LABELS', false),

如果您需要测试以确保正确显示图像，将此选项设置为“true”将在图像本身上写入文件名。注意：一旦关闭此标志，任何创建的文件都将保留此标签。应删除这些图像以便重新创建。

'compress_held_image' => env('BLADE_CROP_COMPRESS_HELD_IMAGE', true)

该软件包创建并存储一个用于参考的保留图像。如果由于某种原因原始图像丢失，始终有一个真实的来源。如果此图像完全不进行压缩，我们可以确保至少将其以略微有损的方式存储，否则您的存储空间将被无损图像填满。

'render_source_tag_if_unavailable' => env('BLADE_CROP_RENDER_SOURCE', false),

在开发过程中，即使发生错误，也可以看到源标签，这可能会很有用。在生产环境中，您可以关闭此选项。如果您依赖于JS检测图像错误，请关闭此选项。例如：

<img src="broken_img.jpg" onerror="this.onerror=null; this.src='/svg/backup.svg'"/>

构建类

此处可以更换默认的构建类。键将是创建的文件类型。如果您想替换图像文件的压缩方式，可以构建自己的。该类在构造函数中接受一个图像字符串，并将其保存到您的驱动器上。

'build_classes' => [
	//'avif' => 'DNABeast\BladeImageCrop\Builder\IM_AVIFBuilder',
	'webp' => 'DNABeast\BladeImageCrop\Builder\IM_WebPBuilder',
	// 'webp' => 'DNABeast\BladeImageCrop\Builder\GD_WebPBuilder',
	'jpg' => 'DNABeast\BladeImageCrop\Builder\IM_JPGBuilder',
	// 'jpg' => 'DNABeast\BladeImageCrop\Builder\GD_JPGBuilder',
	// 'jpg' => 'DNABeast\BladeImageCrop\Builder\ShortPixelJPGBuilder',
],

键的顺序是文件在浏览器中加载的顺序。因此，如果您首先放置JPG，它甚至不会尝试加载WebP。

'background_builder' => 'DNABeast\BladeImageCrop\BGBuilder'

背景构建器也可以被覆盖。目前，它将图像调整大小为4px x 4px，然后将其转换为base64，并返回带有背景信息的样式标签。这由Laravel进行缓存。

如果您想（例如）更改此选项以加载相同的加载图像，可以编写自己的构建器并将其替换到配置中。

故障排除

您是否收到此错误？

syntax error, unexpected end of file, expecting "elseif" or "else" or "endif"

这可能意味着您没有关闭blade组件标签。使用以下解决方案之一。

<x-img />
<x-img></x-img>

这个怎么样？

File not found at path: imageNotFound

或者图像显示为一个空的4x3宽高比的矩形。

原始图像不在您告诉它的位置。它应该在public路径中查找。如果您对public路径进行了奇怪的操作，这是一个开始查找的好地方。在您的本地环境中，您可以通过检查img的输出图像路径来查看图像的完整路径。

服务器故障？500错误？

在加载包含许多图像或一些大型图像的页面时，PHP服务可能会过载。BladeImageCrop对图像处理进行异步处理，因此您可以尝试设置您的队列驱动程序。

测试

vendor/bin/phpunit

变更日志

请参阅变更日志以获取有关最近更改的更多信息。

贡献

请参阅贡献指南以获取详细信息。

安全

如果您发现任何与安全相关的问题，请通过电子邮件dan@civicnet.com.au联系，而不是使用问题跟踪器。

dnabeast / bladeimagecrop

维护者

详细信息