canvas前端图片合成-Fabric.js

Fabric.js是一个可以简化Canvas程序编写的库,官方文档地址http://fabricjs.com/docs/

暂时只支持纯图片的编辑合成

支持设置画布的大小

点击上传背景图片按钮 上传背景图

使用new FileReader()方法,把本地图片转换成base64图片,并且push到data数据中

点击添加画布按钮,push一条新的画布数据,数据是一个对象,包含canvas字段,用来储存Fabric实例,支持图片拖拽的形式把图片添加到画布中

拖动图片的时候使用dragend监听拖拽结束后的事件,在画布中使用dragenter监听鼠标是否进入,如果进入并且拖拽动作结束,获取图片的base64地址并且通过new fabric.Image.fromURL方法添加图片,并且捕获鼠标的坐标减去鼠标距离图片顶部和左边的距离,就得到图片在canvas中具体的位置,通过设置top和left

通过.on()方法监听图片旋转,缩放,方法接受2个参数,第一个为事件名,第二个为回调函数

方法名 说明
“mouse:down” 鼠标按下时
“mouse:up” 鼠标抬起时
“mouse:move” 鼠标移动时
“object:modified” 对象修改后
“object:moving” 对象移动
“object:added” 对象被加入
“object:selected” 对象被选中
“object:rotating” 对象被旋转
“object:scaling” 对象缩放

判断是否选中对象,使用以下方法调整图片层级

方法名 说明
bringForward() 图层上移
sendBackwards() 图层下移
bringToFront() 图层置顶
sendToBack() 图层置底

编辑图片,下面小画布列表也会同时等比例变化

先获取大画布和小画布的比例,按照画布比例缩放移动小画布图片