search

jnordberg / gif.js

JavaScript GIF encoding library
http://jnordberg.github.io/gif.js/
MIT License
4.76k stars 668 forks source link

Could someone provide a simple demo to me?thanks! #53

Closed faace closed 8 years ago

faace commented 8 years ago

i try below, but finished evnet is invoked. please help! gif.js version is 0.1.2. <

  1. !DOCTYPE html>
  2. < html>
  3. < head lang="en">
  4. < meta charset="UTF-8">
  5. < title>
  6. < /head>
  7. < body>
  8. < div>
  10. < /div>
  14. window.onload = function () {
  15. v ar a = new Image();
  16. a.src = "img/anim1.jpg";
  17. a.onload = function () {
  18. var gif2 = new GIF({
  19. workers: 2,
  20. quality: 10
  21. });
  22. gif2.addFrame(a);
  23. gif2.on('finished', function (blob) {
  24. alert(2);
  25. // window.open(URL.createObjectURL(blob));
  26. });
  27. gif2.render();
  28. };
  29. }
  30. < /script>
  31. < /body>
  32. < /html>
1j01 commented 8 years ago

Open up the devtools and look at the console for errors. You can also use console.log instead of alert. It looks like you haven't included the script. You can add <script src="https://rawgit.com/jnordberg/gif.js/060595539daeec3cf919754cee398ba0b3ef57f4/dist/gif.js"></script> before your script to include the library. Also, it looks like you're missing a starting <script> tag, but it's hard to tell with the messed up formatting. In the future, use code blocks and avoid including line numbers when copying.

faace commented 8 years ago

Thanks for the response. I try your suggestion, but still failed. in the chrome log, it shows two informations:

spawning worker 0 starting frame 1 of 1

the new code is shown below:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div>
    <img src="img/anim1.jpg" id="img1"/>
</div>
<script src="https://rawgit.com/jnordberg/gif.js/060595539daeec3cf919754cee398ba0b3ef57f4/dist/gif.js"></script>
<script>
    window.onload = function () {
        var a = new Image();
        a.src = "img/anim1.jpg";
        a.onload = function () {
            var gif2 = new GIF({
                workers: 1,
                quality: 10
            });
            gif2.addFrame(a);
            gif2.on('finished', function (blob) {
                console.info(2);
                // window.open(URL.createObjectURL(blob));
            });
            gif2.render();
        };
    }
</script>
</body>
</html>
faace commented 8 years ago

it works when i add the workerScript options.Thanks!

 var gif2 = new GIF({
                    workers: 1,
                    quality: 10,
                    repeat: 0,
                    workerScript:'js/gif.worker.js'
                });
  • © Githubissues.
  • Githubissues is a development platform for aggregating issues.