Drag&Drop,FileApi ve Canvas kullanarak Resize image (resim boyutlandıma)

Normalde resim kaydetmek oldukça basit bir işlem. Bir form içine File input oluşturarak bu işin üstesinden gelinebilir. Fakat bu resim için ön çalışa yapılması gerekirse ne olacak ? Diğer bir deyişle, resmi kaydetmeden önce resize (yeniden boyutlandıra) yapmanız ve dosya türü PNG ve JPG türünde kayıt edilmesi gerekseydi ?  Canvas burada devreye giriyor.

Canvas Nedir ?

Canvas genellikle javascript kullanılarak, geliştiriciye bir sayfada grafik çizme imkanı sağlayan, HTML5 ile gelen bir DOM elemanıdır. Bİr vektörün aksine SVG ve VML’nin özelliklerden farklı bir raster API’dir. Şöyle de diyebiliriz; Adobe Photoshop (raster) kullanarak yapılan bir çalışma ile Adobe Illustrator (vector graphics) ile yapışan çalışma arasındaki fark gibi…

Canvas Javascript kullanarak resim elemanını işlemeye imkan tanıyarak, resmi sunabilir (render) ve okuma gibi işlemleri yerine getirebilir.Resim işlemleri ile ilgili bir çok makale bulabilirsiniz – Bir çoğu resim filtreleme tekniklerine odaklanıyor – ama bizim ihtiyacımız olan sadece belirli ölçeklerde yeniden boyutlandırma ve Canvas bunu bizim için sorunsuz bir şekilde yerine getirecek.

Senaryomuzda bir resmin 100px büyüklüğünden daha uzun olmasının önüne geçmeyi planlıyoruz (resmin orjinal uzunluğunun ne olduğunun önemi yok). Aşağıdaki kod bunu bize sağlayabilir :

var MAX_HEIGHT = 100;
function render(src){
    var image = new Image();
    image.onload = function(){
        var canvas = document.getElementById("myCanvas");
        if(image.height > MAX_HEIGHT) {
            image.width *= MAX_HEIGHT / image.height;
            image.height = MAX_HEIGHT;
        }
        var ctx = canvas.getContext("2d");
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        canvas.width = image.width;
        canvas.height = image.height;
        ctx.drawImage(image, 0, 0, image.width, image.height);
    };
    image.src = src;
}

Örneğimizde nele oluyor :

  1. Javascript Image nesnesi yaratılıyor
  2. Image nesnesinin onload olayına (event) handler bağlanıyor.
  3. Yüklenen resmin boyutları kontrol ediliyor. Şayet orjinal resmin uzunluğu (height) belirlediğimin maksimum uzunluktan büyükse boyutları değiştiriyoruz.
  4. Canvas’ın içerisini boşaltıyoruz.
  5. Canvas boyutlarını resmin boyutlarına set ediyoruz.
  6. Canvas resmi oluşturuluyor.

Resmin Base 64 kodlu versiyonunu, Canvas API’nin toDataURL() metodunu kullanarak elde edebilirsiniz.

Fakat burada duralım… Herşeyden önce resmi nasıl alacağız veya çekeceğiz ?

Bunun için bir File input kullanamassınız.  Bu elemandan sadece seçilen dosyanın bilgisi elde edilebilir. Path (resim yolu) bilgisini resmi yüklerken kullanmayı deneyebilirsiniz fakat bu yöntem tarayıcı üzerinden uygulanamaz. Bunun yerine HTML5 API kullanarak kullanıcın diskindeki bir dosyayı okuyup, kaynak olarak kullanacağız. Daha detaylı bilgi için önceki makaleme göz atabilirsiniz.

File API NEDİR ?

File API kullanıcının yerel diskinden herhangi bir güvelik ihlali yapmadan sanal alan içinde dosya okumak ve yazmak imkanı sunar -bu yolla kötü niyetli siteler kullanıcın diskine herhangi bir virüs atamazlar-.  Kullanacağımız nesne FileReader, bu nesne geliştiricinin bir dosya içeriğini okumasını sağlıyor.

Image yolunu bildiğimiz varsayarsak, FileReader kullanarak içerikleri yükleyecek ve göstereceğiz. Aşağıdaki kod ile bunu kolayca yapabiliriz.

function loadImage(src){
    //  Boş resim dosyasının okunmasının önüne geçiyoruz.
 if(!src.type.match(/image.*/)){
        console.log("Yüklenen dosya resim değil: ", src.type);
        return;
    }

    //FileReader yaratılıp çalıştırıylyor ve sonuçlar fonksiyon üzerinden gösterliyor.
 var reader = new FileReader();
    reader.onload = function(e){
        render(e.target.result);
    };
    reader.readAsDataURL(src);
}

Burada yaptığımız önce FileReader nesnesi yaratmak sonuçlarla (results) bir şeyler yapabilmekiçin onload metoduna handleri ekliyoruz ve sonra dosya içeriğini okuyoruz. Oldukça kolay gmögörünüyor değil mi?

But How Do You Get that File?

Silly rabbit, be patient! Of course that is our next step. There’s a number of ways to do that; for instance, you could have a simple text input to make someone enter a path to an object, but obviously most people are not developers, and would not have a real clue as to how to do that properly. To make it easy on our users, we’ll use the Drag and DropAPI…

Fakat bu dosyayı nasıl alacağız ?

Bunu işlemi yapmanın bir çok yolu var. Örneğin; bir text input yapabilir ve resim yolunun bu alana girilmesini sağlayabilirsiniz. İnsanların çoğu geliştirici olmadığından bu yolu kullanmak doğru olmaz. Kullanıcılar için kolay olanı tercih etmeliyiz ve Drag&Drop API ideal görünüyor.

Drag & Drop API kullanımı

Drag & Drop API çok kolay bir kullanıma sahiptir. Handler fonksiyonlarına bağlı DOM elemanları tarafından taşınan DOM olayları (events) kümesinden meydana gelir. Kullanıcıya diskinin herhangi bir yerinden bir dosyayı sürükleme ve o dosya üzerinde işlem yapma imkanı verir. Örnek kodlarımız aşağıda :

var target = document.getElementById("drop-target");
target.addEventListener("dragover", function(e){e.preventDefault();}, true);
target.addEventListener("drop", function(e){
    e.preventDefault(); 
    loadImage(e.dataTransfer.files[0]);
}, true);

Kodları açıklayacak olursak :

  1. drop target elemanımızı adlandırıyoruz.
  2. Sürükleme işlemi yapılırken başka bir olay meydana gelmesini engelliyoruz.
  3. Kullanıcı birşey drop ettiğinde, default bir hareketi önlüyor ve loadImage fonksiyonumuza dataTransfer nesnesinin eventine ilk dosyayı gönderiyoruz.

Yapacağımız başka bir şey daha var. Resmi önizleme özelliği vermek gibi. Genelde bu işlem resim resize olarak kaydedilmeden işe yaramaz. Bu nedenle, resim datasını post etmek için AJAX kullanacağız.

Örnek AJAX kullanımı :

function myfunction(url_, name) {
$.ajax({
url: “Base64.asmx/kul”,
data: { ss: url_, filename: name },
dataType: “text”,
type: “POST”
}).done(function (o) {

});
}

Demo link  : http://jsfiddle.net/muavenet/6ekhk34w/1/

Muavenet

Web teknolojilerine merak salmış bir bilgisayar mühendisinin yazıları

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir