在 ThinkPHP 项目里添加图片尺寸动态裁剪功能

zilu 发布于2019-06-28 18:42 / 2116人阅读

摘要：图片动态裁剪缩放库首先附上项目地址是一个可以帮助你根据指定参数动态的生成图片内容给浏览器的图片操作库，从而实现图片动态裁剪，打水印等，本库对进行了一些友好的包装与扩展，屏蔽了原生库的一些底层抽象从而使得用户可以在项目中更好的添加图片的动

ThinkPHP 图片动态裁剪缩放库

首先附上项目地址： https://github.com/top-think/think-glide

Glide 是一个可以帮助你根据指定参数动态的生成图片内容给浏览器的图片操作库，从而实现
图片动态裁剪，打水印等，本库对 Glide 进行了一些友好的包装与扩展，屏蔽了原生库的一些底层抽象从而使得 ThinkPHP 用户可以在 ThinkPHP 项目中
更好的添加图片的动态裁剪功能。

Installation

执行下面命令安装:

$ composer require slince/think-glide

Usage Quick start

由于从 ThinkPHP 5.1.6 开始添加了中间件的功能，所以在

ThinkPHP 5.1.6 及以上版本使用 middleware 注册：

打开 application/middleware.php 文件（如果不存在创建即可），注册 middleware：

return [
    //...

    SlinceGlideGlideMiddleware::factory([
        "source" => __DIR__ . "/../img",
    ])
];

这种方式比较简单，也是推荐的方式；

ThinkPHP 5.1.0 以上 5.1.6 以下版本：

不支持middleware，所以启用过程要复杂一点，我们用下面方式来妥协：

// 在 /route/route.php 注册下面路由
Route::get("images/:file", "index/handleImageRequest");

//在控制器 index 里创建action
public function handleImageRequest()
{
    $middleware = SlinceGlideGlideMiddleware::factory([
        "source" => App::getRootPath() . "/img",
    ]);
    
    return $middleware(app("request"), function(){
        return app("response");
    });
}

source 是你本地图片文件夹的位置，假设该目录下有图片 user.jpg, 打开浏览器访问下面链接：

http://youdomain.com/images/user.jpg?w=100&h=100

即可得到缩小后的图片。

参数说明

参数名	类型	说明	是否必选
source	string	本地文件夹位置	是
cache	string	缓存文件位置，默认在 runtime/glide 下面	否
cacheTime	string	缓存时间，示例 +2 days, 缓存期间多次请求会自动响应 304	否
signKey	string	安全签名	否
onException	callable	异常处理handler	否
baseUrl	string	路由前缀，匹配到该前缀时中间件开始执行，默认是 /images	否

安全签名

不开启安全签名的情况下用户可以调整query里面的参数自行对图片进行裁剪，如果你不打算这么做的话，你可以通过
signKey 进行校验，

SlinceGlideGlideMiddleware::factory([
    "source" => __DIR__ . "/../img",
    "signKey" => "v-LK4WCdhcfcc%jt*VC2cj%nVpu+xQKvLUA%H86kRVk_4bgG8&CWM#k*"
])

这种情况下用户自行调整参数将会无效；生成安全的URL:

echo app("glide.url_builder")->getUrl("user.jpg", ["w" => 100, "h" => 100]);

//你会得到如下链接：/images/user.jpg?w=100&h=100&s=af3dc18fc6bfb2afb521e587c348b904

异常处理

如果用户访问了一张不存在的图片或者没有进行安全校验，系统会抛出异常，你可以通过 onException 进行替换默认行为：

SlinceGlideGlideMiddleware::factory([
    "source" => __DIR__ . "/../img",
    "signKey" => "v-LK4WCdhcfcc%jt*VC2cj%nVpu+xQKvLUA%H86kRVk_4bgG8&CWM#k*"，
    "onException" => function(Exception $exception, $request, $server){
    
        if ($exception instanceof LeagueGlideSignaturesSignatureException) {
            $response = new Response("签名错误", 403);
        } else {
            $response = new Response(sprintf("你访问的资源 "%s" 不存在", $request->path()), 404);
        }
        
        return $response;
    }
])

注意该闭包必须返回一个 thinkResponse 实例；

Quick reference

不止支持裁剪，glide还支持其它操作，只要传递对应参数即可，参考这里查看支持的参数：

http://glide.thephpleague.com/1.0/api/quick-reference/

Changelog

See CHANGELOG.md

License

See MIT.

idc机房托管专线服务 jsp标签里添加图片在html添加图片图片裁剪图片裁剪比例

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/28570.html

JavaScript中的图片处理与合成(一)

摘要：中的图片处理与合成一引言图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。 JavaScript中的图片处理与合成(一) 引言：图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求，让我在这方面积累...

Charles 2019-08-22 15:01 评论0 收藏0
JavaScript中的图片处理与合成(一)

摘要：中的图片处理与合成一引言图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。 JavaScript中的图片处理与合成(一) 引言：图片处理现在已经成为了我们生活中的刚需，想必大家也经常有这方面的需求。实际前端业务中，也经常会有很多的项目需要用到图片加工和处理。由于过去一段时间公司的业务需求，让我在这方面积累...

浠ラ箍 2019-08-05 18:01 评论0 收藏0
HTML5 本地裁剪图片并上传至服务器（老梗）

摘要：不过我们还需要将图片上传至服务器里。的格式为逗号之前都是一些说明性的文字，我们只需要逗号之后的就行了返回的默认格式就是这时候裁剪后的文件就储存在里了我们可以把它当作是普通文件一样，加入到里，并上传至服务器了。很多情况下用户上传的图片都需要经过裁剪，比如头像啊什么的。但以前实现这类需求都很复杂，往往需要先把图片上传到服务器，然后返回给用户，让用户确定裁剪坐标，发送给服务器，服务器裁剪完...

joyvw 2019-08-02 18:03 评论0 收藏0
JavaScript中的图片处理与合成(二)

摘要：通过这套流程，我们便能添加任意的图片图层并合成图片。下篇文章，我们会继续介绍下文字的合成和几何图片的合成，敬请期待 JavaScript中的图片处理与合成(二) 引言本系列分成以下4个部分: 基础类型图片处理技术之缩放、裁剪与旋转(传送门)；基础类型图片处理技术之图片合成；基础类型图片处理技术之文字合成；算法类型图片处理技术；上篇文章，我们介绍了图片的裁剪/旋转与缩放，接...

hersion 2019-08-22 15:07 评论0 收藏0
一个基于react的图片裁剪组件

摘要：要注意，的属性是，而和，，对应的分别是，，的值设为这样，保存拖拽选择框时的参数，保存裁剪选择框时的参数，为元素，为触发事件时的。开始写了一年多vue，感觉碰到了点瓶颈，学习下react找找感觉。刚好最近使用vue写了个基于cropperJS的图片裁剪的组件，便花费了几个晚上的功夫用react再写一遍。代码地址，demo地址项目是使用create-react-app来开发的，省去了很...

Brenner 2019-08-22 16:26 评论0 收藏0