前端js操作截取/裁剪圖檔

主要使用用canvas相關api來實作圖檔裁剪

在vue中使用

<template>
  <div>
    <img :src="imgSrc"/>
    <div>
      <h2>裁剪後的圖檔</h2>
      <img :src="handleSrc" height="100">
    </div>
  </div>
</template>

<script>
import logo from '@/assets/imgtest1.png'
import defaultImg from '@/assets/default.png'
export default {
  name: 'ImgUtils',
  data () {
    return {
      imgSrc: logo,
      handleSrc: null,
      defaultImg
    }
  },
  async created () {
    try {
      this.handleSrc = await this.handleImg({
        src: this.imgSrc,
        rect: {
          x: 0, // 截取方格左上角橫坐标
          y: 0, // 截取方格左上角縱坐标
          width: 50, // 截取方格寬度
          height: 200 // 截取方格高度
        }
      })
    } catch (err) {
      console.error(err)
      this.handleSrc = this.defaultImg
    }
  },
  methods: {
    handleImg (opts) {
      return new Promise((resolve, reject) => {
        const { src, rect } = opts
        if (!src || !rect) {
          reject(new Error('opts params Error!'))
        }
        const img = new Image()
        img.src = src
        img.onload = function () {
          const canvas = document.createElement('canvas')
          const ctx = canvas.getContext('2d')
          const { x, y, width, height } = rect
          canvas.width = width
          canvas.height = height
          ctx.drawImage(this, x, y, width, height, 0, 0, width, height)
          const url = canvas.toDataURL('image/png')
          resolve(url)
        }
        img.onerror = function (err) {
          reject(err)
        }
      })
    }
  }
}
</script>
           

handleImg封裝為Promise函數，resolve的值為裁剪後圖檔的url

• 核心方法drawImage

  具體可參考MDN文檔CanvasRenderingContext2D.drawImage()

  該方法有三個重載實作

  代碼中使用的是一個9參數的實作

  imge可以是HTMLImageElement，就是img dom對象，其他八個參數表示的含義如下圖所示

注意：使用該方法的前提是無需設定原圖大小，即使用

image

圖像的預設大小，如果源圖像比例有縮放，參數

opts

中對應的

rect

需要作出對應調整，或者對圖源進行調整，使用文檔上已經渲染的dom，而不是new一個新的

Image

對象