Laravel uygulamasında bir resmi kırptıktan sonra yüklemek istiyorsanız, cropper js adında güzel bir kütüphane var. cropper js kullanarak, laravel uygulamasına yüklemeden önce görüntüyü kırpabiliriz. Bu eğitimde, cropper js eklentisi ile laravel’e yüklemeden önce bir resmi nasıl kırpacağınızı göstereceğim.
Bir Resim modeli oluşturacağım ve ajax isteğini kullanarak kırpılmış resmi bu tabloya kaydedeceğim. Bir kullanıcı dosya seç düğmesine tıkladığında, seçilen resimle bir modal açacağız. Daha sonra kullanıcı görüntüyü istediği oranda kırpacaktır. En son laravel 10 sürümünü kullanacağım, ancak bu kod laravel 5’ten laravel 10’a kadar tüm laravel sürümleri için çalışacaktır.
Cropper js’nin görüntüleri kırpmak için güzel ve çok hafif bir javascript kütüphanesi olduğunu biliyorsunuz. Bu dersten, cropper js ile nasıl başa çıkacağınızı bu dersten mükemmel bir şekilde öğreneceksiniz. Cropper js görüntüyü base64’e dönüştürür ve biz bunu kontrolörden bir görüntü olarak dönüştüreceğiz ve daha sonra bu dönüştürülmüş görüntüyü kaydedeceğiz.
Bu laravel 10 Resmi kırpma ve yükleme eğitiminin önizlemesini aşağıda görebilirsiniz:
1. Adım: Laravel’i Kurun
Her şeyden önce, aşağıdaki komutu kullanarak yeni bir Laravel sürümü yüklenmesi gerekiyor, bu yüzden terminalinizi açın ve aşağıdaki komutu çalıştırın:
composer create-project laravel/laravel example-appAdım 2: Migration ve Model Oluşturun
Burada bir veritabanı için migration oluşturmamız gerekiyor ve ayrıca bir model oluşturacağız.
php artisan make:migration create_media_tableMigration:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('media', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('media');
}
};
php artisan migrateşimdi aşağıdaki komutu kullanarak Medya modelini oluşturacağız:
php artisan make:model MediaApp/Models/Media.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Media extends Model
{
use HasFactory;
protected $fillable = [
'name'
];
}
Adım 3: Controller Oluşturun
Bu adımda, resmi saklamak için yeni CropImageController oluşturacağız. bu denetleyiciye index() ve store() adlı iki yöntem ekleyeceğiz. aşağıdaki komutla yeni controller oluşturalım.
php artisan make:controller CropImageControllerDaha sonra, aşağıdaki kodu bu dosyaya güncelleyelim.
Public klasöründe uploads klasörünün izinli olduğundan emin olun. resmi bu klasörde saklayacağız.
app/Http/Controllers/CropImageController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\View\View;
use Illuminate\Http\RedirectResponse;
use App\Models\Media;
class CropImageController extends Controller
{
/**
* Show the application dashboard.
*
* @return \Illuminate\Http\Response
*/
public function index(): View
{
return view('cropImage');
}
/**
* Show the application dashboard
*
* @return \Illuminate\Http\Response
*/
public function store(Request $request): RedirectResponse
{
$validatedData = $request->validate([
'image_base64' => 'required',
]);
$input['name'] = $this->storeBase64($request->image_base64);
Media::create($input);
return back()->with('success', 'Image uploaded successfully.');
}
/**
* Write code on Method
*
* @return response()
*/
private function storeBase64($imageBase64)
{
list($type, $imageBase64) = explode(';', $imageBase64);
list(, $imageBase64) = explode(',', $imageBase64);
$imageBase64 = base64_decode($imageBase64);
$imageName= time().'.png';
$path = public_path() . "/uploads/" . $imageName;
file_put_contents($path, $imageBase64);
return $imageName;
}
}
Adım 4: Rotaları Oluşturun
Ayrıca, routes/web.php dosyasını açın ve görüntüyü çağırmak ve saklamak için GET ve POST isteklerini yönetecek rotaları ekleyin.
routes/web.php
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\CropImageController;
/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/
Route::get('crop-image-upload', [CropImageController::class, 'index']);
Route::post('crop-image-upload', [CropImageController::class, 'store'])->name('crop.image.upload.store');
Adım 5: Blade Dosyası Oluşturun
şimdi burada cropImage.blade.php dosyasını oluşturacağız ve burada görüntüyü kırpmak için cropper.js ile bootstrap basit formu oluşturacağız.
Öyleyse, aşağıdaki dosyayı oluşturalım:
resources/views/cropImage.blade.php
<!DOCTYPE html>
<html>
<head>
<title>Laravel Crop Image Before Upload Example - Bilisim34.com</title>
<meta name="_token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.6/cropper.js"></script>
</head>
<style>
body{
background: #f7fbf8;
}
h1{
font-weight: bold;
font-size:23px;
}
img {
display: block;
max-width: 100%;
}
.preview {
text-align: center;
overflow: hidden;
width: 160px;
height: 160px;
margin: 10px;
border: 1px solid red;
}
input{
margin-top:40px;
}
.section{
margin-top:150px;
background:#fff;
padding:50px 30px;
}
.modal-lg{
max-width: 1000px !important;
}
</style>
<body>
<div class="container">
<div class="row">
<div class="col-md-8 offset-md-2 section text-center">
<h1>Laravel Crop Image Before Upload Example - Bilisim34.com</h1>
<form action="{{ route('crop.image.upload.store') }}" method="POST">
@csrf
<input type="file" name="image" class="image">
<input type="hidden" name="image_base64">
<img src="" style="width: 200px;display: none;" class="show-image">
<br/>
<button class="btn btn-success">Gönder</button>
</form>
</div>
</div>
</div>
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalLabel">Bilisim34.com Laravel 10 Crop Image Before Upload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Kapat">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="img-container">
<div class="row">
<div class="col-md-8">
<img id="image" src="https://www.bilisim34.com/wp-content/uploads/2023/08/crop-bilisim34-1-1.jpg">
</div>
<div class="col-md-4">
<div class="preview"></div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">İptal</button>
<button type="button" class="btn btn-primary" id="crop">Resmi Kırp</button>
</div>
</div>
</div>
</div>
<script>
var $modal = $('#modal');
var image = document.getElementById('image');
var cropper;
/*------------------------------------------
--------------------------------------------
Image Change Event
--------------------------------------------
--------------------------------------------*/
$("body").on("change", ".image", function(e){
var files = e.target.files;
var done = function (url) {
image.src = url;
$modal.modal('show');
};
var reader;
var file;
var url;
if (files && files.length > 0) {
file = files[0];
if (URL) {
done(URL.createObjectURL(file));
} else if (FileReader) {
reader = new FileReader();
reader.onload = function (e) {
done(reader.result);
};
reader.readAsDataURL(file);
}
}
});
/*------------------------------------------
--------------------------------------------
Show Model Event
--------------------------------------------
--------------------------------------------*/
$modal.on('shown.bs.modal', function () {
cropper = new Cropper(image, {
aspectRatio: 1,
viewMode: 3,
preview: '.preview'
});
}).on('hidden.bs.modal', function () {
cropper.destroy();
cropper = null;
});
/*------------------------------------------
--------------------------------------------
Crop Button Click Event
--------------------------------------------
--------------------------------------------*/
$("#crop").click(function(){
canvas = cropper.getCroppedCanvas({
width: 160,
height: 160,
});
canvas.toBlob(function(blob) {
url = URL.createObjectURL(blob);
var reader = new FileReader();
reader.readAsDataURL(blob);
reader.onloadend = function() {
var base64data = reader.result;
$("input[name='image_base64']").val(base64data);
$(".show-image").show();
$(".show-image").attr("src",base64data);
$("#modal").modal('toggle');
}
});
});
</script>
</body>
</html>
Laravel Uygulamasını Çalıştırın:
Gerekli tüm adımlar tamamlandı, şimdi Laravel uygulamasını çalıştırmak için aşağıda verilen komutu yazmanız ve enter tuşuna basmanız gerekiyor:
php artisan serveŞimdi, web tarayıcınıza gidin, verilen URL’yi yazın ve uygulama çıktısını görüntüleyin:
http://localhost:8000/crop-image-uploadSonuç:
