24-自定义hooks

最新推荐文章于 2024-02-21 11:49:29 发布

sunnyboysix

最新推荐文章于 2024-02-21 11:49:29 发布

阅读量79

点赞数

分类专栏： vue3官网学习文章标签： vue3

本文链接：https://blog.csdn.net/sunnyboysix/article/details/126751407

版权

vue3官网学习专栏收录该内容

34 篇文章 0 订阅

订阅专栏

<template>

  <div>
    <img id="img" width="300" height="300" src="../assets/icon-bg-detail-0.jpg"/>
  </div>
</template>

<script setup lang="ts">
import useBase64 from './hooks'
useBase64({
  el:'#img'
}).then((res) => {
  console.log(res.baseUrl)
})
</script>

<style lang="less" scoped>

</style>




import { onMounted } from 'vue'

type Options = {
  el: string
}

export default function(options:Options):Promise<{ baseUrl: string }> {
  return new Promise((resolve) => {
    onMounted(() => {
      let img:HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
      console.log(img, '---------->')

      img.onload = () => {
        resolve({
          baseUrl: base64(img)
        })
      }

      const base64 = (el:HTMLImageElement) => {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        canvas.width = el.width
        canvas.height = el.height
        ctx?.drawImage(el, 0, 0, canvas.width, canvas.height)
        return canvas.toDataURL('image/jpg')
      }
    })
  })
}