Étape 5: Ajouter des images à partir du Web

Au cours de cette étape, vous allez apprendre à:

  • Comment charger des ressources depuis l'extérieur de votre application et les ajouter au DOM via XHR et ObjectURLs

Temps estimé pour effectuer cette étape: 20 minutes
Pour afficher un aperçu de cette étape, accédez au bas de la page ↓.

Comment CSP affecte l'utilisation des ressources externes

La plate-forme des applications Chrome oblige votre application à respecter entièrement les règles de sécurité du contenu (CSP). Vous ne pouvez pas charger directement des ressources DOM telles que des images, des polices et des fichiers CSS en dehors de votre application Chrome d'un package.

Si vous souhaitez afficher une image externe dans votre application, vous devez la demander via XMLHttpRequest. le transformer en un Blob et créer une ObjectURL. Ce ObjectURL peut être ajouté au DOM, car il fait référence à un élément en mémoire dans le contexte de l'application.

Afficher les vignettes des tâches

Modifions à présent notre application pour qu'elle recherche les URL d'images dans une tâche. Si l'URL ressemble à une image (par se termine par .png, .jpg, .svg ou .gif), appliquez la procédure mentionnée ci-dessus afin d'afficher à côté de l'URL.

Modifier les autorisations

Dans une application Chrome, vous pouvez effectuer des appels XMLHttpRequest vers n'importe quelle URL, à condition de spécifier son domaine dans le fichier manifeste. Comme vous ne saurez pas à l'avance quelle URL d'image l'utilisateur saisira, demandez l'autorisation de envoyer des requêtes à "<all_urls>".

Dans le fichier manifest.json, demandez le fichier "" autorisation:

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

Créer et supprimer des ObjectURL

Dans controller.js, ajoutez une méthode _createObjectURL() pour créer des URL ObjectURL à partir d'un objet Blob:

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

Les URL ObjectURL hébergent de la mémoire. Par conséquent, vous devez les révoquer si vous n'en avez plus besoin. Ajouter _clearObjectURL() à controller.js pour gérer cela:

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

Envoyer une requête XHR

Ajoutez une méthode _requestRemoteImageAndAppend() pour exécuter une requête XMLHttpRequest sur une URL d'image donnée:

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();
};

Lors d'un chargement XHR, cette méthode crée un ObjectURL à partir de la réponse de XHR et ajoute un élément <img>. avec ce ObjectURL dans le DOM.

Analyser les URL d'images dans les tâches

Ajoutez maintenant une méthode _parseForImageURLs() qui recherche tous les liens non encore traités et les vérifie images. Pour chaque URL qui ressemble à une image, exécutez _requestRemoteImageAndAppend():

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]);
    }
  }
};

Afficher les vignettes dans la liste de tâches

Appelez maintenant _parseForImageURLs() depuis showAll(), showActive() et showCompleted():

/**
 * 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));
};

Faites la même chose pour editItem() :

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) {
  ...
}

Limiter les dimensions de l'image affichée

Enfin, dans _bowercomponents/todomvc-common/base.css, ajoutez une règle CSS pour limiter la taille du fichier image:

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

Lancer l'application Todo terminée

Vous avez terminé l'étape 5. Actualisez votre application et ajoutez une tâche avec une URL pointant vers une image hébergée en ligne. Un peu URL que vous pouvez utiliser: http://goo.gl/nqHMF#.jpg ou http://goo.gl/HPBGR#.png.

Pour en savoir plus

Pour en savoir plus sur certaines des API présentées lors de cette étape, consultez les pages suivantes:

Prêt à passer à l'étape suivante ? Passez à l'étape 6 : Exportez des tâches dans le système de fichiers »