sawastacks/kropify-laravel

Kropify 是一个工具，可以从 Laravel 框架 8 版本及以上集成，旨在为用户提供简单的方式来裁剪他们的个人资料图片和封面图片。

维护者

详细信息

github.com/sawastacks/kropify-laravel

主页

源代码

问题

安装: 19

依赖者: 0

建议者: 0

安全: 0

星标: 4

关注者: 1

分支: 1

公开问题: 0

v2.2.0 2024-08-26 19:13 UTC

Requires

MIT f55bf9bfe33b672121304d3d414ff73d79dd2411

  • Sawa Stacks (sawastacks) <sawastacks.woop@gmail.com>

phplaravelcropcroppingcropperkropifylaravel-kropifyijabocroptoolsawastacks

This package is auto-updated.

Last update: 2024-09-26 19:27:19 UTC

README

'Kropify'

GitHub release GitHub code size in bytes Total Downloads Package License GitHub Org's stars

Kropify

Sawa Stacks 为您提供易于集成的裁剪图像工具，用于用户个人资料图片、封面图片等，可以集成到 Laravel 项目中。

注意： Kropify 不仅可集成到 Laravel 框架，还有另一个可以集成到 CodeIgniter 和 Core PHP 项目的 PHP 版本。

drawing

什么是 Kropify？

Kropify 是一个工具，可以集成到 Laravel 框架、CodeIgniter 框架 和 Core PHP 项目中，旨在为用户提供简单的方式来裁剪他们的个人资料图片和封面。它在其功能中使用了 JQuery 3.x 库作为依赖。这就是为什么需要在当前的 blade 文件中包含 JQuery 库的原因。

要求

安装

此包可以通过 composer require 安装。在安装之前，请确保您正在使用系统中的 PHP >= 7.2。只需在您的 cmd 或终端中运行以下命令即可：

  1. 通过 Composer 安装包

     composer require sawastacks/kropify-laravel

    如果您的 Laravel 框架是 8.x 或以上版本，此包将自动注册其服务提供者。此外，如果之前未安装 Image Intervention 包，此包将自动将 Image Intervention 包安装到您的 Laravel 项目中。

  2. 可选：在安装 Kropify 后，打开您的 Laravel 配置文件 config/app.php 并添加以下行。

    在 $providers 数组中，添加此包的服务提供者。

      SawaStacks\Utils\Library\KropifyServiceProvider::class,

  3. 在安装 Kropify 包后，您需要通过在终端中运行以下命令将包的 css 和 js 压缩文件发布到 Laravel 公共文件夹中：

     php artisan vendor:publish --tag=kropify-assets

更新包

当发布新的 Kropify 版本并尝试将当前包更新到最新版本时，您需要使用 composer update 命令。

 composer update sawastacks/kropify-laravel

当不使用上述命令更新包时，请使用以下命令来删除当前包版本并安装新版本：

composer remove sawastacks/kropify-laravel && composer require sawastacks/kropify-laravel

在更新 Kropify 包后，您还需要通过在终端中运行以下命令来更新其资产（css 和 js 压缩文件）：

 php artisan vendor:publish --tag=kropify-assets --force

对于 Kropify 指令，您需要运行此命令以立即在视图中看到更改。

 php artisan view:clear

最后，运行以下命令以自动加载包文件是必要的。

composer dump-autoload

用法

此包使用 css 和 js 压缩文件，因此您需要首先在 blade 文件中包含此包的资产。在 blade 文件的 <head> 标签内放置以下指令以在页面上包含 Kropify css 文件。

<html>
 <head>
 <title>Page title</title>
  <meta name="csrf-token" content="{{ csrf_token() }}">
    @kropifyStyles 
   ......
   ...
 </head>

注意： 不要忘记在包含 Kropify 资产的每个 blade 文件中添加 CSRF meta 标签，如上述示例所示。

对于 Kropify Js 文件，您需要在包含 jQuery 后，在 <body> 标签内添加以下指令或助手，但在关闭 </body> 标签之前，如以下示例所示。

  ..........
   .....
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
   @kropifyScripts
 </body>
</html>

包初始化

