上传前剪切图片？

Question

我有 Laravel 应用程序，我需要上传图像配置文件，我正在使用Croppie-js ，我需要在上传之前剪切配置文件图像，所以我尝试了这段代码但没有用。

图片以全宽和全高上传！

Laravel 的代码正在查找和工作。

只需要在上传之前调整图像大小。

HTML代码：

<div class="field">
   <label class="label">Profile Image</label>
   <div class="control">
   <input type="file" name="image" id="image_file" class="input" required>
   </div>
  <div id="upload-demo"></div>
</div>

JS代码：

 <script>

    var resize = $('#upload-demo').croppie({
    enableExif: true,
   enableOrientation: true,    
    viewport: { 
       width: 200,
       height: 200,
       type: 'circle'
    },
    boundary: {
      width: 500,
      height: 300
    }
  }); 

   $('#image_file').on('change', function () { 
     var reader = new FileReader();
     reader.onload = function (e) {
      resize.croppie('bind',{
       url: e.target.result
      }).then(function(){
         console.log('jQuery bind complete');
      });
    }
    reader.readAsDataURL(this.files[0]);
   });

</script>

Answer 1

如果您愿意使用其他东西而不是 javascript，我建议您使用Image Intervention包。 这是一个简单的例子：

public function store(Request $request) {
   $image = $request->image; //get your image
   $resizedImage = Image::make($image); //create an instance of Image Intervention
   $residedImage->resize('x', 'y') //Resize (or use any other function) to wanted size.
   $resizedImage->save();

   //Save image to database, or do something else with it. 
   YourModel::create($resizedImage);
}

注意：不要忘记在控制器顶部导入类。

use Intervention\Image\Facades\Image;

更新：

如果您希望用户选择图像的大小，这是简单的解决方案：

在您的 HTML 中添加两个输入字段，用户将在其中输入他想要的大小。

<input type="text" name="width" class="input" required>
<input type="text" name="height" class="input" required>

在您的控制器方法中获取尺寸：

public function store(Request $request) {   
   $image = $request->image; //get your image
   $width = $request->input('width'); //get width
   $height = = $request->input('height'); //get height
   $resizedImage = Image::make($image); //create an instance of Image Intervention
   $residedImage->resize($width, $height) //resize 
   $resizedImage->save();

   //Save image to database, or do something else with it. 
   YourModel::create($resizedImage);  
}

注意：不要忘记验证用户的输入，这样他们就不能提交虚假数据。