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;"