實戰fabric.js教程及API

先看效果:

項目介紹:

整個頁面是一個vue項目中的組件,使用的主要庫是fabricjs 是一個操作canva和svg的庫

文檔為英文的.

後臺系統是nodejs+express 涉及到上傳圖片 session mongodb

用戶表 圖庫表 設計表,

前端上傳組件時ivew的

<code>Upload/<code>

後端使用的是

<code>multer/<code>

可以說麻雀雖小,五臟俱全 前後端分離,使用mongodb數據庫 圖片上傳到文件夾內

實現的效果:

整個頁面包含的功能點有

1:上傳圖片 可旋轉,擴大,縮小,刪除,拖動

2:選取圖片導入 批量上傳,可以上傳到自己的圖庫

3:保存拼圖 導出我的設計,生成縮略圖,可以導入以前的數據

4:導入我的拼圖

5:改變背景 可以使用背景圖片,也可以使用顏色

遇到的問題:

1. 雙擊刪除的功能,獲取當前事件的對象並獲取在整體中的索引,刪除.
2. canva無法生成png圖片 報錯

第一個問題是 如此解決的

<code>        this.fabricCvs.on('mouse:dblclick', (e) => {
          this.fabricCvs.remove(
            this.fabricCvs.item(
              this.fabricCvs.getObjects().indexOf(e.target)
            )
          )
        })/<code>

remove: 刪除一個對象 參數為數組的索引

item:獲取一個對象在數組中的索引

第二個問題是 由於canvas上對於引入的圖片有跨域的限制,不能轉化外域的圖片數據

解決辦法是在引入圖片的時候 設置

<code>crossOrigin: 'anonymous'/<code>

<code>          fabric.Image.fromURL(selectedArr[i].imgUrl, (oImg) => {
            oImg.scale(0.5)//圖片縮小10倍
            this.fabricCvs.add(oImg)
          }, {crossOrigin: 'anonymous'})/<code>

主要用的api:

remove item getObjects

<code>Image.fromURL   更加url生成一個圖片對象/<code> 

<code>add  添加對象/<code>

<code>getSelectionContext  獲取選中內容/<code>

<code>clear  清空內容/<code>

<code>setBackgroundColor  設置背景顏色 背景圖/<code>

<code>renderAll  重新渲染/<code>

<code>toDataURL  轉化成base64/<code>

<code>loadFromJSON 轉化為json
/<code>

學到的東西:

圖片批量上傳,

<code>multer包的使用/<code>

<code>var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public/upload')
  },
  filename: function (req, file, cb) {
    var str = file.originalname.split('.')
    cb(null, Date.now() + '.' + str[1])
  }
})
var upload = multer({storage: storage})
 
// 上傳圖片到圖片倉庫並返回上傳的圖片路徑
router.post('/uploadImgs', upload.array('file', 20), function (req, res, next) {
  var arr = []
  for (var i in req.files) {
    arr.push(global.SERVICEADDRESS + '' + req.files[i].filename)
  }
  res.json({
    code: 200,
    data: arr
  })
})/<code>

mongodb對於數組的批量插入操作

<code> pictureStore.updateOnePictureStore({_id: req.body.storeId}, {$addToSet: {pictureUrlArr: {$each: pictureUrlArr}}}, (err, data) => {
      if (!err) {
        return RETURNSUCCESS(res, data)
      } else {
        return RETURNFAIL(res, err)
      }
    })/<code>

fabric.js API的使用 以及能實現的功能預覽
謝謝閱讀.如果覺得對你有幫助請記得點贊或收藏.歡迎留言討論.你的支持是我出產優秀博客的動力.

請尊重他人勞動成果, 如需轉載,請私信我,禁止私自轉載