README

imgAreaSelect jQuery 插件的简单封装

安装

安装此扩展的首选方式是通过 Composer.

运行以下命令之一

php composer.phar require --prefer-dist cozumel/yii2-image-cropper "*"

或在您的 composer.json 文件的 require 部分添加以下内容

"cozumel/yii2-image-cropper": "*"

使用方法

扩展安装后，您只需在代码中简单使用即可

<?= \cozumel\cropper\ImageCropper::widget(); ?>

示例

视图文件

<?= \cozumel\cropper\ImageCropper::widget(['id' => 'user_profile_photo']); ?>

其中 user_profile_photo 是要使用的图片的 ID。

视图文件中的 HTML

您将裁剪的主要图片

<img width="<?= $width; ?>" height="<?= $height; ?>" max-width="<?=$max_width;?>" class="border" id="user_profile_photo" alt="<?=alt_text;?>" src="<?= image_source; ?>">

预览图片： (这里的 ID 是固定的，75px 必须指定，但可以更改)

<div style="display:none;" id="js_photo_preview">
  <strong>Preview:</strong>
    <div class="p_2">
      <div id="js_profile_photo_preview_container" style="position:relative; overflow:hidden; width:75px; height:75px; border:1px #000 solid;">
        <img width="<?= $width; ?>" height="<?= $height; ?>" class="border" id="js_profile_photo_preview" alt="<?=$alt_text;?>" src="<?= $image_source; ?>" style="">
      </div>		
  </div>
</div>

将信息发送到您的控制器的表单

<?php
$form = ActiveForm::begin(['action' => Yii::$app->urlManager->createUrl(['your/url/here']), 'options' => ['id' => 'crop_form'],
]);
?>
<div><input type="hidden" id="x1" value="" name="x1"></div>
<div><input type="hidden" id="y1" value="" name="y1"></div>
<div><input type="hidden" id="x2" value="" name="x2"></div>
<div><input type="hidden" id="y2" value="" name="y2"></div>
<div><input type="hidden" id="w" value="" name="w"></div>
<div><input type="hidden" id="h" value="" name="h"></div>
<div><input type="hidden" value="<?= $width; ?>" name="image_width"></div>
<div><input type="hidden" value="<?= $height; ?>" name="image_height"></div>				
<div style="margin-top:10px;">
<input type="submit" class="button" id="js_save_profile_photo" value="Save Avatar">
</div>

<?php ActiveForm::end(); ?>

提交表单的 JavaScript

$(document).ready(function () {

    $(document.body).on('submit', '#crop_form', function (e) {

        var frm = $(this); //just sent text

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            dataType: 'json',
            data: frm.serialize(),
            success: function (data) {

                if (data) {

                   //do something
                }
            },
        });
        return false;
    });


});

您的控制器函数

$request = Yii::$app->request;

$x1 = $request->post('x1');
$x2 = $request->post('x2');
$y1 = $request->post('y1');
$y2 = $request->post('y2');

$h = $request->post('h');
$w = $request->post('w');

$image_height = $request->post('image_height');
$image_width = $request->post('image_width');

if (empty($w)) {
  //nothing selected
  return;
}
$image = imagecreatefromjpeg($image_source);

$width = imagesx($image);
$height = imagesy($image);

$resized_width = ((int) $x2) - ((int) $x1);
$resized_height = ((int) $y2) - ((int) $y1);

 $resized_image = imagecreatetruecolor($resized_width, $resized_height);
 imagecopyresampled($resized_image, $image, 0, 0, (int) $x1, (int) $y1, $width, $height, $width, $height);
 imagejpeg($resized_image, $image_source);