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 pathfullImg.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 = 1fabric.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 pathimg.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 = truefabric.Object.prototype.lockMovementY = truefabric.Object.prototype.lockScalingX  = truefabric.Object.prototype.lockScalingY  = truefabric.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.endYlet 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})        };