Jaggy
![Coverage Status](https://camo.githubusercontent.com/a4585c9b5c8e9904c9a063ee9fad9c4b458e577418fb3836988b7bad21fbe263/68747470733a2f2f636f766572616c6c732e696f2f7265706f732f35396e6167612f6a616767792f62616467652e7376673f6272616e63683d6d6173746572)
for gulp
$ npm install gulp jaggy
gulpfile.js
var jaggy,gulp;
jaggy= require('jaggy');
gulp= require('gulp');
gulp.task('default',function(){
gulp.src(['*.png','*.gif','*.jpg'])
.pipe(jaggy())
.pipe(gulp.dest('./'))
;
});
$ 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
<head>
<script src="bower_components/jaggy/sources/jaggy.browser.js"></script>
</head>
<body>
<img src="pixel_art.gif" class="jaggy">
<img src="pixel_art.jpg" class="jaggy">
<img src="pixel_art.png" class="jaggy">
</body>
- Add
jaggy.browser.js
for<head>
. - Set
jaggy
class for<img>
. - Converting after
DOMContentLoaded
.
Doesn't work Cross-origin
for angular.js 1.*
<head>
<script src="bower_components/angular/angular.min.js"></script>
<script src="bower_components/jaggy/public/jaggy.browser.js"></script>
<script>angular.module('myApp',['jaggy'])</script>
</head>
<body ng-app="myApp">
<img src="moon.png" jaggy alt=""> <!-- replaceWith <svg> -->
</body>
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
jaggy.options.cache= false;
// default: true
jaggy.emptyImage= false;
// default 0
jaggy.options.pixelLimit= 128 * 128 * 4;
// default 4
jaggy.options.glitch= 3;
</script>
for angular.js 1.*
<script>
var app=angular.module('myApp',['jaggy']);
app.config(function(jaggy){
//default: true
jaggy.cache= false;
//default: true
jaggy.emptyImage= false;
//default: 0
jaggy.pixelLimit= 128 * 128 * 4;
//default: 4
jaggy.glitch= 3;
});
</script>
-
.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 --> <script> var app=angular.module('myApp',['jaggy']); app.config(function(jaggy){ jaggy.pixelLimit= 128 * 128 * 4 * 1; }); </script> <body> <img src="huge_pixelart.png" jaggy> <img src="long_animation.gif" jaggy> </body> <!-- unlimited --> <script> var app=angular.module('myApp',['jaggy']); app.config(function(jaggy){ jaggy.pixelLimit= 0; }); </script> <!-- ... -->
Default: 262144 (= width 256 * height 256 * channel 4 * frame 1)
-
.glitch
ChangeFrame.putImageData
logic by increment channel value.
Known issue
- Svg conversion of animated gif is experimental. It will take the high the CPU usage to play.
- 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