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. 加载图片

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

12345678910

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)}

• 加载图片至fabric画布

通过背景图片的方式

123456789101112131415

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图片对象的方式

1234567891011121314

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. 鼠标拖动生成切图框

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

12345678

// 禁止对象被选中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

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

12345678910

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是不同的，有兴趣的可以去试试

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

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

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

来源：https://www.cnblogs.com/chinatrump/p/11597023.html