README

安装

composer require everlutionsk/file-jet-bundle

启用软件包

// app/AppKernel.php
public function registerBundles()
{
    return array(
        // ...
        new Everlution\FileJetBundle\EverlutionFileJetBundle()
    );
}

配置软件包

以下配置代码片段说明了如何配置软件包。

# app/config/config.yml
everlution_file_jet:
  storages:
    - id: <STORAGE_ID>
      api_key: <API_KEY>
      name: <CUSTOM_LOCAL_NAME>
      public_url: <PUBLIC_URL> # can be obtained at filejet.io

清除软件包缓存

当您遇到可能与持久缓存相关的问题时，请尝试运行以下命令来删除它

bin/console doctrine:cache:clear everlution.file.cache

用法

请参阅示例目录。

图像变异

使用

{{ file_url(file, '<MUTATION>') }} 在视图中，其中 file 是 Everlution\FileJetBundle\Entity\File 的实现，第二个参数是文件变异。

变异示例

调整大小： sz_1000x1000_100_100 => 大小 = 1000x1000，偏移 = 100x100

裁剪： c_1000x1000_100_100

相对裁剪： c_0.4x0.89_0.1_0.1 => 与裁剪相同，但大小和偏移是百分比。

填充图像： fill_200x200 => 您可以拥有较小的图像并希望将其填充到特定大小

位置： pos_center => 与 fill 一起使用 - 较小图像在较大填充图像中的位置（中心 + 方向例如西北等）

背景： bg_white => 与 fill 一起使用 - 填充的背景颜色（透明待实现）

旋转： rot_90 => 旋转 90，180，270 度

基本上，"_" 之前的字符串表示操作，"_" 之后的字符串表示参数。参数类似于 ImageMagick 的 geometry。

变异可以像 "sz_1000x1000,c_100x100" 一样链接。

ZoomCrop - sz_325x245>,bg_white,pos_center,fill_325x245 - sz_XxY> 表示它只会缩小图片（不会放大），bg_white - 添加白色背景（《查看颜色名称》），pos_center - 将图像居中（西北，北，东北，西，中心，东，西南，南，东南），fill_XxY - 将图像填充到指定的尺寸。

如何

构造裁剪变异

// Create cropper: https://fengyuanchen.github.io/cropperjs/
var cropper = new Cropper(element, {
      checkCrossOrigin: false,
      zoomable: false,
      aspectRatio: 1,
      responsive: true,
      viewMode: 2
    });

// Construct mutation
var cropData = cropper.getData(true);
var canvasData = cropper.getCanvasData();

var width = (cropData.width / canvasData.naturalWidth).toFixed(4);
var height = (cropData.height / canvasData.naturalHeight).toFixed(4);
var x = (cropData.x / canvasData.naturalWidth).toFixed(4);
var y = (cropData.y / canvasData.naturalHeight).toFixed(4);

var mutation = 'c_' + width + 'x' + height + '_' + x + '_' + y;

使用可变宽高比构造高级裁剪变异

允许使用自定义宽高比裁剪图像。结果将通过空格填充以匹配所需的宽高比（2.5）。

// Create cropper: https://fengyuanchen.github.io/cropperjs/
const cropper = new Cropper(element, {
    checkCrossOrigin: false,
    zoomable: false,
    responsive: true,
    viewMode: 2
  });
  
// Construct mutation
const mutation = crop(2.5);
   
function crop(requiredRatio: number): string {
  const cropData = cropper.getData(true);
  const canvasData = cropper.getCanvasData();

  const mutations = [
    toCropMutation(cropData, canvasData),
    ...toFillMutation(cropData, requiredRatio)
  ];

  return mutations.join(',');
}

function toCropMutation(cropData, canvasData): string {
  const width = (cropData.width / canvasData.naturalWidth).toFixed(4);
  const height = (cropData.height / canvasData.naturalHeight).toFixed(4);
  const x = (cropData.x / canvasData.naturalWidth).toFixed(4);
  const y = (cropData.y / canvasData.naturalHeight).toFixed(4);

  return 'c_' + width + 'x' + height + '_' + x + '_' + y;
}

function *toFillMutation(cropData, requiredRatio: number): IterableIterator<string> {
  const currentRatio = cropData.width / cropData.height;

  if (requiredRatio !== currentRatio) {
    yield 'pos_center';
  }

  if (requiredRatio > currentRatio) {
    // Adds left and right padding
    yield 'fill_' + (cropData.height * requiredRatio / cropData.width).toFixed(4) + 'x1.0';
  } else if (requiredRatio < currentRatio) {
    // Adds top and bottom padding
    yield 'fill_1.0x' + (cropData.width / requiredRatio / cropData.height).toFixed(4);
  }
}