canvas实现的图片编辑库及使用案例

### Fabric <!-- chat, support --> [](https://gitter.im/kangax/fabric.js?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) <!-- build/coverage status, climate --> [](http://travis-ci.org/#!/kangax/fabric.js) [](https://codeclimate.com/github/kangax/fabric.js) [](https://coveralls.io/r/kangax/fabric.js?branch=master) <!-- npm, bower, CDNJS versions, downloads --> [](http://badge.fury.io/bo/fabric) [](http://badge.fury.io/js/fabric) [](https://www.npmjs.org/package/fabric) [](https://cdnjs.com/libraries/fabric.js) <!-- deps status --> [](https://david-dm.org/kangax/fabric.js) [](https://david-dm.org/kangax/fabric.js#info=devDependencies) <!-- bounties, tips --> [](https://www.bountysource.com/trackers/23217-fabric-js?utm_source=23217&utm_medium=shield&utm_campaign=TRACKER_BADGE) [](https://gratipay.com/kangax/) [](https://flattr.com/submit/auto?user_id=kangax&url=http://github.com/kangax/fabric.js&title=Fabric.js&language=&tags=github&category=software) **Fabric.js** is a framework that makes it easy to work with HTML5 canvas element. It is an **interactive object model** on top of canvas element. It is also an **SVG-to-canvas parser**. <a href="http://fabricjs.com/kitchensink" target="_blank"><img src="https://github.com/kangax/fabric.js/raw/master/lib/screenshot.png" style="width:300px;box-shadow:rgba(0,0,0,0.3) 0 0 5px"></a> Using Fabric.js, you can create and populate objects on canvas; objects like simple geometrical shapes — rectangles, circles, ellipses, polygons, or more complex shapes consisting of hundreds or thousands of simple paths. You can then scale, move, and rotate these objects with the mouse; modify their properties — color, transparency, z-index, etc. You can also manipulate these objects altogether — grouping them with a simple mouse selection. ### Non-Technical Introduction to Fabric Fabric.js allows you to easily create simple shapes like rectangles, circles, triangles and other polygons or more complex shapes made up of many paths, onto the HTML `<canvas>` element on a webpage using JavaScript. Fabric.js will then allow you to manipulate the size, position and rotation of these objects with a mouse. It’s also possible to change some of the attributes of these objects such as their color, transparency, depth position on the webpage or selecting groups of these objects using the Fabric.js library. Fabric.js will also allow you to convert an SVG image into JavaScript data that can be used for putting it onto the `<canvas>` element. [Contributions](https://github.com/kangax/fabric.js/wiki/Love-Fabric%3F-Help-us-by...) are very much welcome! ### Goals - Unit tested (4400+ assertion, 940+ tests at the moment, 75%+ coverage) - Modular (~60 small ["classes", modules, mixins](http://fabricjs.com/docs/)) - Cross-browser - [Fast](https://github.com/kangax/fabric.js/wiki/Focus-on-speed) - Encapsulated in one object - No browser sniffing for critical functionality - Runs under ES5 strict mode - Runs on a server under [Node.js](http://nodejs.org/) (stable releases and latest of current) (see [Node.js limitations](https://github.com/kangax/fabric.js/wiki/Fabric-limitations-in-node.js)) - Follows [Semantic Versioning](http://semver.org/) ### Supported browsers - Firefox 2+ - Safari 3+ - Opera 9.64+ - Chrome (all versions) - IE10, IE11, Edge You can [run automated unit tests](http://fabricjs.com/test/unit/) right in the browser. ### History Fabric.js started as a foundation for design editor on [printio.ru](http://printio.ru) — interactive online store with ability to create your own designs. The idea was to create [Javascript-based editor](http://printio.ru/ringer_man_tees/new), which would make it easy to manipulate vector shapes and images on T-Shirts. Since performance was one of the most critical requirements, we chose canvas over SVG. While SVG is excellent with static shapes, it's not as performant as canvas when it comes to dynamic manipulation of objects (movement, scaling, rotation, etc.). Fabric.js was heavily inspired by [Ernest Delgado's canvas experiment](http://www.ernestdelgado.com/public-tests/canvasphoto/demo/canvas.html). In fact, code from Ernest's experiment was the foundation of an entire framework. Later, Fabric.js grew into a collection of distinct object types and got an SVG-to-canvas parser. <h3 id="bower-install">Install with bower</h3> $ bower install fabric <h3 id="npm-install">Install with npm</h3> To install Fabric.js using npm, you must first manually [install Cairo](http://cairographics.org/download/) on your system. Cairo is a system library which powers node-canvas, which Fabric.js relies on. When the installation is complete, you may need to restart your terminal or command prompt before installing fabric. $ npm install fabric --save <h3 id="fabric-building">Building</h3> 1. [Install Node.js](https://github.com/joyent/node/wiki/Installation) 2. Build distribution file **[~77K minified, ~20K gzipped]** $ node build.js 2.1 Or build a custom distribution file, by passing (comma separated) module names to be included. $ node build.js modules=text,serialization,parser // or $ node build.js modules=text // or $ node build.js modules=parser,text // etc. By default (when none of the modules are specified) only basic functionality is included. See the list of modules below for more information on each one of them. Note that default distribution has support for **static canvases** only. To get minimal distribution with interactivity, make sure to include corresponding module: $ node build.js modules=interaction 2.2 You can also include all modules like so: $ node build.js modules=ALL 2.3 You can exclude a few modules like so: $ node build.js modules=ALL exclude=gestures,image_filters 3. Create a minified distribution file # Using YUICompressor (default option) $ node build.js modules=... minifier=yui # or Google Closure Compiler $ node build.js modules=... minifier=closure 4. Enable AMD support via require.js (requires uglify) $ node build.js requirejs modules=... 5. Create source map file for better productive debugging (requires uglify or google closure compiler).<br>More information about [source maps](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/). $ node build.js sourcemap modules=... If you use google closure compiler you have to add `sourceMappingURL` manually at the end of the minified file all.min.js (see issue https://code.google.com/p/closure-compiler/issues/detail?id=941). //# sourceMappingURL=fabric.min.js.map 6. Lint source code (prerequisite: `npm -g install jshint`) $ jshint src 7. Ensure code guidelines are met (prerequisite: `npm -g install jscs`) $ jscs src <h3 id="fabric-building">Testing</h3> 1. [Install Node.js](https://github.com/joyent/node/wiki/Installation) 2. [Install