jaggy v0.2.0-alpha.1
Jaggy

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
- 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
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago