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 tamamlayacaklarınızı önizlemek için bu sayfanın en altına gidin ↓.

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. Resim, yazı tipi ve CSS gibi DOM kaynaklarını Chrome Uygulamanızın dışından doğrudan yükleyemezsiniz. paketinden yararlanın.

Uygulamanızda harici bir resim göstermek isterseniz bunu XMLHttpRequest üzerinden istemeniz gerekir Blob'a dönüştürüp ObjectURL oluşturun. Bu ObjectURL, şuraya eklenebilir: Uygulama bağlamında bellek içi bir öğeyi ifade ettiği için DOM.

Yapılacak işler için küçük resimleri göster

Uygulamamızı, yapılacaklar listesindeki resim URL'lerini arayacak şekilde değiştirelim. URL bir resim gibi görünüyorsa ( ile biten bir örneğin, .png, .jpg, .svg veya .gif ile biten bir dosya içeriyorsa) bir yanında bir resim küçük resmi görürsünüz.

İzinleri güncelle

Bir Chrome Uygulamasında, alan adını manifestoda belirtebilirsiniz. Kullanıcının hangi resim URL'sini yazacağını önceden bilmeyeceğiniz için "<all_urls>" adresinden istekte bulunabilirsiniz.

manifest.json dosyasında "" isteğinde bulunun. izin:

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

ObjectURL'leri oluşturma ve temizleme

controller.js'de, 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;
};

ObjectURL'ler belleği tutar. Bu nedenle, ObjectURL'ye artık ihtiyacınız kalmadığında bunları iptal etmeniz gerekir. Bunu ekle _clearObjectURL() yöntemini kullanarak controller.js'yi yükleyebilirsiniz:

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

XHR isteğinde bulun

Belirli bir görüntü URL'sinde XMLHttpRequest yürütmek için _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();
};

XHR yükünde bu yöntem, XHR'ın yanıtından bir ObjectURL oluşturur ve bir <img> öğesi ekler bu ObjectURL ile DOM'ye gönderebilirsiniz.

Yapılacaklar listesi öğelerindeki resim URL'lerini ayrıştır

Şimdi, henüz işlenmemiş tüm bağlantıları bulup bunların mevcut olup olmadığını kontrol eden bir _parseForImageURLs() yöntemi ekleyin. resim. Resim gibi görünen her URL için _requestRemoteImageAndAppend() yürütü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ı operatörlerden _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ırlandırın

Son olarak, _bowercomponents/todomvc-common/base.css içinde resim:

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

Tamamlanmış Todo uygulamanızı başlatın

5. adımı tamamladınız! Uygulamanızı yeniden yükleyin ve internette barındırılan bir resmin URL'sini içeren bir yapılacaklar listesi öğesi ekleyin. Biraz Kullanabileceğiniz 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'lerin bazıları hakkında daha ayrıntılı bilgi için aşağıdaki konulara bakın:

Bir sonraki adıma geçmeye hazır mısınız? 6. Adım - Yapılacakları dosya sistemine aktarın » seçeneğine gidin.