bluesmoon/pngtocss

Read in a gradient from a png file and spit out CSS for it

pngtocss takes in a png file with a gradient in it and spits out the necessary CSS to draw that gradient.

It only works with:

• 24 bit PNGs
• only linear gradients
• horizontal gradients
• vertical gradients
• diagonal gradients
• multi-colour support only for horizontal and vertical

It does not support:

• radial gradients
• angular gradients (except for perfect diagonal)
• more than 2 colours on diagonal gradients

Code

See the examples/ directory for all the pngs that I've tested this with. Feel free to submit your own (keep them small).

See the src/ directory for the source code.

It's written in C, and uses libpng 1.6.25 and zlib 1.2.8. You'll need both of those to compile it. Also, I wrote it on MacOSX, so I installed the libraries using ports. You may need to play with the Makefile if you're using a different OS. Sorry, I don't have the time to test, but if you submit a pull request, I'll merge it.

License:

BSD Licensed v2.0

Copyright:

© Philip Tellis -- [email protected] -- http://bluesmoon.info/

Credits:

Everything I know about reading a PNG I got from Chapter 13 of the libpng book: http://www.libpng.org/pub/png/book/chapter13.html

The CSS gradient syntax came from these wonderful sites:

• http://css-tricks.com/css3-gradients/
• http://webdesignerwall.com/tutorials/cross-browser-css-gradient
• http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/
• http://www.tankedup-imaging.com/css_dev/css-gradient.html

History:

Nicole tweeted about the absence of a tool to convert images to gradients:

I realised that I knew neither what CSS gradients were, nor how to read a PNG file, so figured that this was a good opportunity to learn both at once. I decided to write it in C because I hadn't written C code in a very long time.

Patches welcome.

Things I learnt

• The average of two colours will be closer to one than to the other.

Discussion

Talk about pngtocss on the discussion page

pngtocss's Issues

enumeration value 'OK' not handled in switch

I get the following error on Yosemite when running make pngtocss:

gcc -o pngtocss -g -I/opt/local/include -L/opt/local/lib pngtocss.c -lpng -lz
pngtocss.c:70:9: warning: enumeration value 'OK' not handled in switch [-Wswitch]
        switch(err) {
               ^
pngtocss.c:100:4: error: use of undeclared identifier 'ZLIB_VERSION'
                        ZLIB_VERSION, zlib_version);
                        ^
pngtocss.c:100:18: error: use of undeclared identifier 'zlib_version'
                        ZLIB_VERSION, zlib_version);
                                      ^
pngtocss.c:429:29: warning: implicitly declaring library function 'strlen' with type
      'unsigned long (const char *)'
        classname = (char *)calloc(strlen(fname)+1, 1);
                                   ^
pngtocss.c:429:29: note: include the header <string.h> or explicitly provide a declaration for 'strlen'
pngtocss.c:430:4: warning: implicitly declaring library function 'strrchr' with type
      'char *(const char *, int)'
        c=strrchr(fname, '/');
          ^
pngtocss.c:430:4: note: include the header <string.h> or explicitly provide a declaration for 'strrchr'
pngtocss.c:436:2: warning: implicitly declaring library function 'strcpy' with type
      'char *(char *, const char *)'
        strcpy(classname, c);
        ^
pngtocss.c:436:2: note: include the header <string.h> or explicitly provide a declaration for 'strcpy'
pngtocss.c:437:4: warning: implicitly declaring library function 'strchr' with type
      'char *(const char *, int)'
        c=strchr(classname, '.');
          ^
pngtocss.c:437:4: note: include the header <string.h> or explicitly provide a declaration for 'strchr'
5 warnings and 2 errors generated.
make: *** [pngtocss] Error 1

zlib and libpng are installed on the computer.

memory leaks?

hi, I just compile your code with AFL_USE_ASAN=1 and modify the Makefile 'gcc' - > 'afl-clang-fast'（aim to use afl for testing）
and then to test can pngtocss work normally. feed the program with the example picture you offered in the project:
tweet.zip

then , ASAN detect the following issue： is it bug?

=================================================================
==3584==ERROR: LeakSanitizer: detected memory leaks

Direct leak of 3284736 byte(s) in 1 object(s) allocated from:
#0 0x4ae8e0 in malloc /home/bupt/Desktop/tools/llvm-12.0.1/llvm/projects/compiler-rt/lib/asan/asan_malloc_linux.cpp:145
#1 0x4f47af in read_png /home/bupt/Desktop/pngtocss/src/pngtocss.c:399:19
#2 0x4f47af in process_file /home/bupt/Desktop/pngtocss/src/pngtocss.c:514:11
#3 0x4f47af in main /home/bupt/Desktop/pngtocss/src/pngtocss.c:535:13
#4 0x7fbfe152bc86 in __libc_start_main /build/glibc-CVJwZb/glibc-2.27/csu/../csu/libc-start.c:310

