jaggy
v0.2.0-alpha.1
Published
is Converting to SVG by pixels
Maintainers
59nagaReadme
Jaggy 
for gulp
$ npm install gulp jaggygulpfile.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 .svgfor 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 --recursivefor 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.jsfor<head>. - Set
jaggyclass 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>.cacheCaching a converted svg by localStorage..emptyImageReplace empty image instead of Error. e.g.<svg><path fill="rgba(0,0,0,0.50)"/>.pixelLimitSkip 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)
.glitchChangeFrame.putImageDatalogic 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:urlexceeded the quota. due to Huge Animationed gif
TODO
- TEST for jaggy.browser.coffee
- TEST for jaggy.angular.coffee
License
MIT by 59naga