0.2.0-alpha.1 • Published 10 years ago

jaggy v0.2.0-alpha.1

Weekly downloads
2
License
MIT
Repository
github
Last release
10 years ago

jaggy Jaggy NPM version Bower version Build Status Coverage Status

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

TODO

  • TEST for jaggy.browser.coffee
  • TEST for jaggy.angular.coffee

License

MIT by 59naga

0.2.0-alpha.1

10 years ago

0.2.0-alpha

10 years ago

0.1.14-rc.0

10 years ago

0.1.14

10 years ago

0.1.3

10 years ago

0.1.2

10 years ago

0.1.1

10 years ago

0.1.0

10 years ago

0.0.7

10 years ago

0.0.6

10 years ago

0.0.5

10 years ago

0.0.4

10 years ago

0.0.3

10 years ago

0.0.2

10 years ago

0.0.1

10 years ago