今天要也是要來將之前所學到的來做一些簡單但卻也很常用到的實作應用

主要利用 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 強大的編輯功能去做編輯。

想詳細了解歡迎到下面連結去觀看呦~
Codepen - Day 18 Fabricjs Drag image insert to Canvas

相關連結

Day 4 - 認識各種 Fabricjs 提供的物件型態

Day 8 - Fabricjs 事件

stack overflow - what is event delegation

MDN - FileReader