javascript - 在上传之前剪切图像吗？(Cut image before upload it?)

Question

I have Laravel application, I need to upload the image profile, I'm using Croppie-js , and I need to cut the profile image before upload it so I tried this code but not working.

(我有Laravel应用程序，我需要上传图像配置文件，我使用的是Croppie-js ，并且在上传之前需要剪切配置文件图像，因此我尝试了此代码，但无法正常工作。)

The images upload with full width and height!

(图像将以全宽和全高上传！)

The code of Laravel is finding and work.

(Laravel的代码正在寻找并起作用。)

Just need to resize the image before upload it.

(只需在上传前调整图像大小即可。)

HTML CODE :

(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 CODE:

(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>

  ask by ahmed translate from so

Answer 1

If you're willing to use something else instead of javascript, I could suggest you to use Image Intervention package.

(如果您愿意使用其他语言代替javascript，我建议您使用Image Intervention软件包。)

Here's a simple example:

(这是一个简单的例子：)

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);
}

Note: Don't forget to import the class at the top of your controller.

(注意：不要忘记将类导入控制器的顶部。)

use InterventionImageFacadesImage;

UPDATE:

(更新：)

If you want a user to select the size of your images, here's the simple solution:

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

Add two input fields in your HTML, where user will type in the size he wants.

(在HTML中添加两个输入字段，用户将在其中输入所需大小。)

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

Get the sizes in your controller method:

(在您的控制器方法中获取大小：)

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);  
}

Note: Don't forget to validate user's input, so they cant' submit false data.

(注意：不要忘记验证用户的输入，因此他们不能提交错误的数据。)