参考链接 Fabric.js 简单介绍和使用
简介
为什么选择fabric.js
- 手上的项目必须使用canvas
- 原生的canvas API不够友好
- 用fabric.js实现切图用户体验更好
- 为项目以后的迭代留下扩展的余地
简单上手
这里主要介绍一下为了实现以下目标所需要配置的东西
终极目标：
1. 加载图片
通过背景图片的方式
通过fabric图片对象的方式
- 两种方式任选其一，通过fabric图片对象的方式加载易于以后扩展功能（例如背景图片位置的移动）
- 这里的 imgScale 的作用是为终极目标的第3点服务的，目的是将原尺寸的图片按照给定像素的宽度比例显示在屏幕中（避免横向滚动条），且该缩放比例imgScale也是将切图框映射到原尺寸图片画布的重要数据
2. 鼠标拖动生成切图框
fabric提供了很多监听的方式，查看更多
值得一提的是当使用fabric.js时，options.e.layerX的坐标在chrome和Firefox上是相同的，而使用原生canvas是不同的，有兴趣的可以去试试
将切出来的图片通过ajax上传至服务器
- 通过getImageData()从canvas得到的是base64编码
- 要通过ajax将图片上传至服务器需要将base64转为blob对象
原文:大专栏 fabric.js的简单上手及基于fabric.js的canvas切图工具：1、基本使用及配置