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ş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • inovationgmbh

    inovationgmb

    28 EYLÜL 2010
  • rtisticsdev

    rtisticsdev

    31 Mayıs 2012
  • Thom Hall

    Thom Hall

    24 Kasım 2006