5. Adım: Web'den Resim Ekleme

Bu adımda şunları öğreneceksiniz:

  • Uygulamanızın dışından kaynak yükleme ve XHR ve ObjectURL'ler aracılığıyla DOM'ye ekleme.

Bu adımın tamamlanması için tahmini süre: 20 dakika.
Bu adımda ne tamamlayacağınızı önizlemek için bu sayfanın en altına atlayın ↓.

CSP, harici kaynakların kullanımını nasıl etkiler?

Chrome Uygulamaları platformu, uygulamanızı İçerik Güvenliği Politikaları (İGP) ile tamamen uyumlu olmaya zorlar. Resimler, yazı tipleri ve CSS gibi DOM kaynaklarını Chrome Uygulama paketinizin dışından doğrudan yükleyemezsiniz.

Uygulamanızda harici bir resim göstermek istiyorsanız bu resmi XMLHttpRequest aracılığıyla istemeniz, Blob'a dönüştürmeniz ve ObjectURL oluşturmanız gerekir. Bu ObjectURL, uygulama bağlamında bellek içi bir öğeye işaret ettiği için DOM'ye eklenebilir.

Yapılacaklar listesi öğeleri için küçük resimleri göster

Uygulamamızı bir yapılacak işler öğesinde resim URL'lerini arayacak şekilde değiştirelim. URL bir resme benziyorsa (örneğin, .png, .jpg, .svg veya .gif ile bitiyorsa) URL'nin yanında bir resim küçük resmi görüntülemek için yukarıda belirtilen işlemi uygulayın.

İzinleri güncelle

Bir Chrome uygulamasında, manifest dosyasında URL'nin alan adını belirttiğiniz sürece herhangi bir URL'ye XMLHttpRequest çağrıları yapabilirsiniz. Kullanıcının hangi resim URL'sini yazacağını önceden bilmeyeceğinizden, "<all_urls>" için istek yapmak üzere izin isteyin.

manifest.json dosyasında "" iznini isteyin:

"permissions": ["storage", "alarms", "notifications",
                "webview", "<all_urls>"],

Nesne URL'leri oluşturun ve temizleyin

controller.js dosyasında, Blob'dan ObjectURL'ler oluşturmak için bir _createObjectURL() yöntemi ekleyin:

Controller.prototype._createObjectURL = function(blob) {
  var objURL = URL.createObjectURL(blob);
  this.objectURLs = this.objectURLs || [];
  this.objectURLs.push(objURL);
  return objURL;
};

Nesne URL'leri bellekte tutulduğundan, artık ObjectURL'ye ihtiyacınız kalmadığında bunları iptal etmeniz gerekir. Bunu başarmak için bu _clearObjectURL() yöntemini controller.js dosyasına ekleyin:

Controller.prototype._clearObjectURL = function() {
  if (this.objectURLs) {
    this.objectURLs.forEach(function(objURL) {
      URL.revokeObjectURL(objURL);
    });
    this.objectURLs = null;
  }
};

XHR isteği gönderin

Belirli bir resim URL'sinde XMLHttpRequest'i yürütmek için bir _requestRemoteImageAndAppend() yöntemi ekleyin:

Controller.prototype._requestRemoteImageAndAppend = function(imageUrl, element) {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', imageUrl);
  xhr.responseType = 'blob';
  xhr.onload = function() {
    var img = document.createElement('img');
    img.setAttribute('data-src', imageUrl);
    img.className = 'icon';
    var objURL = this._createObjectURL(xhr.response);
    img.setAttribute('src', objURL);
    element.appendChild(img);
  }.bind(this);
  xhr.send();
};

Bu yöntem, XHR yükünde XHR yanıtından bir ObjectURL oluşturur ve DOM'a bu ObjectURL özelliğine sahip bir <img> öğesi ekler.

Yapılacaklar listesindeki resim URL'lerini ayrıştırma

Şimdi, henüz işlenmemiş tüm bağlantıları bulan ve bu bağlantılarda resim olup olmadığını kontrol eden bir _parseForImageURLs() yöntemi ekleyin. Görsele benzeyen her URL için _requestRemoteImageAndAppend() komutunu çalıştırın:

Controller.prototype._parseForImageURLs = function () {
  // remove old blobs to avoid memory leak:
  this._clearObjectURL();
  var links = this.$todoList.querySelectorAll('a[data-src]:not(.thumbnail)');
  var re = /\.(png|jpg|jpeg|svg|gif)$/;
  for (var i = 0; i<links.length; i++) {
    var url = links[i].getAttribute('data-src');
    if (re.test(url)) {
      links[i].classList.add('thumbnail');
      this._requestRemoteImageAndAppend(url, links[i]);
    }
  }
};

Yapılacaklar listesinde küçük resim oluşturma

Şimdi showAll(), showActive() ve showCompleted() adlı kişilerden _parseForImageURLs() adlı kişiyi arayın:

/**
 * An event to fire on load. Will get all items and display them in the
 * todo-list
 */
Controller.prototype.showAll = function () {
  this.model.read(function (data) {
    this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
    this._parseForImageURLs();
  }.bind(this));
};

/**
 * Renders all active tasks
 */
Controller.prototype.showActive = function () {
  this.model.read({ completed: 0 }, function (data) {
    this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
    this._parseForImageURLs();
  }.bind(this));
};

/**
 * Renders all completed tasks
 */
Controller.prototype.showCompleted = function () {
  this.model.read({ completed: 1 }, function (data) {
    this.$todoList.innerHTML = this._parseForURLs(this.view.show(data));
    this._parseForImageURLs();
  }.bind(this));
};

Aynı işlemi editItem() için de yapın:

Controller.prototype.editItem = function (id, label) {
  ...
  var onSaveHandler = function () {
    ...
    if (value.length && !discarding) {
      ...
      label.innerHTML = this._parseForURLs(value);
      this._parseForImageURLs();
    } else if (value.length === 0) {
  ...
}

Görüntülenen resim boyutlarını sınırla

Son olarak, _bowercomponents/todomvc-common/base.css bölümüne resmin boyutunu sınırlamak için bir CSS kuralı ekleyin:

.thumbnail img[data-src] {
  max-width: 100px;
  max-height: 28px;
}

Tamamlanmış Todo uygulamanızı başlatma

5. adımı tamamladınız! Uygulamanızı yeniden yükleyin ve internette barındırılan bir resme, URL'si olan bir yapılacaklar listesi öğesi ekleyin. Kullanabileceğiniz bazı URL'ler: http://goo.gl/nqHMF#.jpg veya http://goo.gl/HPBGR#.png.

Daha fazla bilgi için

Bu adımda tanıtılan API'lerden bazıları hakkında daha ayrıntılı bilgi için aşağıdaki makalelere bakın:

Bir sonraki adıma geçmeye hazır mısınız? 6. Adım - Yapılacakları dosya sistemine dışa aktarın » bölümüne gidin