Jaggy
for gulp
$ npm install gulp jaggy
gulpfile.js
var jaggygulp;jaggy= ;gulp= ;gulp;
$ gulp # Create the .svg
for CLI
Can use jaggy command to folder or file. Create the sameName.svg by [.gif, .jpg, .png]
Example:
$ npm install gulp jaggy --global$ jaggy public_html --recursive
for browser
$ bower install jaggy
- Add
jaggy.browser.js
for<head>
. - Set
jaggy
class for<img>
. - Converting after
DOMContentLoaded
.
Doesn't work Cross-origin
for angular.js 1.*
<!-- replaceWith <svg> -->
Can use jaggy
directive.
Why?
Doesn't work image-rendering:crisp-edges
.
However, Can work on the <svg shape-rendering="crispEdges">
.
Gotcha, save the jaggy.
Browser options
for browser
<script> // default true jaggyoptionscache= false; // default: true jaggyemptyImage= false; // default 0 jaggyoptionspixelLimit= 128 * 128 * 4; // default 4 jaggyoptionsglitch= 3;</script>
for angular.js 1.*
-
.cache
Caching a converted svg by localStorage. -
.emptyImage
Replace empty image instead of Error. e.g.<svg><path fill="rgba(0,0,0,0.50)"/>
-
.pixelLimit
Skip a converting if over set value.<!-- skip a below --><!-- unlimited --><!-- ... -->Default: 262144 (= width 256 * height 256 * channel 4 * frame 1)
-
.glitch
ChangeFrame.putImageData
logic by increment channel value.
Known issue
- Animated gif Can be convert, But, It's so very very heavy.
- Uncaught QuotaExceededError: Failed to execute 'setItem' on 'Storage': Setting the value of
jaggy:url
exceeded the quota. due to Huge Animationed gif
TODO
- TEST for jaggy.browser.coffee
- TEST for jaggy.angular.coffee
License
MIT by 59naga