• 27-03-2021, 01:29:36
    #1
    Merhaba arkadaşlar;

    Aklımda bir fikir var ama yapılabilirliğini bilmiyorum. İhtiyacım olan şey aslında bir online fotoğraf görüntüleyicisi yapmak. Ama şunu istiyorum, mümkün mü bilmiyorum;

    1) Siteye gelen kullanıcı sürükle bırak veya bir buton yardımıyla site sayfası üzerine bir resim bırakacak.
    2) Resim 3 farklı ölçüde sağı solu kırpılmış şekilde kullanıcıya yansıtılacak.

    2.adımı yapabilirim, 1.adım için çözüm bulabilirsem . Daha evvel yaptığım çalışmalar devamlı görselleri sunucuya upload ediyordum ama istediğim şey o değil. Benim sunucuma hiçbir kaydın yapılmasını istemiyorum. Kullanıcı sadece tarayıcı üzerinden işlemini yapabilsin.

    Bilmiyorum anlatabildim mi? Şimdiden teşekkür ederim.
  • Kabul Edilen Cevap
    • Hocam bir projemde benzer bir kod kullanmışım. input[type=file] olan girdiye dosya seçildiğinde js fonksiyon çalışıyor ve görüntüyo okuyarak bir div'e background olarak gönderiyor. Kullandığım kısmı aşağıya bırakıyorum umarım işinize yarar.
      Not: Örnek kodda input okuma ve background ayarlama işlemlerinde jQuery kullanılıyor.

      function readURL(input){
          if (input.files && input.files[0]) {
              var reader = new FileReader();
              reader.onload = function (e) {
                  $('#gorselonizleme').css({'background-image':'url(' + e.target.result + ')'});
                  // div#gorselonizleme background olarak gönder
              }
              reader.readAsDataURL(input.files[0]);
          }
      }
      //<input type="file" name="resim" id="resimsec">
      $("#resimsec").change(function () {
          readURL(this);
      });
  • 27-03-2021, 01:36:09
    #2
    emreozden adlı üyeden alıntı: mesajı görüntüle
    Merhaba arkadaşlar;

    Aklımda bir fikir var ama yapılabilirliğini bilmiyorum. İhtiyacım olan şey aslında bir online fotoğraf görüntüleyicisi yapmak. Ama şunu istiyorum, mümkün mü bilmiyorum;

    1) Siteye gelen kullanıcı sürükle bırak veya bir buton yardımıyla site sayfası üzerine bir resim bırakacak.
    2) Resim 3 farklı ölçüde sağı solu kırpılmış şekilde kullanıcıya yansıtılacak.

    2.adımı yapabilirim, 1.adım için çözüm bulabilirsem . Daha evvel yaptığım çalışmalar devamlı görselleri sunucuya upload ediyordum ama istediğim şey o değil. Benim sunucuma hiçbir kaydın yapılmasını istemiyorum. Kullanıcı sadece tarayıcı üzerinden işlemini yapabilsin.

    Bilmiyorum anlatabildim mi? Şimdiden teşekkür ederim.
    HTML ve JS ile, hazır kütüphanelerle yapabilirsiniz hocam
  • 27-03-2021, 01:37:47
    #3
    yalinyalniz adlı üyeden alıntı: mesajı görüntüle
    HTML ve JS ile, hazır kütüphanelerle yapabilirsiniz hocam
    Yorum için teşekkürler. Hocam çok kaynak taraması yaptım ama galiba doğru anahtar kelimeyi yazamıyorum. Henüz istediğime ulaşamadım. Bildiğiniz bir link varsa paylaşma imkanınız var mıdır?
  • 27-03-2021, 01:41:20
    #4
    Bu cevap, konu sahibi tarafından kabul edilebilir bir cevap olarak işaretlendi.
    Hocam bir projemde benzer bir kod kullanmışım. input[type=file] olan girdiye dosya seçildiğinde js fonksiyon çalışıyor ve görüntüyo okuyarak bir div'e background olarak gönderiyor. Kullandığım kısmı aşağıya bırakıyorum umarım işinize yarar.
    Not: Örnek kodda input okuma ve background ayarlama işlemlerinde jQuery kullanılıyor.

    function readURL(input){
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#gorselonizleme').css({'background-image':'url(' + e.target.result + ')'});
                // div#gorselonizleme background olarak gönder
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    //<input type="file" name="resim" id="resimsec">
    $("#resimsec").change(function () {
        readURL(this);
    });
  • 27-03-2021, 02:01:25
    #5
    mikropiks adlı üyeden alıntı: mesajı görüntüle
    Hocam bir projemde benzer bir kod kullanmışım. input[type=file] olan girdiye dosya seçildiğinde js fonksiyon çalışıyor ve görüntüyo okuyarak bir div'e background olarak gönderiyor. Kullandığım kısmı aşağıya bırakıyorum umarım işinize yarar.
    Not: Örnek kodda input okuma ve background ayarlama işlemlerinde jQuery kullanılıyor.

    function readURL(input){
        if (input.files && input.files[0]) {
            var reader = new FileReader();
            reader.onload = function (e) {
                $('#gorselonizleme').css({'background-image':'url(' + e.target.result + ')'});
                // div#gorselonizleme background olarak gönder
            }
            reader.readAsDataURL(input.files[0]);
        }
    }
    //<input type="file" name="resim" id="resimsec">
    $("#resimsec").change(function () {
        readURL(this);
    });
    Çalıştı hocam, beni büyük bir yükten kurtardınız Allah razı olsun çok teşekkür ederim