❤
npm
Sign UpSign In

jaggy

0.2.0-alpha.1 • Public • Published

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

Readme

Keywords

Package Sidebar

Install

npm i jaggy

Repository

github.com/59naga/jaggy

Homepage

github.com/59naga/jaggy

Weekly Downloads

2

Version

0.2.0-alpha.1

License

MIT

Last publish

Collaborators

  • 59naga
Try on RunKit
Report malware