README

• Bootstrap >= 4.0.0
• Jquery >= 3.0.0

简介

ImageCropper 是一个用于在Web应用程序中裁剪和操作图像的实用工具。它提供了处理图像上传、裁剪和生成base64编码的图像数据的函数。

安装

composer require stew/image-cropper
php artisan vendor:publish --provider="Stew\ImageCropper\Providers\ImageCropperServiceProvider" --force

HTML结构

• 要使用ImageCropper类，确保您的文档中有以下HTML结构

<link rel="stylesheet" href="/path/image-cropper/image-cropper.css"/>
<script src="/path/image-cropper/cropper/cropper.js"></script>
<script src="/path/image-cropper/image-cropper.js"></script>

<div id="avatar-image"></div> <!-- Use this for avatar cropping -->
<div id="drag-image"></div> <!-- Use this for drag and drop image upload -->

@include('view-crop::include._modal-crop-bs4') <!-- For bootstrap4 -->
@include('view-crop::include._modal-crop-bs5') <!-- For bootstrap5 -->

用法

• 要使用ImageCropper类，用配置对象初始化它

const imageCropper = new ImageCropper();

默认配置选项

• dragTitle（可选，字符串）：显示为拖放区域标题的文本。（默认：'拖放上传'）。

• formSelector（可选，字符串）：要附加隐藏输入字段的表单的选择器。（默认：'form'）。

• isThumbnail（可选，布尔值）：指定是否生成缩略图图像。（默认：false）。

• isOriginalName（可选，布尔值）：指定是否包含原始图像名称。（默认：true）。

• thumbnailSize（可选，对象）：定义缩略图图像的尺寸，作为具有 width 和 height 属性的对象。（默认：{ width: 160, height: 160 }）。

您可以通过在初始化对象中提供这些参数来配置 ImageCropper。例如

const config = {
    dragTitle: 'Click or drag to upload an image',
    formSelector: '#upload-form',
    isThumbnail: true,
    isOriginalName: false,
    thumbnailSize: { width: 120, height: 120 },
};

• 如果您希望向您的Laravel项目添加图像上传功能，您可以使用 Image Uploader 包。

composer require stew/image-uploader