Resim yüklemeden önce yeniden boyutlandırma

SORU

7 HAZİRAN 2009, Pazar

Resim yüklemeden önce yeniden boyutlandırma

Bir kullanıcı jpeg formatında web sitesine fotoğraf yüklemek için bir araç sunmak istiyorum. Bununla birlikte, fotoğrafların orijinal boyutu çok büyük, ve yükleme seçeneği önce Yeniden boyutlandır kullanıcı için çok kolay yapmak istiyorum. Benim tek seçenek bir web servisi aracılığıyla onları göndermeden önce fotoğrafları yeniden boyutlandırır istemci tarafında bir uygulama ya da bir istemci JavaScript kanca görüntüleri yeniden yükleme işlemi üzerinde yan görünüyor. İkinci seçenek JavaScript Kütüphanesi bir resim yeniden boyutlandırma yok, ve JavaScript geçerli boyutlandırma aracı, benim ImageMagick çalıştırmak için zor olacak, çünkü çok belirsiz.

Bu çok nadir bir senaryo olduğuna eminim, ve bu takdir edilecek bu siteler için bazı öneriler ya da işaretçiler.

CEVAP

6 Aralık 2011, Salı

2011, Dosya API ile bunu bilemeyiz, ve tuval. Bu firefox ve chrome sadece şimdi için çalışıyor. İşte bir örnek :

var file = YOUR_FILE,
    fileType = file.type,
    reader = new FileReader();

reader.onloadend = function() {
  var image = new Image();
      image.src = reader.result;

  image.onload = function() {
    var maxWidth = 960,
        maxHeight = 960,
        imageWidth = image.width,
        imageHeight = image.height;

    if (imageWidth > imageHeight) {
      if (imageWidth > maxWidth) {
        imageHeight *= maxWidth / imageWidth;
        imageWidth = maxWidth;
      }
    }
    else {
      if (imageHeight > maxHeight) {
        imageWidth *= maxHeight / imageHeight;
        imageHeight = maxHeight;
      }
    }

    var canvas = document.createElement('canvas');
    canvas.width = imageWidth;
    canvas.height = imageHeight;

    var ctx = canvas.getContext("2d");
    ctx.drawImage(this, 0, 0, imageWidth, imageHeight);

    // The resized file ready for upload
    var finalFile = canvas.toDataURL(fileType);
  }
}

reader.readAsDataURL(file);

Bunu Paylaş: