Fails when given too many PNGs?

Question

Fails when given too many PNGs?

Closed this issue 9 years ago · 7 comments

I'm trying to use this with my project emojify.js and I need to pass it a large number of PNGs to output to base64-encoded images.

My task:

gulp.task( 'styles', function() {

    return gulp.src( 'images/emoji/*.png' )
        .pipe( sprite( {
            prefix : 'emoji emoji-',
            base64 : true,
            style  : 'emojify.min.css'
        } ) )
        .pipe( cssmin() )
        .pipe( gulp.dest( config.path.dist ) );

} );

My output log:

[11:33:15] Using gulpfile /Volumes/Data HD/Dropbox/Projects/emojify.js/gulpfile.js
[11:33:15] Starting 'styles'...

/Volumes/Data HD/Dropbox/Projects/emojify.js/node_modules/css-sprite/lib/css-sprite.js:115
n(opt.cssPath, sprite.relative) : 'data:' + imageinfo(sprite.canvas.toBuffer()
                                                                    ^
Error: invalid value (typically too big) for the size of the input (surface, pattern, etc.)
    at createStyle (/Volumes/Data HD/Dropbox/Projects/emojify.js/node_modules/css-sprite/lib/css-sprite.js:115:106)
    at DestroyableTransform.createSprite [as _flush] (/Volumes/Data HD/Dropbox/Projects/emojify.js/node_modules/css-sprite/lib/css-sprite.js:164:78)
    at DestroyableTransform.<anonymous> (/Volumes/Data HD/Dropbox/Projects/emojify.js/node_modules/css-sprite/node_modules/through2/node_modules/readable-stream/lib/_stream_transform.js:135:12)
    at DestroyableTransform.g (events.js:180:16)
    at DestroyableTransform.emit (events.js:117:20)
    at finishMaybe (/Volumes/Data HD/Dropbox/Projects/emojify.js/node_modules/css-sprite/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:371:12)
    at endWritable (/Volumes/Data HD/Dropbox/Projects/emojify.js/node_modules/css-sprite/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:378:3)
    at DestroyableTransform.Writable.end (/Volumes/Data HD/Dropbox/Projects/emojify.js/node_modules/css-sprite/node_modules/through2/node_modules/readable-stream/lib/_stream_writable.js:356:5)
    at DestroyableTransform.onend (/Volumes/Data HD/Dropbox/Projects/emojify.js/node_modules/gulp/node_modules/vinyl-fs/node_modules/through2/node_modules/readable-stream/lib/_stream_readable.js:523:10)
    at DestroyableTransform.g (events.js:180:16)

Answer 1 · 2014-10-10T17:32:51.000Z

Hey, could you please try if the bug still exists in version 0.9.0-beta? I switched from node-canvas to lwip and with that the buffer handling changed. Maybe that fixes the issue.

Answer 2 · 2014-10-30T20:45:55.000Z

Weird, I'm working on emojify.js now too and trying out css-sprite with it (this time just for PNG generation though). I can confirm there's no problem when not base64 encoding them anyway.

Answer 3 · 2014-11-16T17:47:17.000Z

I close the bug for now because I just can't reproduce the problem. If the problem still exists please post the error message again using the newest version.

Answer 4 · 2015-02-10T16:16:36.000Z

It is still reproducible for me because there is to many src png - 882 images.

Answer 5 · 2015-02-11T09:36:02.000Z

Ok I'll try to reproduce the issue.

Answer 6 · 2015-02-11T09:38:23.000Z

I use images from https://github.com/frissdiegurke/emoji-parser-bower

Answer 7 · 2015-06-07T13:46:03.000Z

Hey @Matrosskin I know its a long time but by now sprity is the successor of css-sprite. I tried sprity with a lot of icons (over 6000). And it worked pretty well. So if you still need that give it a try.