Fabric.js实作: 图片上传并透过拖曳进入canvas

今天要也是要来将之前所学到的来做一些简单但却也很常用到的实作应用

主要利用 Fabricjs drag 事件以及 HTML 图片来做一个可以直接将外部图片拖曳到 Canvas 中，让我们可以透过 Fabricjs 做后续的操作。

今天就做一个能让使用者自行上传图片，且可以将上传的图片自由的拖曳进入 Fabricjs 来让使用者操作。

图片上传

透过 FileReader 将来读取本地的图片

function handleFile () {
  const fileReader = new FileReader();
  fileReader.readAsDataURL(this.files[0])
  fileReader.onload = (e) => {
    // 图片 base64
    const dataURL = e.target.result
    const img = document.createElement('img')
    img.draggable = true
    img.src = dataURL
    img.click = saveImg
    img.addEventListener('mousedown', saveImg)
    imgset.appendChild(img)
  }
}

 
图片来源 - pakutaso
纪录选取目前图片的 src

在图片发生 mousedown 事件时，将图片储存起来，并且记录滑鼠点击图片的位置。

const imgset = $('imgset')
let movingImage
let imgDragOffset = {
  offsetX: 0,
  offsetY: 0
}
function saveImg (e) {
  if( e.target.tagName.toLowerCase() === 'img' ){
    // 这边先计算点击图片的何处，等滑鼠放开后要重新计算起始座标
    imgDragOffset.offsetX = e.clientX - e.target.offsetLeft
    imgDragOffset.offsetY = e.clientY - e.target.offsetTop
    movingImage = e.target
  }
}
imgset.addEventListener('click', saveImg)

这边用到 event delegation 的概念让我们每次新增出来的事件不需重复地去绑定事件

stack overflow - what is event delegation
canvas drop 事件

设定 Fabricjs Drop 事件 canvas.on('drop', dropImg)，Drop 事件后，计算出正确的位置，最后使用 new fabric.Image 新增一张图片，就完成囉。

function dropImg (e) {
  const {offsetX, offsetY} = e.e
  console.log(movingImage)
  const image = new fabric.Image(movingImage, {
    width: movingImage.naturalWidth,
    height: movingImage.naturalHeight,
    scaleX: 100 / movingImage.naturalWidth,
    scaleY: 100 / movingImage.naturalHeight,
    top: offsetY - imgDragOffset.offsetY, // 计算起始位置
    left: offsetX - imgDragOffset.offsetX
  })
  canvas.add(image)
}

canvas.on('drop', dropImg)

本日小结

今天做了一般线上设计常用的功能，能够插入使用者自己想要的图片，再让使用者自由的去透过 Fabricjs 强大的编辑功能去做编辑。