vue3+ts自定义Hooks

最新推荐文章于 2024-07-29 09:31:39 发布

intrwins

最新推荐文章于 2024-07-29 09:31:39 发布

阅读量488

点赞数

分类专栏： vue3 文章标签： vue.js elementui javascript

本文链接：https://blog.csdn.net/intrwins/article/details/125354183

版权

vue3 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

APP.VUE

<template>
    <div>
        <img id="img" src="./assets/two.png"/>
    </div>
</template>
<script setup lang="ts">
    import useBase64 from './hooks'
    useBase64({el:'#img'}).then((res)=>{
        console.log(res.baseUrl)
    })
</script>
<style lang="less">

</style>

src文件夹下建hooks文件夹，里面新建index.ts文件


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/png')
        }
    })
}