前端编辑图片缩放图片JScropperJSfabricJSEaselJSfabric-photo

最近接到一个新的需求：

用户可以上传图片到浏览器，然后进行基础的编辑。

下面是四个图片编辑方案

方案1 cropper.js

这是国内同行写的组件，星标 7.8K，比较稳定。缺点：最新版本基于Jquery，早期版本原生JS。

代码链接：

cropper

https://fengyuanchen.github.io/cropper/

效果演示

下面是参考链接

官网：https://fengyuanchen.github.io/cropper/

https://github.com/fengyuanchen/cropper

https://www.npmjs.com/package/cropperjs

https://blog.csdn.net/achejq/article/details/93240104

https://www.jb51.net/article/163621.htm

方案2 fabricjs

国外同行写的组件，github stars15K，代码成熟稳定

功能强大，Javascript Canvas Library, SVG-to-Canvas (& canvas-to-SVG) Parser（文档细节我正在看）

官网链接

http://fabricjs.com/

https://github.com/fabricjs/fabric.js

方案3 EaselJS

功能强大，支持复杂的图片编辑。github stars 7.5K

Easel Javascript库提供了完整的分层显示列表，核心交互模型和帮助程序类，使使用HTML5 Canvas元素更加容易。这是一个用于在HTML5中构建高性能交互式2D内容的库。 它提供了功能丰富的显示列表，可让您操作和制作图形动画。 它还为鼠标和触摸交互提供了强大的交互模型。它非常适合构建游戏，生成艺术，广告，数据可视化以及其他高度图形化的体验。 它可以单独使用，也可以与其他CreateJS套件（SoundJS，PreloadJS和TweenJS）配合使用。它没有外部依赖关系，实际上应该与您喜欢使用的任何框架兼容。

官网链接：

http://createjs.com/

https://www.createjs.com/easeljs

https://github.com/CreateJS/EaselJS

思路4 fabric-photo

这个是国内作者，基于思路2的代码，做出的React兼容的库。

优点：和React兼容

缺点：github stars 80 较少

https://github.com/ximing/fabric-photo

时间有限，这几个库的优缺点对比没有具体写。根据实际需求决定使用哪个库。

如果用户上传矢量图，最好使用第二个；如果用户上传的是栅格图，那么可以选择13个。第四个主要适合React兼容，如果是原生JS或者VUE可以不使用。

稍后进一步学习