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

इस चरण में आपको पता चलेगा कि:

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

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

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

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

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

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

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

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

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

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

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

ऑब्जेक्ट यूआरएल बनाएं और उन्हें मिटाएं

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

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

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

टूडू आइटम में इमेज यूआरएल के लिए पार्स करें

अब _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 - फ़ाइल सिस्टम में काम की सूची एक्सपोर्ट करें » पर जाएं