GithubHelp home page GithubHelp logo

camera's Issues

getBlobFromCanvas mixes sync & async paths

Depending on whether toBlob is supported, getBlobFromCanvas will either use an asynchronous path (with toBlob) or a synchronous one (with toDataUrl).

The only way getBlobFromCanvas appears to work today is because it is used before windows.prompt which, asking info from a user, is slow enough to (most of the time) ensure that the async path has had time to finish. But that's not a reliable workaround.

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

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.