工具方法收集

获取文本宽度

export const getTextWidth = (text, options = {}) => {
  const {
    size = 14,
    family = 'Microsoft YaHei'
  } = options
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  ctx.font = `${size}px ${family}`
  const metrics = ctx.measureText(text)
  return Math.abs(metrics.actualBoundingBoxLeft) + Math.abs(metrics.actualBoundingBoxRight)
}

canvas 压缩图片分辨率

export const compressionImage = imgSrc => {
  const image = new Image()
  
  image.setAttribute('crossOrigin', 'Anonymous')
  image.src = imgSrc

  return new Promise(resolve => {
    image.onload = function () {
      // 图片原始宽高
      const imgWidth = image.width
      const imgHeight = image.height

      // 创建画布
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')

      // 图像压缩比例
      const ratio = 0.7

      // 压缩后宽高
      const compressionWidth = imgWidth * ratio
      const compressionHeight = imgHeight * ratio

      // 画布宽高
      canvas.width = compressionWidth
      canvas.height = compressionHeight

      // 裁剪图片
      context.drawImage(image, 0, 0, imgWidth, imgHeight, 0, 0, compressionWidth, compressionHeight)

      resolve(canvas.toDataURL('image/jpg'))
    }
  })
}

vue 延迟加载图片指令

export const directives = {
  install(app) {
    /* v-lazy指令 */
    app.directive('lazy', {
      mounted(imgEl, binding) {
        const src = binding.value

        if (!src) return

        const intersectionObserver = new IntersectionObserver(
          function (entries) {
            entries.forEach((item) => {
              /* intersectionRatio > 0 图片出现 */
              if (item.intersectionRatio > 0) {
                item.target.src = src
                intersectionObserver.unobserve(item.target)
              }
            })
          },
          { threshold: [0] }
        )
        
        intersectionObserver.observe(imgEl)
      }
    })
  }
}

file或blob转base64

/**
 * file或blob转base64
 * @param {*} blob file或者blob
 * @param {*} callback function (data) 通过参数获得base64
 */
function blobToBase64(blob, callback) {
  const reader = new FileReader()
  reader.addEventListener('load', ()=> {
    callback(reader.result)
  })
  reader.readAsDataURL(blob)
}

base64转file或blob

/**
 * base64转file
 * base64格式：data:image/pngbase64,iVBORw0KGgoAAAANSU...
 * @param {*} dataURL base64编码数据
 * @param {*} filename 文件名称
 */
function dataURLToFile(dataURL, filename) {
  const arr = dataURL.split(',')
  const mime = arr[0].match(/:(.*?)/)[1] // mime类型 image/png
  const bstr = atob(arr[1]) //base64 解码

  let i = bstr.length

  const u8arr = new Uint8Array(i)

  while (i--) {
    u8arr[i] = bstr.charCodeAt(i)
  }

  return new File([u8arr], filename, { type: mime })
  //return new Blob([a8arr], {type: mime})
}

图片URL转base64

/**
 * 图片地址转base64
 * base64格式：data:image/pngbase64,iVBORw0KGgoAAAANSU...
 * @param {*} url 图片地址
 * @param {*} callback 回调函数
 */
function imgUrlToBase64(url, callback) {
  let img = new Image()
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')

  img.crossOrigin = 'anonymous'
  img.onload = function () {
    canvas.width = img.width
    canvas.height = img.height

    ctx.drawImage(img, 0, 0)
    callback(canvas.toDataURL())
  }
  img.src = url
}