jaggy
is Converting to SVG by pixels
Last updated 5 years ago by 59naga .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install jaggy 
SYNC missed versions from official npm registry.

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

Current Tags

  • 0.2.0-alpha.1                                ...           latest (5 years ago)

15 Versions

  • 0.2.0-alpha.1                                ...           5 years ago
  • 0.2.0-alpha                                ...           5 years ago
  • 0.1.14-rc.0                                ...           5 years ago
  • 0.1.14                                ...           5 years ago
  • 0.1.3                                ...           5 years ago
  • 0.1.2                                ...           5 years ago
  • 0.1.1                                ...           5 years ago
  • 0.1.0                                ...           5 years ago
  • 0.0.7                                ...           5 years ago
  • 0.0.6                                ...           5 years ago
  • 0.0.5                                ...           5 years ago
  • 0.0.4                                ...           5 years ago
  • 0.0.3                                ...           5 years ago
  • 0.0.2                                ...           5 years ago
  • 0.0.1                                ...           5 years ago
Maintainers (1)
Downloads
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 15
Dependencies (8)
Dev Dependencies (12)
Dependents (2)

Copyright 2014 - 2016 © taobao.org |