Quantcast
Channel: WP快站
Viewing all articles
Browse latest Browse all 233

How to use gifencoder and return dataurl?

$
0
0

Here is the sample from gifencoder:

    const GIFEncoder = require('gifencoder');    const { createCanvas } = require('canvas');    const encoder = new GIFEncoder(320, 240);    encoder.start();    encoder.setRepeat(0);   // 0 for repeat, -1 for no-repeat    encoder.setDelay(500);  // frame delay in ms    encoder.setQuality(10); // image quality. 10 is default.    // use node-canvas    const canvas = createCanvas(320, 240);    const ctx = canvas.getContext('2d');    // red rectangle    ctx.fillStyle = '#ff0000';    ctx.fillRect(0, 0, 320, 240);    encoder.addFrame(ctx);    // green rectangle    ctx.fillStyle = '#00ff00';    ctx.fillRect(0, 0, 320, 240);    encoder.addFrame(ctx);    // blue rectangle    ctx.fillStyle = '#0000ff';    ctx.fillRect(0, 0, 320, 240);    encoder.addFrame(ctx);    encoder.finish();

I am then doing:

const gifDataURL = 'data:image/gif;base64,'+ encoder.out.getData('base64');context.res = {        body: gifDataURL    };

I can't get the gifDataURL to be a valid base64 string.

When I inspect gifDataURL, this is the output. What am I doing wrong? And is this the best route to go down when I could have 30 second animations?

"data:image/gif;base64,GIF89a@\u0001�\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000!!!"""###$$$%%%&&&'''((()))+++,,,---...///000111222333444555666777888999:::;;;<<<===>>>???@@@AAABBBCCCDDDEEEFFFGGGHHHIIIJJJKKKLLLMMMNNNOOOPPPQQQRRRSSSTTTUUUVVVWWWXXXYYYZZZ[[[\\\]]]^^^___aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnnooopppqqqrrrssstttuuuvvvwwwxxxyyyzzz{{{|||}}}~~~������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������!�\u000bNETSCAPE2.0\u0003\u0001\u0000\u0000\u0000!�\u0004\u00002\u0000\u0000\u0000,\u0000\u0000\u0000\u0000@\u0001�\u0000\u0000\b�\u0000!\b\u001cH����\b\u0013*\\Ȱ�Ç\u0010#J�H��ŋ\u00183j�ȱ�Ǐ C�\u001cI��ɓ(S�\\ɲ�˗0cʜI��͛8s��ɳ�ϟ@�\n\u001dJ��ѣH�*]ʴ�ӧP�J�J��իX�j�ʵ�ׯ`Ê\u001dK��ٳhӪ]˶�۷p�ʝK��ݻx���˷�߿�\u0003\u000b\u001eL���È\u0013+^̸��ǐ#K�L���˘3k�̹��ϠC�\u001eM���ӨS�^ͺ��װc˞M���۸s��ͻ�����\u000b\u001fN����ȓ+_μ���УK�N����سk�ν�����ϋ\u001fO�����ӫ_Ͼ�����˟O��������Ͽ���\u0000\u0006(��\u0004\u0016h��\b&���\f6���\u0010F(�\u0014Vh�\u0018f��\u001cv���(�$�h�(���,���0�(�4�h�8��<���@\u0006)�D\u0016i�H&��L6��PF)�TVi�Xf��\\v��`�)�d�i�h���l���p�)�t�i�x��|��矀\u0006*蠄\u0016j衤\u0005\u0004\u0000!�\u0004\u00002\u0000\u0000\u0000,\u0000\u0000\u0000\u0000@\u0001�\u0000�\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000!!!\"\"\"###$$$%%%&&&'''((()))***+++,,,---...///000111222333444555666777888999:::;;;<<<===>>>???@@@AAABBBCCCDDDEEEFFFGGGHHHIIIJJJKKKLLLMMMNNNOOOPPPQQQRRRSSSTTTUUUVVVWWWXXXYYYZZZ[[[\\\\\\]]]^^^___aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnnooopppqqqrrrssstttuuuvvvwwwxxxyyyzzz{{{|||}}}~~~������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������\b�\u0000\u0019\b\u001cH����\b\u0013\Ȱ�Ç\u0010#J�H��ŋ\u00183j�ȱ�Ǐ C�\u001cI��ɓ(S�\ɲ�˗0cʜI��͛8s��ɳ�ϟ@�\n\u001dJ��ѣH�*]ʴ�ӧP�J�J��իX�j�ʵ�ׯÊ\u001dK��ٳhӪ]˶�۷p�ʝK��ݻx���˷�߿�\u0003\u000b\u001eL���È\u0013+^̸��ǐ#K�L���˘3k�̹��ϠC�\u001eM���ӨS�^ͺ��װc˞M���۸s��ͻ�����\u000b\u001fN����ȓ+_μ���УK�N����سk�ν�����ϋ\u001fO�����ӫ_Ͼ�����˟O��������Ͽ���\u0000\u0006(��\u0004\u0016h��\b&���\f6���\u0010F(�\u0014Vh�\u0018f��\u001cv���(�$�h�(���,���0�(�4�h�8��<���@\u0006)�D\u0016i�H&��L6��PF)�TVi�Xf��\\v���)�d�i�h���l���p�)�t�i�x��|��矀\u0006蠄\u0016j衤\u0005\u0004\u0000!�\u0004\u00002\u0000\u0000\u0000,\u0000\u0000\u0000\u0000@\u0001�\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�\u0000\u0000�!!!"""###$$$%%%&&&'''((()))+++,,,---...///000111222333444555666777888999:::;;;<<<===>>>???@@@AAABBBCCCDDDEEEFFFGGGHHHIIIJJJKKKLLLMMMNNNOOOPPPQQQRRRSSSTTTUUUVVVWWWXXXYYYZZZ[[[\\\]]]^^^___```aaabbbcccdddeeefffggghhhiiijjjkkklllmmmnnnooopppqqqrrrssstttuuuvvvwwwxxxyyyzzz{{{|||}}}~~~������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������������\b�\u0000!\b\u001cH����\b\u0013*\Ȱ�Ç\u0010#J�H��ŋ\u00183j�ȱ�Ǐ C�\u001cI��ɓ(S�\ɲ�˗0cʜI��͛8s��ɳ�ϟ@�\n\u001dJ��ѣH�*]ʴ�ӧP�J�J��իX�j�ʵ�ׯÊ\u001dK��ٳhӪ]˶�۷p�ʝK��ݻx���˷�߿�\u0003\u000b\u001eL���È\u0013+^̸��ǐ#K�L���˘3k�̹��ϠC�\u001eM���ӨS�^ͺ��װc˞M���۸s��ͻ�����\u000b\u001fN����ȓ+_μ���УK�N����سk�ν�����ϋ\u001fO�����ӫ_Ͼ�����˟O��������Ͽ���\u0000\u0006(��\u0004\u0016h��\b&���\f6���\u0010F(�\u0014Vh�\u0018f��\u001cv���(�$�h�(���,���0�(�4�h�8��<���@\u0006)�D\u0016i�H&��L6��PF)�TVi�Xf��\\v���)�d�i�h���l���p�)�t�i�x��|��矀\u0006*蠄\u0016j衤\u0005\u0004\u0000;"


Viewing all articles
Browse latest Browse all 233

Trending Articles