<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Strait"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <div class="container" style="font-family: 'Strait', sans-serif; margin-top: 30px;"> <div class="row"> <h2 class="text-center">Resim URL'si Önizleme</h2> <h4 class="text-center" id="sonuc">URL Yapıştırın veya Yazın</h4> <hr style="width:50%"> <div class="form-group row"> <div class="col-xs-10"> <input type="text" class="form-control input-lg" id="resimUrl" placeholder="https://www.adres.com/resim.jpg"> </div> <div class="col-xs-2"> <button class="btn btn-danger btn-lg btn-block" id="pasteBtn1"><span class="glyphicon glyphicon-paste"></span> Yapıştır</button> </div> </div> <div class="label label-default" id="alert-message">URL'yi girin ve resmi aşağıda önizleyin.</div> <img id="img-area" class="thumbnail" style="margin-top:20px" alt="Resim Önizleme Alanı" src="https://cdn1.ntv.com.tr/gorsel/ZLEPpp4pa06sFdNX2uJ63A.jpg?width=1200&ampmode=crop&ampscale=both" width="100%" /> </div> </div>

$(document).ready(function() { const defaultImg = "https://cdn1.ntv.com.tr/gorsel/ZLEPpp4pa06sFdNX2uJ63A.jpg?width=1200&ampmode=crop&ampscale=both"; // URL'yi kontrol edip önizleme yapar function previewImage(url) { if (!url.startsWith('http://') && !url.startsWith('https://')) { $('#alert-message').removeClass().addClass('label label-danger').text('Lütfen geçerli bir URL (http/https) girin.'); $('#img-area').attr('src', defaultImg); $('#sonuc').text('Geçersiz URL Formatı'); return; } // Durum mesajı $('#alert-message').removeClass().addClass('label label-default').text('Resim yükleniyor...'); // Yeni <img> oluştur (önbellek hatalarını önlemek için) const img = new Image(); img.onload = function() { $('#img-area').attr('src', url); $('#alert-message').removeClass().addClass('label label-success').text('Resim başarıyla yüklendi.'); $('#sonuc').text('Önizlenen URL: ' + url); }; img.onerror = function() { $('#alert-message').removeClass().addClass('label label-danger').text('HATA: Resim yüklenemedi veya URL hatalı.'); $('#img-area').attr('src', defaultImg); $('#sonuc').text('URL Hatalı'); }; // Resim yükleme başlat img.src = url; } // INPUT değiştiğinde $('#resimUrl').on('input change', function() { const url = $(this).val().trim(); if (url) { previewImage(url); } else { $('#alert-message').removeClass().addClass('label label-default').text('URL\'yi girin ve resmi aşağıda önizleyin.'); $('#img-area').attr('src', defaultImg); $('#sonuc').text('URL Yapıştırın veya Yazın'); } }); // YAPIŞTIR butonu $('#pasteBtn1').click(function() { if (navigator.clipboard && navigator.clipboard.readText) { navigator.clipboard.readText().then(text => { const temizUrl = text.trim(); $('#resimUrl').val(temizUrl); previewImage(temizUrl); }).catch(err => { console.warn('Clipboard API başarısız:', err); const manuel = prompt("Panodan okuma başarısız. Lütfen URL'yi buraya yapıştırın:"); if (manuel) { $('#resimUrl').val(manuel.trim()); previewImage(manuel.trim()); } else { $('#alert-message').removeClass().addClass('label label-danger').text('Yapıştırma iptal edildi.'); } }); } else { const manuel = prompt("Tarayıcı desteklemiyor. Lütfen URL'yi buraya yapıştırın:"); if (manuel) { $('#resimUrl').val(manuel.trim()); previewImage(manuel.trim()); } } }); });