पांचवां चरण: वेब से इमेज जोड़ना

इस चरण में आपको यह जानकारी मिलेगी:

• अपने ऐप्लिकेशन के बाहर से संसाधन लोड करने और उन्हें XHR और ObjectURL के ज़रिए DOM में जोड़ने का तरीका.

इस चरण को पूरा करने में लगने वाला अनुमानित समय: 20 मिनट.
अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है इस चरण में जो कुछ भी पूरा किया जाएगा उसकी झलक देखने के लिए, इस पेज पर सबसे नीचे जाएं ↓.

सीएसपी, बाहरी संसाधनों के इस्तेमाल पर कैसे असर डालता है

Chrome ऐप्स प्लैटफ़ॉर्म, आपके ऐप्लिकेशन को कॉन्टेंट की सुरक्षा से जुड़ी नीतियों (सीएसपी) का पूरी तरह से पालन करने के लिए कहता है. आप अपने Chrome ऐप्लिकेशन के बाहर से सीधे इमेज, फ़ॉन्ट, और सीएसएस जैसे DOM संसाधनों को लोड नहीं कर सकते पैकेज.

अगर आपको अपने ऐप्लिकेशन में कोई बाहरी इमेज दिखानी है, तो XMLHttpRequest की मदद से इसका अनुरोध करें, इसे ब्लॉब में बदलें और एक ObjectURL बनाएं. इस ObjectURL को DOM क्योंकि यह ऐप्लिकेशन के कॉन्टेक्स्ट में एक इन-मेमोरी आइटम के बारे में बताता है.

काम की सूची के लिए थंबनेल इमेज दिखाएं

आइए, तय की गई सूची में इमेज के यूआरएल ढूंढने के लिए अपने ऐप्लिकेशन को बदलते हैं. अगर URL एक इमेज जैसा दिखता है (इसके लिए उदाहरण के लिए, जिसके आखिर में .png, .jpg, .svg या .gif हो इमेज थंबनेल पर क्लिक करें.

अनुमतियां अपडेट करें

Chrome ऐप्लिकेशन में, किसी भी यूआरएल को XMLHttpRequest से तब तक कॉल किया जा सकता है, जब तक उसका डोमेन मेनिफ़ेस्ट फ़ाइल में दी गई जानकारी. आपको पहले से यह पता नहीं होगा कि उपयोगकर्ता कौनसा इमेज यूआरएल टाइप करेगा. इसलिए, इसकी अनुमति मांगें "<all_urls>" को अनुरोध भेजें.

manifest.json में जाकर, "" का अनुरोध करें अनुमति:

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

ObjectURL बनाना और मिटाना

controller.js में, Blob से ObjectURL बनाने के लिए _createObjectURL() तरीका जोड़ने का तरीका:

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

ObjectURL में मेमोरी होती है, इसलिए जब आपको ObjectURL की ज़रूरत नहीं हो, तब आपको उसे रद्द कर देना चाहिए. इसे जोड़ें इसे हैंडल करने के लिए, _clearObjectURL() तरीका controller.js का इस्तेमाल करें:

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

XHR अनुरोध करें

दी गई इमेज के यूआरएल पर XMLHttpRequest चलाने के लिए, _requestRemoteImageAndAppend() तरीका जोड़ें:

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 लोड पर, यह तरीका XHR के रिस्पॉन्स से ObjectURL बनाता है और <img> एलिमेंट जोड़ता है इस ObjectURL को डीओएम में शामिल करें.

काम की सूची में इमेज के यूआरएल को पार्स करें

अब कोई _parseForImageURLs() तरीका जोड़ें, जो ऐसे सभी लिंक ढूंढता है जो अब तक प्रोसेस नहीं हुए हैं और उनकी जांच करता है इमेज. इमेज जैसे दिखने वाले हर यूआरएल के लिए, _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]);
    }
  }
};

काम की सूची में थंबनेल रेंडर करना

अब showAll(), showActive(), और showCompleted() से _parseForImageURLs() को कॉल करें:

/**
 * 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 में, सीएसएस नियम जोड़ें, ताकि इमेज:

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

अपना काम पूरा करने वाला काम पूरा करने वाला ऐप्लिकेशन लॉन्च करें

आपने पांचवां चरण पूरा कर लिया! अपना ऐप्लिकेशन फिर से लोड करें और ऑनलाइन होस्ट की गई इमेज के यूआरएल के साथ ज़रूरी आइटम जोड़ें. कुछ सूचनाएं मिल रही हैं आप इन यूआरएल का इस्तेमाल कर सकते हैं: http://goo.gl/nqHMF#.jpg या http://goo.gl/HPBGR#.png.

अधिक जानकारी के लिए

इस चरण में शुरू किए गए कुछ एपीआई के बारे में ज़्यादा जानकारी के लिए, यह लेख पढ़ें:

• कॉन्टेंट की सुरक्षा के बारे में नीति ↑
• अनुमतियों का एलान करना ↑

क्या आप अगले चरण पर जाने के लिए तैयार हैं? चरण 6 - टूडू को फ़ाइल सिस्टम में एक्सपोर्ट करें » पर जाएं