Direct leak of 40 byte(s) in 1 object(s) allocated from:
#0 0x4aeaa8 in calloc /home/bupt/Desktop/tools/llvm-12.0.1/llvm/projects/compiler-rt/lib/asan/asan_malloc_linux.cpp:154
#1 0x4f5ebe in calculate_gradient /home/bupt/Desktop/pngtocss/src/pngtocss.c:287:22
#2 0x4f5ebe in read_png /home/bupt/Desktop/pngtocss/src/pngtocss.c:407:8
#3 0x4f5ebe in process_file /home/bupt/Desktop/pngtocss/src/pngtocss.c:514:11
#4 0x4f5ebe in main /home/bupt/Desktop/pngtocss/src/pngtocss.c:535:13
#5 0x7fbfe152bc86 in __libc_start_main /build/glibc-CVJwZb/glibc-2.27/csu/../csu/libc-start.c:310

SUMMARY: AddressSanitizer: 3284776 byte(s) leaked in 2 allocation(s).

Add unprefixed `linear-gradient`

Add unprefixed linear-gradient

New issue report

SEGV

sample file

id0_SEGV_pngtocss217_print_colors.zip

command to reproduce

./pngtocss [sample file]

AddressSanitizer:DEADLYSIGNAL

==81647==ERROR: AddressSanitizer: SEGV on unknown address 0x000000001fb0 (pc 0x0000004f76c2 bp 0x7ffd53c669c0 sp 0x7ffd53c65ba0 T0)
==81647==The signal is caused by a READ memory access.
    #0 0x4f76c2 in print_colors /home/bupt/Desktop/pngtocss/src/pngtocss.c:217:19
    #1 0x4f76c2 in print_css_gradient /home/bupt/Desktop/pngtocss/src/pngtocss.c:472:2
    #2 0x4f76c2 in process_file /home/bupt/Desktop/pngtocss/src/pngtocss.c:487:2
    #3 0x4f76c2 in main /home/bupt/Desktop/pngtocss/src/pngtocss.c:508:13
    #4 0x7f4fd0986c86 in __libc_start_main /build/glibc-CVJwZb/glibc-2.27/csu/../csu/libc-start.c:310
    #5 0x41c2d9 in _start (/home/bupt/Desktop/pngtocss/src/pngtocss+0x41c2d9)

AddressSanitizer can not provide additional info.
SUMMARY: AddressSanitizer: SEGV /home/bupt/Desktop/pngtocss/src/pngtocss.c:217:19 in print_colors
==81647==ABORTING

bad-free

sample file

id1_bad_free.zip

command to reproduce

./pngtocss [sample file]

==81652==ERROR: AddressSanitizer: attempting free on address which was not malloc()-ed: 0x7fff2eb87079 in thread T0
    #0 0x4ae562 in free /home/bupt/Desktop/tools/llvm-12.0.1/llvm/projects/compiler-rt/lib/asan/asan_malloc_linux.cpp:127
    #1 0x4f7ba1 in process_file /home/bupt/Desktop/pngtocss/src/pngtocss.c:489:2
    #2 0x4f7ba1 in main /home/bupt/Desktop/pngtocss/src/pngtocss.c:508:13
    #3 0x7f14c0d54c86 in __libc_start_main /build/glibc-CVJwZb/glibc-2.27/csu/../csu/libc-start.c:310
    #4 0x41c2d9 in _start (/home/bupt/Desktop/pngtocss/src/pngtocss+0x41c2d9)

Address 0x7fff2eb87079 is located in stack of thread T0
SUMMARY: AddressSanitizer: bad-free /home/bupt/Desktop/tools/llvm-12.0.1/llvm/projects/compiler-rt/lib/asan/asan_malloc_linux.cpp:127 in free
==81652==ABORTING

setjmp

replace setjmp.

I was getting an error: dereferencing pointer to incomplete type.
Googling I found that we should be using png_jmpbuf.

http://comments.gmane.org/gmane.comp.graphics.png.devel/4131

I replace line 337 with this and it compiled fine.
if (setjmp(png_jmpbuf(png_ptr))) {

version of license is neither specified nor implemented

There are several versions of the "BSD License." In order to avoid confusion, please specify which version of the license is being used by properly implementing it.

Please put the following "Revised BSD License" (or which ever version is decided upon) either at the top of the source code file or in a separate LICENSE file.

Copyright (c) <year>, <copyright holder>
All rights reserved.

Redistribution and use in source and binary forms, with or without
modification, are permitted provided that the following conditions are met:
    * Redistributions of source code must retain the above copyright
      notice, this list of conditions and the following disclaimer.
    * Redistributions in binary form must reproduce the above copyright
      notice, this list of conditions and the following disclaimer in the
      documentation and/or other materials provided with the distribution.
    * Neither the name of the <organization> nor the
      names of its contributors may be used to endorse or promote products
      derived from this software without specific prior written permission.

THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

Thank you in advance!

Unprefixed syntax is incorrect

In new, standardized unprefixed syntax, you should be using "to" plus the side you want the gradient to end at.

For example,
background-image: linear-gradient(to bottom, #000000, #FFFFFF);
instead of
background-image: linear-gradient(top, #000000, #FFFFFF); /* this is wrong and will not work! */

http://dev.w3.org/csswg/css3-images/#linear-gradients