ধাপ 5: ওয়েব থেকে ছবি যোগ করুন

এই ধাপে, আপনি শিখবেন:

  • কীভাবে আপনার অ্যাপের বাইরে থেকে সংস্থানগুলি লোড করবেন এবং সেগুলিকে XHR এবং ObjectURL এর মাধ্যমে DOM-এ যুক্ত করবেন৷

এই ধাপটি সম্পূর্ণ করার আনুমানিক সময়: 20 মিনিট।
এই ধাপে আপনি যা সম্পূর্ণ করবেন তার পূর্বরূপ দেখতে, এই পৃষ্ঠার নীচে ঝাঁপ দাও ↓ ।

কিভাবে CSP বাহ্যিক সম্পদের ব্যবহারকে প্রভাবিত করে

ক্রোম অ্যাপস প্ল্যাটফর্ম আপনার অ্যাপকে কন্টেন্ট সিকিউরিটি পলিসি (CSP)-এর সাথে সম্পূর্ণভাবে মেনে চলতে বাধ্য করে। আপনি আপনার ক্রোম অ্যাপ প্যাকেজের বাইরে থেকে সরাসরি DOM রিসোর্স যেমন ইমেজ, ফন্ট এবং CSS লোড করতে পারবেন না।

আপনি যদি আপনার অ্যাপে একটি বাহ্যিক চিত্র দেখাতে চান, তাহলে আপনাকে এটিকে XMLHttpRequest এর মাধ্যমে অনুরোধ করতে হবে, এটিকে একটি Blob- এ রূপান্তরিত করতে হবে এবং একটি ObjectURL তৈরি করতে হবে। এই ObjectURL DOM-এ যোগ করা যেতে পারে কারণ এটি অ্যাপের প্রসঙ্গে একটি ইন-মেমরি আইটেমকে নির্দেশ করে।

করণীয় আইটেমগুলির জন্য থাম্বনেইল চিত্রগুলি দেখান৷

আসুন একটি করণীয় আইটেমে ছবির URL গুলি দেখতে আমাদের অ্যাপ পরিবর্তন করি৷ যদি URLটি একটি ছবির মতো দেখায় (উদাহরণস্বরূপ, .png, .jpg, .svg, বা .gif দিয়ে শেষ হয়), URL-এর পাশে একটি ছবির থাম্বনেল দেখানোর জন্য উপরে উল্লিখিত প্রক্রিয়াটি প্রয়োগ করুন।

অনুমতি আপডেট করুন

একটি Chrome অ্যাপে, আপনি যতক্ষণ পর্যন্ত ম্যানিফেস্টে এর ডোমেন নির্দিষ্ট করেন ততক্ষণ পর্যন্ত আপনি যেকোনো URL-এ XMLHttpRequest কল করতে পারেন৷ যেহেতু ব্যবহারকারী কোন ছবির URL টাইপ করবে তা আপনি আগে থেকেই জানতে পারবেন না, তাই "<all_urls>" এ অনুরোধ করার অনুমতি নিন।

manifest.json- এ অনুরোধ করুন " "অনুমতি:

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

অবজেক্ট ইউআরএল তৈরি করুন এবং সাফ করুন

controller.js- এ, একটি ব্লব থেকে ObjectURL তৈরি করতে একটি _createObjectURL() পদ্ধতি যোগ করুন:

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

অবজেক্টইউআরএল মেমরি ধারণ করে, তাই যখন আপনার আর অবজেক্ট ইউআরএলের প্রয়োজন হয় না, তখন আপনার সেগুলি প্রত্যাহার করা উচিত। নিয়ন্ত্রণ করার জন্য controller.js- এ এই _clearObjectURL() পদ্ধতি যোগ করুন:

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

একটি XHR অনুরোধ করুন

একটি প্রদত্ত চিত্র URL এ একটি 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 তৈরি করে, এবং এই ObjectURL এর সাথে DOM-এ একটি <img> উপাদান যোগ করে।

করণীয় আইটেমগুলিতে ছবির 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]);
    }
  }
};

করণীয় তালিকায় থাম্বনেইল রেন্ডার করুন

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

প্রদর্শিত চিত্রের মাত্রা সীমাবদ্ধ করুন

অবশেষে, _bower components/todomvc-common/base.css এ, ছবির আকার সীমিত করতে একটি CSS নিয়ম যোগ করুন:

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

আপনার সমাপ্ত টোডো অ্যাপ চালু করুন

আপনি ধাপ 5 সম্পন্ন! আপনার অ্যাপটি পুনরায় লোড করুন এবং অনলাইনে হোস্ট করা একটি ছবিতে URL সহ একটি করণীয় আইটেম যোগ করুন৷ কিছু URL আপনি ব্যবহার করতে পারেন: http://goo.gl/nqHMF#.jpg বা http://goo.gl/HPBGR#.png ।

আরো তথ্যের জন্য

এই ধাপে প্রবর্তিত কিছু API সম্পর্কে আরও বিস্তারিত তথ্যের জন্য, পড়ুন:

পরবর্তী ধাপে চালিয়ে যেতে প্রস্তুত? ধাপ 6-এ যান - ফাইল সিস্টেমে todos রপ্তানি করুন »