الخطوة 5: إضافة صور من الويب

في هذه الخطوة، ستتعرف على:

• كيفية تحميل الموارد من خارج تطبيقك وإضافتها إلى نموذج العناصر في المستند (DOM) من خلال XHR وObjectURLs.

الوقت المقدّر لإكمال هذه الخطوة: 20 دقيقة.
لمعاينة ما ستُكمله في هذه الخطوة، انتقِل إلى أسفل هذه الصفحة ↓.

كيفية تأثير سياسة CSP في استخدام الموارد الخارجية

يفرض نظام تطبيقات Chrome على تطبيقك الامتثال الكامل لسياسات أمان المحتوى (CSP). لا يمكنك تحميل موارد DOM مباشرةً من خارج تطبيق Chrome، مثل الصور والخطوط وCSS طرد.

إذا أردت عرض صورة خارجية في تطبيقك، يجب طلبها من خلال XMLHttpRequest، وتحويلها إلى Blob، وإنشاء ObjectURL. يمكن إضافة ObjectURL هذا إلى نموذج كائن المستند (DOM) لأنّه يشير إلى عنصر في الذاكرة في سياق التطبيق.

عرض صور مصغّرة لعناصر المهام

لنغيّر تطبيقنا للبحث عن عناوين URL للصور في عنصر قائمة مهام. إذا كان عنوان URL يبدو مثل صورة (بالنسبة إلى ينتهي بـ png .أو jpg. أو svg. أو gif.)، فطبق العملية المذكورة أعلاه لعرض صورة مصغّرة بجانب عنوان URL.

تحديث الأذونات

في تطبيق Chrome، يمكنك إجراء استدعاءات XMLHttpRequest لأي عنوان URL طالما حددت نطاقه في البيان. بما أنّك لن تعرف مسبقًا عنوان URL للصورة الذي سيكتبه المستخدم، اطلب الإذن تقديم طلبات إلى "<all_urls>".

في manifest.json، اطلب "" الإذن:

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

إنشاء عناوين ObjectURLs ومحوها

في controller.js، أضِف طريقة _createObjectURL() لإنشاء عناوين ObjectURL من تخزين بيانات أساسي:

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

تحتفظ عناوين URL في ObjectURL بالذاكرة، لذا عندما لا تحتاج إلى ObjectURL، يجب إبطالها. إضافة هذا _clearObjectURL() إلى controller.js للتعامل مع ذلك:

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

تقديم طلب XHR

أضِف طريقة _requestRemoteImageAndAppend() لتنفيذ XMLHttpRequest على عنوان URL لصورة معيّنة:

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، تنشئ هذه الطريقة ObjectURL من استجابة XHR، وتضيف عنصر <img>. مع ObjectURL إلى DOM.

تحليل عناوين URL للصور في عناصر المهام

يمكنك الآن إضافة طريقة _parseForImageURLs() للعثور على جميع الروابط التي لم تتم معالجتها بعد والتحقق منها. الصور. لكل عنوان URL يبدو كصورة، يمكنك تنفيذ _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]);
    }
  }
};

عرض الصور المصغّرة في قائمة المهام

يمكنك الآن الاتصال بـ _parseForImageURLs() من showAll() وshowActive() و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));
};

ونفعل الشيء نفسه مع 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) {
  ...
}

تقييد أبعاد الصورة المعروضة

أخيرًا، في _bowercomponents/todomvc-common/base.css، أضف قاعدة CSS لتقييد حجم الصورة:

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

فتح تطبيق Todo المكتمل

لقد انتهيت من الخطوة 5. أعِد تحميل تطبيقك وأضِف عنصر مهام يحتوي على عنوان URL إلى صورة مستضافة على الإنترنت. بعض الإشعارات عناوين URL التي يمكنك استخدامها: http://goo.gl/nqHMF#.jpg أو http://goo.gl/HPBGR#.png

لمزيد من المعلومات

لمزيد من المعلومات التفصيلية حول بعض واجهات برمجة التطبيقات التي تم تقديمها في هذه الخطوة، راجع:

• سياسة أمان المحتوى ↑
• الإفصاح عن الأذونات ↑

هل أنت مستعد للانتقال إلى الخطوة التالية؟ انتقل إلى الخطوة 6 - تصدير المهام إلى نظام الملفات »