假设您在表单中有一个用于用户头像的输入文件

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Kropify Package Creation</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    @kropifyStyles 
    <style>
      *{ box-sizing: border-box; padding: 0; margin: 0;}
       body{ font-family: serif;  width: 100%; height: 100%; }
       .box{ display: flex;justify-content: center;align-items: center;flex-direction: column; margin-top: 20px; }
        .previewElement{ display: block;width: 120px;height: 120px;background: #ddd; }
    </style>
</head>
<body>
  <div class="box">
    <h4>Kropify for Laravel</h4>
    <div class="previewElement"></div>
      <div class="file-box">
        <label>User profile</label>
        <input type="file" id="avatar" name="avatar">
      </div>
  </div>
      
  ........
  ..........
  ...........
   <script src="/jquery-3.0.0.min.js"></script>
   @kropifyScripts
 
</body>
</html>

路由

Route::post('/crop',[TestController::class,'cropHandler'])->name('crop-handler');

当您想在该特定输入文件上启动 Kropify 时，您将使用以下脚本。

  <script>
    $('input#avatar').Kropify({
        preview:'.previewElement',
        viewMode:1,
        aspectRatio:1,
        cancelButtonText:'Cancel',
        resetButtonText:'Reset',
        cropButtonText:'Crop & update',
        processURL:'{{ route("crop-handler") }}',
        maxSize:2097152,
        showLoader:true,
        success:function(data){
         // console.log(data);
         // console.log(data.status); //Kropify status
         // console.log(data.message); //Kropify message
         // console.log(data.image.getName); //Get cropped image name
         // console.log(data.image.getSize); //Get cropped image size
         // console.log(data.image.getWidth); //Get cropped image width
         // console.log(data.image.getHeight); //Get cropped image height
          },
          errors:function(error, text){
             console.log(text);
          },
        });
    </script>

选项

错误回调

此回调有两个参数，error 和 text

 errors:function(error, text){
    console.log(text);
 }

在控制器中

要将 Kropify 类包含在控制器中非常简单。只需在您的控制器上导入以下行。

 use SawaStacks\Utils\Library\Kropify;

要上传裁剪后的图片，您将在方法内部使用以下行

 // Image can be uploaded to public or storage path
 $path = 'uploads/'; //option 1
 $path = storage_path('app/public/uploads/'); //option 2
 $path = public_path('uploads/'); //option 3

//if you did not define name attribute on input file tag, the default name attribute value is "image". eg: $file = $request->file('image');
 $file = $request->file('avatar'); 

//Upload cropped image options
 $upload = Kropify::getFile($file)->save($path); //This will give us random image name "5678cKs374hxdu5438vhsk83.png"
 $upload = Kropify::getFile($file,'avatar')->save($path); //This will geive us image name "avatar.png"
 $upload = Kropify::getFile($file,'avatar.jpg')->save($path); //This will geive us image name "avatar.jpg"
 $upload = Kropify::getFile($file,'avatar.dng')->save($path); //When you make a mistake on extension. This will give us image name "avatar.dng.png"
 $upload = Kropify::getFile($file,'avatar.png')->maxWoH(712)->save($path); //This will resize cropped image width or height to `712`

 //Return json
 return response()->json(['status'=>"OK",'message'=>'Your profile picture has been.'], 201);

上述行将把裁剪后的图片上传到指定的路径。裁剪后的图片可以上传到 Laravel 的 public 文件夹或 storage 文件夹。链中的重要函数是 maxWoH()。此函数将限制上传图片的最大宽度和高度尺寸（以 px 为单位）。如果您不需要压缩和调整裁剪后的图片大小，请勿将 maxWoH() 添加到 Kropify 上传函数链中。请确保您的服务器已启用 extension=gd 扩展。

获取裁剪/上传的图片详情

当裁剪图片上传成功后，您可以获取上传图片的信息，如名称、大小、宽度和高度。当您需要将它们存储到数据库中时，可以使用这些详细信息。以下是获取上传图片详情的示例

$path = 'uploads/';
$file = $request->file('user_avatar');
$upload = Kropify::getFile($file,'avatar.png')->maxWoH(710)->save($path);

//Get All details
$infos = Kropify::getInfo(); //option 1 
$infos = $upload->getInfo(); //option 2 

//According to the above options, you can get individual image info as follow:
$image_name = $infos->getName; // IMG_XH56.jpg
$image_size = $infos->getSize; // 13094
$image_width = $infos->getWidth; // 710
$image_height = $infos->getHeigth; // 710

//You can also get individual image name, size, width and height after image uploaded without first getting all info as follow:

$image_name = $upload->getName(); //option 1
$image_name = Kropify::getName(); //option 2

$image_size = $upload->getSize(); //option 1
$image_size = Kropify::getSize(); //option 2

$image_width = $upload->getWidth(); //option 1
$image_width = Kropify::getWidth(); //option 2

$image_height = $upload->getHeigth(); //option 1
$image_height = Kropify::getHeigth(); //option 2


/**
 * According to the above guidance, use the following examples 
 * to save cropped image data into database.
 */

 $user = new User();
 $user->profile = $image_name; //IMG_USER_982.jpg
 $user->save();

 //Return json data
 return response()->json([
   'status'=>"OK",
   'message'=>'Your profile picture has been successfully updated.',
   'imageInfo'=>$infos], 
   201);

不支持

1. 目前，使用 Laravel Livewire 上传裁剪图片不受支持。此包仍在开发中，一旦在 Laravel Livewire 中提供裁剪图片上传功能，我们将通知您。您也无法将图片上传到 AWS Amazon S3。

2. 此包仍在开发中，这就是为什么您不能在单页面上对此 jQuery 脚本部分创建两个或更多实例。


版权和许可证

此包由 Sawa Stacks (sawastacks) 编写，并按照 MIT 许可证 发布。

版权 (c) 2023 - Sawa Stacks