here I am using JCrop as a tool to crop images which will later be used for profile photos.
Previously I tried cropping, for example I wanted to crop an image with a size of 512 x 512. The program ran smoothly, but when I saw the results of the image stored in the image folder, the size was 512 x 256.
How do you keep the height resolution from being cut in half?
Here’s the script, I’m using CodeIgniter 3.
EditUser.php (Controller)
<?php
defined('BASEPATH') OR exit('No direct script access allowed');
class EditUser extends CI_Controller {
function __construct() {
parent::__construct();
$this->load->helper('url');
$this->load->library('image_lib');
}
public function upload_crop() {
if ($_SERVER['REQUEST_METHOD'] === 'POST' && !empty($_FILES['userfile']['name'])) {
$config['upload_path'] = './assets/images/foto_profile_pengguna/';
$config['allowed_types'] = 'jpg|png';
$config['max_size'] = 2048; // 2 MB
$this->load->library('upload', $config);
if ($this->upload->do_upload('userfile')) {
$uploaded_data = $this->upload->data();
$uploaded_image = $uploaded_data['full_path'];
$file_name = $uploaded_data['file_name']; // Dapatkan nama file
// Load gambar
$config['image_library'] = 'gd2';
$config['source_image'] = $uploaded_image;
$config['maintain_ratio'] = FALSE;
$config['width'] = 512; // Setel dimensi sesuai keinginan
$config['height'] = 512;
$this->image_lib->initialize($config);
// Tampilkan halaman cropping dengan mengirimkan data yang diperlukan
$data['uploaded_image'] = base_url('./assets/images/foto_profile_pengguna/' . $uploaded_data['file_name']);
$data['file_name'] = $file_name; // Kirimkan nama file ke view
$this->load->view('upload_crop_view', $data);
} else {
$data['error'] = $this->upload->display_errors();
$this->load->view('upload_crop_view', $data);
}
} else {
$this->load->view('upload_crop_view');
}
}
public function crop() {
$x = $this->input->post('x');
$y = $this->input->post('y');
$w = $this->input->post('w');
$h = $this->input->post('h');
$file_name = $this->input->post('file_name');
$image_path = './assets/images/foto_profile_pengguna/' . $file_name;
$cropped_image_path = './assets/images/foto_profile_pengguna/cropped_' . $file_name;
// Load gambar menggunakan pustaka CodeIgniter
$this->load->library('image_lib');
$config['image_library'] = 'gd2';
$config['source_image'] = $image_path;
$config['width'] = $w;
$config['height'] = $h;
$config['x_axis'] = $x;
$config['y_axis'] = $y;
$this->image_lib->initialize($config);
$this->image_lib->crop();
redirect('EditUser/upload_crop');
}
}
upload_crop_view.php (Views)
<!DOCTYPE html>
<html>
<head>
<title>Upload and Crop Image</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/css/jquery.Jcrop.min.css">
<script src="https://code.jquery.com/jquery-3.7.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-jcrop/0.9.15/js/jquery.Jcrop.min.js"></script>
<script>
$(function() {
var cropBoxWidth = 512;
var cropBoxHeight = 512;
$('#crop-image').Jcrop({
aspectRatio: 1, // Menjaga aspek rasio persegi
setSelect: [0, 0, cropBoxWidth, cropBoxHeight], // Area cropping awal
onSelect: updateCoords
});
});
function updateCoords(c) {
$('#x').val(c.x);
$('#y').val(c.y);
$('#w').val(c.w);
$('#h').val(c.h);
}
</script>
</head>
<body>
<?php if (isset($error)) : ?>
<p style="color: red;"><?php echo $error; ?></p>
<?php endif; ?>
<?php if (isset($uploaded_image)) : ?>
<h2>Upload and Crop Image</h2>
<form action="<?php echo site_url('EditUser/crop'); ?>" method="post">
<img src="<?php echo $uploaded_image; ?>" id="crop-image" />
<input type="text" name="x" id="x">
<input type="text" name="y" id="y">
<input type="text" name="w" id="w">
<input type="text" name="h" id="h">
<input type="text" name="file_name" value="<?php echo $file_name; ?>">
<input type="submit" value="Crop">
</form>
<?php else : ?>
<h2>Upload Image</h2>
<?php echo form_open_multipart('EditUser/upload_crop'); ?>
<input type="file" name="userfile" size="20" />
<br /><br />
<input type="submit" value="Upload and Crop" />
</form>
<?php endif; ?>
</body>
</html>
Hope I can get the solution here, thanks a lot