添加图片
new fabric.Image.fromURL(url, img => {
canvas.add(img).renderAll()
}, {crossOrigin: 'anonymous'})
常用API
- scaleToWidth(value: number), scaleToHeight(value: number)：指定高度或者宽度等比缩放图片大小， 一般使用一个就可以了, 另外一边会自动按比例缩放。
使用场景: 渲染图片时，由于图片尺寸不能确定，可能远远大于画布尺寸，这不是我们想要的结果，所以需要缩放成一定的大小来显示
img.scaleToWidth(200)
或者
img.scaleToHeight(200)
- setCoords(): 重新计算元素坐标
使用场景: 使用JS改变元素的位置和改变层级时，可能会导致元素无法选择，所以设置元素的属性时， 后面最好都执行一下这个方法
img.set({left: xx})
或者
img.sendToBack()
img.setCoords()
- setSrc(url:string, callback:function, option:object): 替换图片
使用场景: 字面意思， 替换图片功能， 也可以先删除图片再新增一个图片，但是如果项目里已经实现了撤销功能，删除和新增就是记录了两步操作，但实际的操作只是执行了替换图片这一步而已，需另外写代码去控制。
img.setSrc(url, canvas.renderAll.bind(this))
- toDataURL(option:object): 将对象转换成base64数据。 option参数看官方文档
使用场景: 1. 实现图层管理功能时，将元素转成base64展示（比如文字、svg那些元素）2. 用来裁切图片
const base64 = img.toDataURL(option)
- translateToCenterPoint(point:object): 平移将坐标从原点转换为中心坐标
使用场景: 默认是以元素左上角为原点，希望以元素中心移动时可用
img.translateToCenterPoint({x: 10, y: 10})
canvas.renderAll()
- rotate(angle:number): 设置元素旋转角度（以元素中心）
使用场景: 有一个输入框，用户可以直接输入数值设置图片的旋转角度，如果直接设置图片的angle值，在没设置元素的中心点时（默认左上角为中心点），会以左上角为基准旋转, 这时可以直接使用这个api
img.rotate(90)
canvas.renderAll()
需注意的坑
- 一定要设置crossOrigin: 'anonymous', 如果不设置，在执行toDataURL()方法时会报跨域的错误， 记得让运维在图片服务器需要配置Access-Control-Allow-Origin
Failed to execute ‘toDataURL’ on ’HTMLCanvasElement’: Tainted canvased may not be exported
- clipPath属性：可用来实现固定位置的裁切功能demo，设置这个属性后在新版本的fabric.js上会导致图片模糊，toDataURL导出的图片也会模糊，慎用
解决方法: 曲线救国， 在画布上展示时不做处理， 导出图片时使用cropX, cropY属性，计算出图片实际的显示区域，裁切图片，达到一样的效果， 然后删掉clipPath属性，这样子导出的图片就不会模糊了
参考链接
官方文档 fabricjs
