因为这次接到的需求是要做一个可视化的图片编辑工具，所以经过选型和竟品调研，最终确定用fabric.js来实现，其和要实现的功能匹配度很高，下面简单对fabric.js进行下介绍。
Fabric.jsisaframeworkthatmakesiteasytoworkwithHTML5canvaselement.Itisaninteractiveobjectmodelontopofcanvaselement.ItisalsoanSVG-to-canvasparser.
Fabric.js是一个可以简化canvas开发的框架。Fabric.js为canvas提供所缺少的对象模型，同时也是一个svg解析器。
非常强大的底层画布能力
用对象的方式去编写代码
可以自定义模块
npminstallfabric—save
position:left,top
dimension:width,height
render:fill,opacity,stroke,strokeWidth
scale&rotate:scaleX,scaleY,angle
flip:flipX,flipY
还有path，不过感觉用到的比较少
//M代表MoveTo，L代表LineTo，Z代表closePathletpath=newfabric.Path('M00L500M00L4-3M00L43Z',{left:380,top:70,stroke:'red',strokeWidth:2,fill:false})canvas.add(path)运行结果：
分为普通文本（Text）和可编辑的文本（IText）
letiText=newfabric.IText('hello\nworld',{left:50,top:50,fontFamily:'Helvetica',fill:'#333',lineHeight:1.1,//可以单独设置每个字符的stylestyles:{0:{0:{fontSize:80},1:{textBackgroundColor:'red'}},1:{0:{textBackgroundColor:'rgba(0,255,0,0.5)'},4:{fontSize:20}}}})canvas.add(iText)运行结果：
//也可以嵌套组letgroup=newfabric.Group([circle,triangle],{left:150,top:100,angle:10})canvas.add(group)结果：
letimgElement=document.querySelector('.img')//dom中的img元素letimgInstance=newfabric.Image(imgElement,{left:200,top:100,angle:-10,opacity:0.85})canvas.add(imgInstance)实际应用中很少会这样写，因为还需要在dom中写img标签，一般来说都是引用url来加载图片
fabric.Image.fromURL('url',image=>{image.set({left:200,top:100,width:200,height:200//这里的宽高会是裁剪图片，不是缩放，是fabricobject的宽高})//.scale(1.2,1.2)//缩放图片x、y轴.scaleToWidth(200)//按需要缩放到固定的宽或高.setCoords()canvas.add(image)},{crossOrigin:'anonymous'})fabric还支持给图片加滤镜
fabric.Image.fromURL('url',img=>{img.set({left:500,top:100,})//支持多个滤镜效果叠加img.filters.push(newfabric.Image.filters.Noise({noise:200}),//噪声滤镜newfabric.Image.filters.Invert(),//反转newfabric.Image.filters.Sepia(),//深褐色newfabric.Image.filters.Brownie()//棕镜)//加载滤镜到图片上img.applyFilters()canvas.add(img)},{crossOrigin:'anonymous'})fabric提供了好多种滤镜，可以自己根据需求选用，还支持矩阵来自定义滤镜（Convolute）
fabric.loadSVGFromURL('test.svg',(objects,options)=>{letloadedObject=fabric.util.groupSVGElements(objects,options)loadedObject.set({left:500,top:200}).setCoords()canvas.add(loadedObject)//loadedObject.sourcePath='test.svg'//letjson=canvas.toJSON(['test'])//letlessJson=canvas.toDatalessJSON(['test'])//console.log(json)//console.log(lessJson)})在这里顺便说下toJSON方法，就是把整个canvas都转换成JSON对象，以便需要的时候使用，可以直接用loadFromJSON载入。
上面还写了一个toDatalessJSON，这个一般用在svg比较多的时候，因为svg载入之后是以object-path来保存的，所以大的svg会有很多的path，toJSON之后会过长，所以toDatalessJSON可以把path用路径来代替，不过需要手动设置下sourcePath，以便下次使用的时候能找到。
canvas.preserveObjectStacking=true//选中的时候是否显示在最上层canvas.selection=false//是否支持多选//选中框的一些设置fabric.Object.prototype.set({transparentCorners:false,borderColor:'rgba(32,160,255,1)',cornerColor:'rgba(32,160,255,1)',cornerStrokeColor:'rgba(32,160,255,1)',padding:0,cornerSize:5,rotatingPointOffset:20,})配置项太多了，需要的自己看下API吧
fabric.js用起来还是很简单的，不过也比较底层，实际应用起来还是需要自己封装很多东西。