实战fabric.js教程及API

先看效果:

项目介绍:

整个页面是一个vue项目中的组件,使用的主要库是fabricjs  官网为http://fabricjs.com/ 是一个操作canva和svg的库

文档为英文的.

后台系统是nodejs+express 涉及到上传图片 session mongodb

用户表 图库表 设计表,

前端上传组件时ivew的 

Upload
 

后端使用的是

multer
 

可以说麻雀虽小,五脏俱全 前后端分离,使用mongodb数据库 图片上传到文件夹内

实现的效果:

整个页面包含的功能点有

1:上传图片 可旋转,扩大,缩小,删除,拖动

2:选取图片导入 批量上传,可以上传到自己的图库

3:保存拼图 导出我的设计,生成缩略图,可以导入以前的数据

4:导入我的拼图

5:改变背景 可以使用背景图片,也可以使用颜色

遇到的问题:

1. 双击删除的功能,获取当前事件的对象并获取在整体中的索引,删除.
2. canva无法生成png图片 报错 

第一个问题是 如此解决的

  

   

    

     

    
    

     
        this.fabricCvs.on('mouse:dblclick', (e) => {
     
    
   

    

     

    
    

     
          this.fabricCvs.remove(
     
    
   

    

     

    
    

     
            this.fabricCvs.item(
     
    
   

    

     

    
    

     
              this.fabricCvs.getObjects().indexOf(e.target)
     
    
   

    

     

    
    

     

                  )
     
    
   

    

     

    
    

     

                )
     
    
   

    

     

    
    

     

              })
     
    
  
 

remove: 删除一个对象 参数为数组的索引

item:获取一个对象在数组中的索引

第二个问题是 由于canvas上对于引入的图片有跨域的限制,不能转化外域的图片数据

解决办法是在引入图片的时候 设置

crossOrigin: 'anonymous'
 

  

   

    

     

    
    

     

                fabric.Image.fromURL(selectedArr[i].imgUrl, (oImg) => {
     
    
   

    

     

    
    

     

                  oImg.scale(0.5)//图片缩小10倍
     
    
   

    

     

    
    

     
            this.fabricCvs.add(oImg)
     
    
   

    

     

    
    

     

                }, {crossOrigin: 'anonymous'})
     
    
  
 

主要用的api:

remove item getObjects

Image.fromURL   更加url生成一个图片对象
 

add  添加对象
 

getSelectionContext  获取选中内容
 

clear  清空内容
 

setBackgroundColor  设置背景颜色 背景图
 

renderAll  重新渲染
 

toDataURL  转化成base64
 

loadFromJSON 转化为json

 

学到的东西:

图片批量上传,

multer包的使用
 

  

   

    

     

    
    

     

      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
     
    
   

    

     

    
    

     

        })
     
    
   

    

     

    
    

     

      })
     
    
  
 

mongodb对于数组的批量插入操作

  

   

    

     

    
    

     

       pictureStore.updateOnePictureStore({_id: req.body.storeId}, {$addToSet: {pictureUrlArr: {$each: pictureUrlArr}}}, (err, data) => {
     
    
   

    

     

    
    

     
      if (!err) {
     
    
   

    

     

    
    

     
        return RETURNSUCCESS(res, data)
     
    
   

    

     

    
    

     

            } else {
     
    
   

    

     

    
    

     
        return RETURNFAIL(res, err)
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          })
     
    
  
 

fabric.js API的使用 以及能实现的功能预览

谢谢阅读.如果觉得对你有帮助请记得点赞或收藏.欢迎留言讨论.你的支持是我出产优秀博客的动力.

请尊重他人劳动成果, 如需转载,请私信我,禁止私自转载

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/82661952