Jaggy NPM | npm.io

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 Change Frame.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