Comments (1)
Сразу скажу, что это расширение предусматривает cropping только для уже загруженных файлов, оно не сможет обрезать файл до его загрузки.
Так же для обрезания я использую composer-пакет "yurkinx/yii2-image": "dev-master"
, без него не обойтись.
Если предположить, что в бд у $model есть поле image_name
, где и будет храниться путь к загруженному файлу относительно директории /images/example/
:
<?= $form->field($model, 'image_name')->fileInput(['accept' => 'image/*']) ?>
Original:
<?= Html::img(Yii::$app->request->baseUrl . '/images/example/' . $model->image_name) ?>
<br />
Cropped:
<?= Html::img(Yii::$app->request->baseUrl . '/images/example/cropped_' . $model->image_name, ['id' => 'myImage']) ?>
<br />
<?= Cropper::widget([
'modal' => true,
'cropUrl' => ['cropImage', 'id' => $model->id],
'image' => Yii::$app->request->baseUrl . '/images/example/' . $model->image_name,
'aspectRatio' => 4 / 3,
'pluginOptions' => [
'minCropBoxWidth' => 400, // minimal crop area width
'minCropBoxHeight' => 300, // minimal crop area height
],
// HTML-options for widget container
'options' => [],
// HTML-options for cropper image tag
'imageOptions' => [],
// Additional ajax-options for send crop-request. See jQuery $.ajax() options
'ajaxOptions' => [
'success' => new JsExpression(<<<JS
function(data) {
// data - your JSON response from [[cropUrl]]
$("#myImage").attr("src", data.croppedImageSrc);
}
JS
),
],
]); ?>
После нужно настроить экшен cropUrl, для этого в текущем контроллере добавляем функцию:
public function actionCropImage($id)
{
$request = Yii::$app->request;
$model = ModelClass::find()->where(['id' => $id])->one();
$imagePath = Yii::getAlias('@app/images/example/') . $model->image_name;
$cropImagePath = Yii::getAlias('@app/images/example/') . 'cropped_' . $model->image_name;
$x = $request->get('x');
$y = $request->get('y');
$width = $request->get('width');
$height = $request->get('height');
$rotate = $request->get('rotate');
$yiiImage = Yii::createObject([
'class' => 'yii\image\ImageDriver',
]);
/* @var $image \yii\image\drivers\Image_GD|\yii\image\drivers\Image_Imagick */
$image = $yiiImage->load($imagePath);
$image->crop($width, $height, $x, $y);
$image->rotate($rotate);
$image->save($cropImagePath);
$response = Yii::$app->response;
// if is AJAX request
if ($request->isAjax) {
$response->getHeaders()->set('Vary', 'Accept');
$response->format = Response::FORMAT_JSON;
return [
'status' => 'success',
'croppedImageSrc' => $request->baseUrl . '/images/example/cropped_' . $model->image_name,
];
} else {
return $this->redirect(['update' => $model->id]);
}
}
from yii2-cropper.
Related Issues (4)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from yii2-cropper.