canvas.toBlob() unable to save in indexedDB

please assist where i made mistake in inserting blob to indexed DB

<html>
  <head>
    <title>canvas to blob</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
  <body>
    <div><input id="fileInput" type="file" accept="image/*" capture="user"></div>
    <div id ="output"></div>
  </body>
</html>
<script src="js/iDB.js"></script>

Javascript

$(document).ready(function(){
  $("#fileInput").change(function(){
    const File = this.files[0];
    const cvs = document.createElement("canvas");
    const data = new Object(); const data.fileName = "test."+(File.type).split("/").pop();
    const cvsBlob = cvs.toBlob(function(blob){
      let fileURL = URL.createObjectURL(File);
      let Img = new Image();
      Img.src = fileURL;
      Img.onload = function(){
        cvs.width = Img.naturalWidth;
        cvs.height = Img.naturalHeight;
        let ctx = cvs.getContext("2d").drawImage(Img,0,0);
        URL.revokeObjectURL(fileURL);
        $("#output").append(cvs).css('width','120');
        data.blob = blob;
        let trx = db.transaction(["iDBimgs"],"readwrite").objectStore("iDBimgs").put(data,data.fileName);
      }
    },File.type,0.5);
  })
});

able to view the uploaded image in canvas but unable to save canvas as blob in indexed DB

coremob / camera

canvas.toBlob() unable to save in indexedDB #19