SORU
26 NİSAN 2012, PERŞEMBE


HTML5 Öncesi yüklemeden önce yeniden boyutlandırma görüntüleri

İşte şehriye karıştırıcı.

Akılda depolama ve xhr v2 HTML5 yerel zorundayız taşıyan ve ne değildir. Eğer çalışan bir örnek bulmak ya da sadece evet ya da hayır bu soru için bana ver diye soracaktım:

Mümkün Pre boyutlu bir resim kullanarak yeni yerel depolama (ya da her neyse), böylece bir kullanıcı değil bir ipucu hakkında yeniden boyutlandırma bir görüntü sürükleyin 10mb görüntü içine web siteme, yeniden boyutlandırmak kullanarak yeni localstorage ve SONRA yükleyin en küçük boyut.

Flash, Java uygulamaları, active X ile yapabilirsin tam şu soruyu sormalıyız......, Javascript, Html5 ile yapmak olduğunu biliyorum.

Bu konuda yanıt bekliyorum.

Şimdi Ta.

CEVAP
26 NİSAN 2012, PERŞEMBE


Evet, canvas element ile görüntüleri işleyebilir File API, o zaman kullanın.

This Mozilla Hacks blog post sürecin en yürüyor. Başvuru için buraya blog yazısı monte kaynak kodu:

// from an input element
var filesToUpload = input.files;
var file = filesToUpload[0];

var img = document.createElement("img");
var reader = new FileReader();  
reader.onload = function(e) {img.src = e.target.result}
reader.readAsDataURL(file);

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var width = img.width;
var height = img.height;

if (width > height) {
  if (width > MAX_WIDTH) {
    height *= MAX_WIDTH / width;
    width = MAX_WIDTH;
  }
} else {
  if (height > MAX_HEIGHT) {
    width *= MAX_HEIGHT / height;
    height = MAX_HEIGHT;
  }
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);

var dataurl = canvas.toDataURL("image/png");

//Post dataurl to the server with AJAX

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Murray Winiata

    Murray Winia

    2 ŞUBAT 2009
  • SaraBeautyCorner - Nails and Nail Art Designs, DIY, Fashion & Makeup Tutorial

    SaraBeautyCo

    7 EKİM 2012
  • UnboxTechnology

    UnboxTechnol

    20 Ocak 2011