search

jnordberg / gif.js

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

result is a 4kb black image with canvas #121

Open lyh-ADT opened 4 years ago

lyh-ADT commented 4 years ago

I read the #107 but I am using canvas which dose not have a onload event... Did I do something wrong?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <canvas id="canvas"></canvas>
    <img id="result">
    <script src="/gifjs/gif.js"></script>
    <script>
        var canvas = document.getElementById("canvas");
        var gif = new GIF({
            workers: 1,
            quality: 10,
            workerScript: '/gifjs/gif.worker.js',
            width: canvas.offsetWidth,
            height: canvas.offsetHeight
        });
        gif.on('finished', function(blob) {
            console.log(blob)
            let url = URL.createObjectURL(blob);
            document.getElementById("result").src = url;
        });
        var ctx = canvas.getContext("2d");
        ctx.fillText("sample-text", 0, 60)
        gif.addFrame( ctx, {copy: true, delay: 20})
        gif.render()
    </script>
</body>
</html>
cuixiping commented 4 years ago

You should fill your canvas background at first.

        var ctx = canvas.getContext("2d")
        ctx.fillStyle = '#FFF'
        ctx.fillRect(0, 0, canvas.width, canvas.height)
        ctx.fillText("sample-text", 0, 60)
        gif.addFrame( ctx, {copy: true, delay: 20})
        gif.render()