dietercoopman/smart

此包使得以智能方式提供文件流成为可能

维护者

详细信息

github.com/dietercoopman/smart

主页

源代码

问题

资助包维护！
dietercoopman

安装数: 6,633

依赖: 0

建议者: 0

安全性: 0

星级: 227

关注者: 4

分支: 21

开放问题: 4

v1.8 2024-03-12 20:49 UTC

Requires

Requires (Dev)

MIT ba45ed22eaa78ab88c9846d0ba90d1c7f7bc24c7

  • Dieter Coopman <dieter.woop@deltasolutions.be>

laravelsmartdietercoopman

This package is auto-updated.

Last update: 2024-09-12 21:51:57 UTC

README

smart image manipulation

Latest Version on Packagist Downloads

Blade组件，用于轻松图像处理和文件下载

此包使您能够

  • 从任何地方提供图像，这可能是一个公开路径、私有路径或Laravel磁盘
  • 调整图像大小，不仅通过在HTML图像标签中定义高度和宽度，而且通过真正调整传递给浏览器的内容
  • 应用模板到图像上，从一处更改所有图像的设置
  • 自动对图像进行缓存
  • 对图像应用完整的干预/image API
  • 从任何地方下载文件，这可能是一个公开路径、私有路径或Laravel磁盘
  • 使用smart-div为div块添加背景图像

典型用例

对于智能图像

提供存储在任何地方的图像，更改图像的大小和外观，而不更改原始源。因此，您可以使用1个图像一次为它们提供服务，例如在概览页面上为灰色，但在详细页面上为全色。

对于智能下载

下载存储在任何地方的文件，这可以是您的存储文件夹、Laravel磁盘或https路径

对于智能div

有时您需要在div块中添加背景图像，这可以通过smart-div实现。您可以对背景图像应用模板。

在YouTube上观看我解释什么是smart

Schermafbeelding 2021-12-12 om 15 26 36

安装

您可以通过composer安装此包

composer require dietercoopman/smart

如果想要使用模板或更改一些设置，可以选择发布配置文件（有关使用模板的高级用法，请参阅）

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

智能图像

完整示例

在这个例子中，图像存储在S3上。我们希望图像全部为灰色，高度相同，但旋转15度。它们被编码为webp，并赋予良好的名称，搜索引擎会喜欢它们，所有这些只需一个智能标签。

overview

Blade组件

Smart为您提供了一个Blade组件，作为普通<img> HTML标签的替代品。您可以传递所有默认HTML属性，如class标签，它们将被传递到渲染的HTML中。

属性

src

使用src指定您的图像源，这可以是一个https路径，或者您的服务器上的位置（如/mnt/images）或Laravel磁盘，以解锁从S3、Dropbox或其他自定义文件系统提供图像的服务。

data-disk

使用此data-disk属性，您告诉smart指定的src可以在哪个Laravel磁盘上找到。

data-src

使用data-src指定浏览器中暴露的源。这就是在渲染的HTML中显示的源，因此您可以向最终用户或搜索引擎公开友好名称。

data-template

使用data-template指定要应用的模板（有关使用模板的高级用法，请参阅）以将预配置的模板应用于您的图像。

示例

基本示例

此示例将提供存储在存储文件夹中的文件

<x-smart-image src="{{ storage_path('smart.png') }}"/>

从Laravel磁盘加载图像

本例演示如何使用带有data-disk属性的Laravel兼容S3磁盘加载图像。

<x-smart-image data-disk="s3" src="logos/mybrand.jpg"/>

调整图像大小

此示例将存储在存储文件夹中的文件提供，并将其调整为400像素（实际文件大小调整！），同时保持宽高比。

<x-smart-image src="{{ storage_path('smart.png') }}" width="400px"/>

更改提供的文件名

默认提供的图像名称是缓存键，如果您想给它一个更友好的名称，可以使用data-src指定。

<x-smart-image src="{{ storage_path('smart.png') }}" data-src="branding.png"/>

使用模板

使用模板，您可以应用一组预定义的设置到图像上。这对于您在多个位置使用图像，例如电子商务网站来说非常方便。

