title: is it possible to save multiple image or file in local storage from dropzone canvas by index?
body: <p>I'm able to drag multiple image from one canvas and drop it to another canvas.But i'm unable to store images in Localstorage. So, i want to store images in localStorage from dropzone area according to image index. How can i overcome this problem?<br/><br/>
  I want,<br/><br/>
   - <strong>Save images into LocalSrorage<br/>
   - Save files into LocalStorage<br/>
   - Save image and file by IndexDB<br/></strong></p>
  
  <p>Please anyone help me.
  Thanks for advance.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
          body {
              background-color: ivory;
              padding: 10px;
          }
  
          canvas {
              border: 1px solid red;
          }
  
          #canvas {
          }
  
              #canvas:active {
                  cursor: move;
              }
      &lt;/style&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          $(function () {
  
              var canvas = document.getElementById("canvas");
              var ctx = canvas.getContext("2d");
              var drop = document.getElementById("dropzone");
              var dropCtx = drop.getContext("2d");
  
              var canvasOffset = $("#canvas").offset();
              var offsetX = canvasOffset.left;
              var offsetY = canvasOffset.top;
  
              var mouseIsDown = false;
              var frameWidth = 128;
              var frameHeight = 128;
              // checkmark for selected
              var checkmark = document.createElement("img");
              checkmark.src = "https://cdn.pixabay.com/photo/2016/03/31/14/37/check-mark-1292787_960_720.png";
  
              var images = [];
              var items = [];
              items.push({ description: "House#1", url: "http://images.all-free-download.com/images/graphiclarge/green_house_icon_312519.jpg", isSelected: false, isDropped: false, x: 0, y: 0 });
              items.push({ description: "House#2", url: "http://freedesignfile.com/upload/2013/07/House-2.jpg", isSelected: false, isDropped: false, x: 0, y: 0 });
              items.push({ description: "House#3", url: "https://thumbs.dreamstime.com/z/flat-house-icon-vector-69856508.jpg", isSelected: false, isDropped: false, x: 0, y: 0 });
  
  
              var imgLoadCount = 0;
              for (var i = 0; i &lt; items.length; i++) {
                  images[i] = document.createElement("img");
                  images[i].onload = function () {
                      if (++imgLoadCount &gt;= items.length) { draw(); }
                  }
                  images[i].src = items[i].url;
              }
  
              function draw() {
  
                  ctx.clearRect(0, 0, canvas.width, canvas.height);
                  dropCtx.clearRect(0, 0, drop.width, drop.height);
  
                  var canvasX = 0;
                  var dropX = 0;
                  //
                  for (var i = 0; i &lt; items.length; i++) {
                      if (items[i].isDropped) {
                          x = dropX * 160 + 10;
                          drawContainer(dropCtx, i, x, 20);
                          dropX++;
                          items[i].x = x;
                      } else {
                          x = canvasX * 160 + 10;
                          drawContainer(ctx, i, x, 20);
                          canvasX++;
                          items[i].x = x;
                      }
                  }
              }
  
  
              // draw image container
              function drawContainer(context, index, x, y) {
  
                  context.beginPath();
                  context.rect(x, y + frameHeight, frameWidth, 30);
                  context.fillStyle = "black";
                  context.fill();
                  context.beginPath();
                  context.fillStyle = "white";
                  context.font = "10pt Verdana";
                  context.fillText(items[index].description, x + 10, y + frameHeight + 18);
  
                  // draw a thumbnail of the image
                  var img = images[index];
                  if (img.width &gt;= img.height) {
                      context.drawImage(img, 0, 0, img.width, img.height,
                          x, y, 128, 128 * img.height / img.width);
                  } else {
                      context.drawImage(img, 0, 0, img.width, img.height,
                          x, y, 128 * img.width / img.height, 128);  // edited s/b [,128], not [/128]
                  }
  
                  // outer frame (green if selected)
                  context.beginPath();
                  context.rect(x - 2, y - 2, frameWidth + 4, frameHeight + 30 + 4);
                  context.lineWidth = 3;
                  context.strokeStyle = "lightgray";
                  if (items[index].isSelected) {
                      context.strokeStyle = "green";
                      context.drawImage(checkmark, x + frameWidth - 30, y + frameHeight + 3);
                  }
                  context.stroke();
  
              }
  
              function handleMouseDown(e) {
                  mouseX = parseInt(e.clientX - offsetX);
                  mouseY = parseInt(e.clientY - offsetY);
  
                  // Put your mousedown stuff here
                  mouseIsDown = true;
              }
  
              function handleMouseUp(e) {
                  mouseIsDown = false;
                  mouseX = parseInt(e.clientX - offsetX);
                  mouseY = parseInt(e.clientY - offsetY);
  
                  // Put your mouseup stuff here
                  for (var i = 0; i &lt; items.length; i++) {
                      var item = items[i];
                      // have we clicked on something?
                      if (!item.isDropped &amp;&amp; mouseX &gt;= item.x &amp;&amp; mouseX &lt;= item.x + frameWidth) {
                          // if so, toggle its selection
                          items[i].isSelected = !(items[i].isSelected);
                          draw();
                      }
                  }
              }
  
              function handleMouseOut(e) {
                  if (!mouseIsDown) { return; }
                  mouseX = parseInt(e.clientX - offsetX);
                  mouseY = parseInt(e.clientY - offsetY);
  
                  // Put your mouseOut stuff here
              }
  
              function handleMouseMove(e) {
                  mouseX = parseInt(e.clientX - offsetX);
                  mouseY = parseInt(e.clientY - offsetY);
  
                  // Put your mousemove stuff here
  
              }
  
              function handleDrop(e) {
                  for (var i = items.length - 1; i &gt;= 0; i--) {
                      if (items[i].isSelected) {
                          items[i].isDropped = true;
                          items[i].isSelected = false;
                          console.log(i);
                      }
                  }
                  draw();
              }
  
              $("#canvas").mousedown(function (e) { handleMouseDown(e); });
              $("#canvas").mousemove(function (e) { handleMouseMove(e); });
              $("#canvas").mouseup(function (e) { handleMouseUp(e); });
              $("#canvas").mouseout(function (e) { handleMouseOut(e); });
              $("#dropzone").mouseup(function (e) { handleDrop(e); });
  
          }); // end $(function(){});
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;Click an item to toggle it's selection&lt;/p&gt;
      &lt;p&gt;Drag from top to bottom canvas to drop selected items&lt;/p&gt;
      &lt;canvas id="canvas" width=500 height=200&gt;&lt;/canvas&gt;&lt;br /&gt;
      &lt;canvas id="dropzone" width=500 height=200&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p></p>