fabric.js的简单上手及基于fabric.js的canvas切图工具：1、基本使用及配置

参考链接 Fabric.js 简单介绍和使用

---

简介

Fabric.js是一个可以简化canvas程序编写的库。 Fabric.js为canvas提供所缺少的对象模型, svg parser, 交互和一整套其他不可或缺的工具。基于MIT协议开源，在github上有许多人贡献代码。

为什么选择fabric.js

• 手上的项目必须使用canvas
• 原生的canvas API不够友好
• 用fabric.js实现切图用户体验更好
• 为项目以后的迭代留下扩展的余地

---

简单上手

请参考文章开头的参考链接

这里主要介绍一下为了实现以下目标所需要配置的东西

终极目标：

1. 加载图片
2. 鼠标拖动生成切图框
3. 点击切图后按照原图比例切出图片
4. 将切出来的图片通过ajax上传至服务器

1. 加载图片

1.1 设置一个不可见的canvas并将原尺寸图片绘制上

let fullImgCv = document.createElement('canvas')
let fullImgCtx = fullImgCv.getContext('2d')
let fullImg = new Image()
fullImg.src = '***'//your path
fullImg.crossOrigin = "Anonymous"
fullImg.onload = function () {
    fullImgCv.width = fullImg.width
    fullImgCv.height = fullImg.height
    fullImgCtx.drawImage(fullImg, 0, 0, fullImg.width, fullImg.height)
}

1.2 加载图片至fabric画布

通过背景图片的方式

let cv = new fabric.Canvas('cv')
let imgScale = 1
fabric.Image.fromURL(currentImg, function (img) {
    if (img.width > cv.width) imgScale = cv.width / img.width
        img.set({
            left: 0,
            top: 0,
            scaleX: imgScale,
            scaleY: imgScale,
            originX: 'left',
            originY: 'top'
        })
        cv.add(img)
    })
}

通过fabric图片对象的方式

let img = new Image()
img.src = '***'//your path
img.onload = function () {
  let _img = new fabric.Image(img)
  if (_img.width > cv.width) imgScale = cv.width / img.width
  cv.setBackgroundImage(_img, cv.renderAll.bind(cv), {
    left: 0,
    top: 0,
    scaleX: imgScale,
    scaleY: imgScale,
    originX: 'left',
    originY: 'top'
  })
}

• 两种方式任选其一，通过fabric图片对象的方式加载易于以后扩展功能（例如背景图片位置的移动）
• 这里的 imgScale 的作用是为终极目标的第3点服务的，目的是将原尺寸的图片按照给定像素的宽度比例显示在屏幕中（避免横向滚动条），且该缩放比例imgScale也是将切图框映射到原尺寸图片画布的重要数据

2. 鼠标拖动生成切图框

2.1 解决当拖动时fabric对象也会被拖动

// 禁止对象被选中
fabric.Object.prototype.selectable = false
// 禁止对象被放大、缩小、旋转、移动
fabric.Object.prototype.lockMovementX = true
fabric.Object.prototype.lockMovementY = true
fabric.Object.prototype.lockScalingX  = true
fabric.Object.prototype.lockScalingY  = true
fabric.Object.prototype.lockRotation  = true

2.2 通过监听鼠标行为作切图框

cv.on('mouse:down', function (options) {
    // 设置变量记录起始位置的坐标
    //options.e.layerX
    //options.e.layerY
})
cv.on('mouse:up', function (options) {
    // 设置变量记录结束位置的坐标
    //options.e.layerX
    //options.e.layerY
})

• fabric提供了很多监听的方式，查看更多
• 值得一提的是当使用fabric.js时，options.e.layerX的坐标在chrome和Firefox上是相同的，而使用原生canvas是不同的，有兴趣的可以去试试

3. 点击切图后按照原图比例切出图片

let x1 = $scope.beginX,
x2 = $scope.endX,
y1 = $scope.beginY,
y2 = $scope.endY

let dataImg = fullImgCtx.getImageData(x1 / imgScale, y1 / imgScale, (x2 - x1) / imgScale, (y2 - y1) / imgScale)

4. 将切出来的图片通过ajax上传至服务器

• 通过getImageData()从canvas得到的是base64编码
• 要通过ajax将图片上传至服务器需要将base64转为blob对象

function dataURItoBlob(dataURI) {
    let byteString = atob(dataURI.split(',')[1])
    let mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0]
    let ab = new ArrayBuffer(byteString.length)
    let ia = new Uint8Array(ab)
    for (let i = 0; i < byteString.length; i++) {
      ia[i] = byteString.charCodeAt(i)
    }
  return new Blob([ab], {type: mimeString})        
};