<x-smart-image src="products/product1.jpg" data-template="small" data-disk="s3" data-src="friendly-product-name.jpg"/>

缓存

图像使用intervention/image缓存。默认情况下，该包会生成一个键来存储缓存中的图像。此键将用于构建文件的src，使得浏览器可以缓存图像。此键是随机生成的，但您可以通过data-src覆盖它，以使图像名称更具描述性（见下文）。

cache example

使用模板的高级用法

通过data-template属性，您可以指定图像应使用哪个模板。模板可以在config/smart.php配置文件中配置。

以下是默认配置

<?php

return [
    'image'    => [
        'path'      => 'smart',
        'templates' => [
            'small' => [
                'resize' => [200, null, ['aspectRatio']],
            ],
            'big'   => [
                'resize' => [500, null, ['aspectRatio']],
            ]
        ],
        'file-not-found' => 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAA1JREFUGFdj+P///38ACfsD/QVDRcoAAAAASUVORK5CYII='
    ],
    'download' => [
        'path'         => 'smart/downloads',
        'default-text' => 'download this file'
    ]
];

path键定义了smart的URL前缀，默认为smart，但可以是任何您想要的。

默认定义了两个模板，分别是small和big。在配置中，您可以定义需要应用到图像上的设置。
可能的设置是API中声明的方法名称。
您可以创建任意数量的模板。

例如，如果您想使用intervention/image的resize方法，则定义一个包含数组参数的resize数组，定义为子数组。API中的所有方法都可以使用。以下是一个配置示例和结果：

fullexample

如果找不到指定的源，则返回file-not-found中定义的图像（默认为1x1的png），在这里您可以指定任何图像流或图像路径。

使用intervention/image的完整API

您甚至可以更进一步，通过传递数组来应用intervention/image的完整API。这个示例在一个调整大小的图像上绘制一个矩形。最简单的方法是定义一个新的数组，其中的方法名称是回调的数组键，参数是数组值。然后将此数组作为回调传递给intervention/image方法。

<?php

$rectangle = [
    'background' => ['rgba(255, 255, 255, 0.5)'],
    'border'     => [10, '#CCC']
];

return [
    'image' => [
        'path'      => 'smart',
        'templates' => [
            'rotated' => [
                'resize'    => [null, 500, ['aspectRatio']],
                'rectangle' => [5, 5, 195, 195, $rectangle],
            ]           
        ]
    ]
];

智能下载

智能下载使您能够通过简单的标签下载任何类型的文档。无需编写后端代码来检索文件流并提供服务，一切由smart处理。

Blade组件

智能下载为您提供href标签。您可以传递所有默认的HTML属性，如class标签，它们将被传递到渲染的HTML中。
您可以使用插槽作为链接的视觉表示，默认配置在配置中的default-text参数中。

x-smart-download的属性

src

使用src指定下载文件的源，这可以是https路径，或服务器上的位置（如/mnt/images），或Laravel磁盘，以解锁从S3、Dropbox或其他自定义文件系统提供图像。

data-disk

使用此data-disk属性，您告诉smart指定的src可以在哪个Laravel磁盘上找到。

示例

一个基本示例

此示例允许您下载存储在您的存储路径中的手册。

<x-smart-download src="{{ storage_path('manual.pdf') }}" target="_blank" />

一个带有图像视觉化的高级示例

此示例结合了图像和下载标签，图像通过默认插槽传递，因此您有一个视觉链接。

<x-smart-download src="logo.png" data-disk="s3" target="_blank" />
    <x-smart-image src="logo.png" data-template="small" data-disk="s3" />
</x-smart-download>

一个渲染输出示例

这是上述示例的渲染输出，结合了智能下载和智能图片标签

Schermafbeelding 2021-12-11 om 14 05 07

智能div

使用智能div可以在div上应用背景图片。图片可以存储在任何地方，就像使用智能图片一样。智能div的文档与智能图片的文档相同。唯一不同的是，它会渲染一个应用了背景图片的div。

<x-smart-div src="smart.png" data-src="background.png"></x-smart-div>

