$ 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 .svgCan 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$ 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
<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.
Doesn't work image-rendering:crisp-edges.
However, Can work on the <svg shape-rendering="crispEdges">.
Gotcha, save the jaggy.
<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><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.
- 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:urlexceeded the quota. due to Huge Animationed gif
- TEST for jaggy.browser.coffee
- TEST for jaggy.angular.coffee
MIT by 59naga