sa-was/kropify-codeigniter

Codeigniter 的图片裁剪库

维护者

详细信息

github.com/sawastacks/kropify-codeigniter

主页

源代码

问题

安装: 6

依赖: 0

建议者: 0

安全: 0

星级: 0

关注者: 1

分支: 0

开放性问题: 0

v1.1.9 2024-09-01 12:24 UTC

Requires

  • php: ^7.2 || ^8.0

MIT 9418545b55015300ef08d58c7792b4c74e8a9103

codeignitercropcroppercodeigniter4CI4kropify

This package is auto-updated.

Last update: 2024-10-01 12:36:34 UTC

README

'Kropify'

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

Kropify

Sawa Stacks 为您带来了易于集成的图片裁剪工具，适用于用户头像、封面图片等，可集成到 Codeigniter 项目中。

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

drawing

什么是 Kropify？

Kropify 是一个可以集成到 CodeIgniter 框架 项目中的工具，用于为用户提供轻松裁剪其个人资料图片和封面图片的方式。它依赖 JQuery 3.x 库。这就是为什么在当前视图文件中包含 JQuery 库很重要的原因。

要求

安装

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

  1. 通过 Composer 安装包

     composer require sawastacks/kropify-codeigniter

  2. 在安装 Kropify 包后，您需要通过在终端中运行以下命令将它的 CSS 和 JS 最小化文件发布到 CodeIgniter 公共文件夹中：

     php spark publish:kropify-assets

更新包

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

 composer update sawastacks/kropify-codeigniter

在更新 Kropify 包后，您还需要通过在终端中运行以下命令来更新它的资产（CSS 和 JS 最小化文件）：

 php spark publish:kropify-assets

使用方法

此包使用 CSS 和 JS 最小化文件，因此您首先需要在您的视图 php 文件中包含此包的资产。在您的 blade 文件的 <head> 标签内部调用以下辅助函数以在页面中包含 Kropify CSS 文件。

<html>
 <head>
 <title>Page title</title>
  <?= kropifyStyles() ?> 
   ......
   ...
 </head>

对于 Kropify Js 文件，您需要在 <body> 标签内部调用以下辅助函数，但要在包含 JQuery 之后，在关闭 </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>Page Title</title>
    <?= 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; }
        .previewElement img{ width: 100%; height:auto; }
    </style>
</head>
<body>
  <div class="box">
    <h4>Kropify for Laravel</h4>
    <div class="previewElement">
       <img src="" alt="" class="preview" data-kropify-default="...addCurrentImagePathIfExists.png">
    </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>

路由

$routes->post('/crop', 'TestController::cropImage',['as'=>'crop']);

当您想初始化该特定输入文件的 Kropify 时，您将使用以下脚本。

  <script>
    $('input#avatar').kropify({
        preview:'.preview',
        viewMode:1,
        aspectRatio:1,
        cancelButtonText:'Cancel',
        resetButtonText:'Reset',
        cropButtonText:'Crop & update',
        processURL:'<?= route_to("crop") ?>',
        maxSize:2097152, //2M
        showLoader:true,
        animationClass:'headShake', //headShake, bounceIn, pulse
        success:function(data){
            console.log(data);
        },
        errors:function(error, text){
            console.log(text);
        },
     });
    </script>

选项

错误回调

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

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

在控制器中

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

 use SawaStacks\CodeIgniter\Kropify;

要上传裁剪的图片，您将在方法中使用以下行。

$request = \Config\Services::request();

 // Define path of image destination
 $path = 'images/users/';

//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 examples
 $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(411)->save($path); //This will resize cropped image width or height to `411`

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

 echo json_encode(['status'=>"OK",'message'=>'Your profile picture has been.']);

上面的行将在指定的路径上传裁剪的图片。裁剪的图片将上传到 CodeIgniter 的 public 文件夹中。链中的非常重要的是 maxWoH() 函数。此函数将限制上传图片的最大尺寸（宽度和高度）以像素为单位。如果您不需要压缩和调整裁剪图片的大小，请勿将 maxWoH() 添加到 Kropify 上传函数链中。

获取裁剪/上传图片的详细信息

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

$request = \Config\Services::request();
$path = 'images/users/';
$file = $request->file('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->getHeight; // 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.
 */

 $student = new Student();
 $student->insert([
   'name'=>'John Doe',
   'picture'=>$infos->getName, //IMG_USER_982.jpg
 ]);

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

不支持

此软件包仍在开发中，这就是为什么您不能在单个页面上创建此 jQuery 插件的两个实例。


版权和许可证

此代码由 Sawa Stacks (sawastacks) 编写，并遵照 MIT 许可证 发布。

版权所有 (c) 2024 - Sawa Stacks