这将以以下HTML的形式渲染

<div style='background-image:url("/smart/background.png")'></div>

一些关于使用案例的故事讲述

<h1>Base examples</h1>
<!-- I have a file in a public path -->
<img src="smart.png" /><br />
<!-- ☝ this works, cool ... -->

<h1>Resizing images without smart</h1>
<!-- WITHOUT SMART -->
<!-- I want to make it smaller, without changeing my source -->
<img src="smart.png" width="200px" /><br/>
<!-- ☝ the file size is not changed :-( , it's the same number of KB's  76.4 KBs 
, you might don't care but ... -->

<!-- Ok lets make it some more challenging  -->
<img src="big.png" width="200px" /><br />
<!-- ☝ the file size is not changed :-( , it's the same number of KB's  445 KBs , you might care :-)
assume 25 images on your screen , thats more than 10MB ... -->

<h1>Resizing images with smart</h1>
<!-- WITH SMART -->
<!-- Let's see what smart does with the same use case -->
<x-smart-image src="smart.png" width="200px" data-src="smart.png" /><br />
<!-- ☝ the file size changed :-) , the file size is shrinked => result 12 KBs ... -->

<!-- Let's see what smart does with the same use case for the big image -->
<x-smart-image src="big.png" width="200px" data-src="big-shrinked.png" /><br />
<!-- ☝ the file size changed :-) , the file size is shrinked => result 9.4 KBs ... 
assume 25 images on your screen => 235 KBs , that's about 9.8MB less ... -->

<h1>Changing the look and feel of an image</h1>
<!-- WITHOUT SMART -->
<!-- I want to rotate the image, hmm ...  -->
<img src="smart.png" width="100px" style="transform: rotate(45deg)" /><br />
<!-- ok its rotated , but it's still too big in filesize and meh that css ... -->

<!-- WITH SMART -->
<!-- Let's see what smart does with the same use case -->
<x-smart-image src="smart.png" data-template="rotated" data-src="smart_rotated.png" /><br />
<!-- ☝ the file size changed :-) , the file size is shrinked 6.2 KBs ... -->

<h1>Advanced examples with templates</h1>
<!-- lets go crazy -->
<x-smart-image src="big.png" data-template="crazy" data-src="big-crazy.png" /><br />
<!-- ☝ fun isn't it , without touching the original image -->

<h1>Files that are not serveable by your webbrowser</h1>
<!-- And now the tought part ... not for smart but for the img tag -->

<!-- WITHOUT SMART -->
<!-- I don't want my files in that private public path , I want them on S3 -->
<img src="{{ Storage::disk('s3')->get('smart.png') }}" />
<!-- ☝ this doesn't work ... -->

<!-- WITH SMART -->
<!-- I don't want my files in that public path , I want them on S3 -->
<x-smart-image data-disk="s3" src="another_big.png" data-template="crazy" /><br />
<!-- or in your storage folder -->
<x-smart-image src="{{ storage_path('smart.png') }}" data-template="crazy" />
<!-- hell yeah ! -->

<h1>Downloads with smart</h1>
<!-- WITHOUT SMART -->
<a href="{{ Storage::disk('s3')->get('smart.png') }}" />
<!-- ☝ this doesn't work ... -->

<!-- downloads WITH SMART -->
<!-- Now , our customers might have the ability to download images -->
<x-smart-download data-disk="s3" src="another_big.png" /><br />
<!-- Or, with slots -->
<x-smart-download data-disk="s3" src="another_big.png">Download this photo</x-smart-download><br/>
<!-- Or, event better -->
<x-smart-download data-disk="s3" src="another_big.png">
    <x-smart-image data-disk="s3" src="another_big.png" data-template="crazy" />
</x-smart-download>

resize advanced downloads downloadssmart

更新日志

有关最近更改的更多信息，请参阅更新日志

贡献

有关详细信息，请参阅贡献指南

安全漏洞

有关如何报告安全漏洞，请参阅我们的安全策略

鸣谢

许可证

MIT许可证（MIT）。有关更多信息，请参阅许可证文件