hook:toBase64

<template>

<img src="/src/assets/img/demo.png" alt="" width="500" height="600" id="image">

</template>

<script setup lang='ts'>

import usebase64 from '../study/hook/base64.ts'

// 通过 usebase64 的hook函数获取id为image的元素，并输出对应的base64路径

usebase64({ el: '#image'}).then(res => {

  console.log(res.baseUrl);

})

</script>

<style scoped lang='scss'>

</style>

 

import { onMounted } from 'vue'

type Option = {

  el: string

}

// hook是可以写生命周期、状态的，不同于utils的函数

export default function(option:Option):Promise<{baseUrl:string}> {

  return new Promise((resolve => {

    onMounted(() => {

      // 不断言会报错，因为document.querySelector有可能会获得null,无法赋值给img

      let img:HTMLImageElement = document.querySelector(option.el) as HTMLImageElement // 获取图片元素

      img.onload = () => { // 当图片完成加载的时候

        resolve({

          baseUrl: toBase64(img)

        })

      }

    })

    const toBase64 = (el:HTMLImageElement) => {

      // 使用canvas绘制base64

      const canvas = document.createElement('canvas')

      const ctx = canvas.getContext('2d')

      canvas.width = el.width

      canvas.height = el.height

      // 参数为 el,X,Y,width,height

      ctx?.drawImage(el, 0, 0, canvas.width, canvas.height)

      // toDateURL是指定base64格式，image/png是指定图片格式

      return canvas.toDataURL('image/png')

    }

  }))

}

// 使用Promise做返回结果的原因

// 这个函数使用 `Promise` 包裹的主要原因是为了处理异步操作，特别是图片加载的过程。以下是具体原因：

// ### 1. **图片加载是异步的**

//    - 图片加载是一个异步操作，当调用 `img.onload` 时，图片可能还没有完全加载完成。因此，我们需要等待图片加载完成后才能执行后续操作（如将图片转换为 base64 格式）。

//    - 使用 `Promise` 可以让我们在图片加载完成后，通过 `resolve` 返回结果，从而更好地处理异步流程。

// ### 2. **确保在图片加载完成后返回结果**

//    - 函数的目标是将图片转换为 base64 格式并返回。由于图片加载是异步的，我们需要确保在图片加载完成后再执行转换操作。

//    - 通过 `Promise`，我们可以在 `img.onload` 回调中调用 `resolve`，确保只有在图片加载完成后才返回结果。

// ### 3. **方便调用者处理异步结果**

//    - 使用 `Promise` 可以让调用者通过 `.then()` 或 `async/await` 的方式处理异步结果。例如：

//      ```javascript

//      const result = await yourFunction({ el: '#myImage' });

//      console.log(result.baseUrl);

//      ```

//    - 这种方式比传统的回调函数更清晰和易于维护。

// ### 4. **与 Vue 的生命周期钩子结合**

//    - 函数中使用了 Vue 的 `onMounted` 生命周期钩子，确保在 DOM 元素挂载完成后再执行操作。由于 `onMounted` 本身是同步的，但图片加载是异步的，因此需要通过 `Promise` 来处理异步结果。

// ### 总结

// 使用 `Promise` 包裹函数是为了处理图片加载的异步操作，确保在图片加载完成后再返回结果，并提供一种更优雅的方式让调用者处理异步数据。这种方式符合现代 JavaScript 的异步编程模式，使代码更具可读性和可维护性。