vue3.0のカスタムフック
- フックとは
- 基本的にフックは関数ですが、フックはコンポーネントapi(ref、reactive、calculated、watch、life cycle function)をセットアップコンビネーション関数などにカプセル化し、コード(パブリックコード、パブリックコンポーネントなど)を抽出します。 )、これによりコードがより簡潔になります
- フックはvue2のミックスインに似ています
vueuseは多くのパブリックフック関数をカプセル化します
- 公式サイト:公式サイト
- ダウンロード:
- 遊ばないと言った
カスタムフックのimgをbase64に変換します
フック/tobase64.ts
import {
onMounted } from "vue"
type Options = {
el:String
}
export default function (options:Options):Promise<{
baseUrl:string}> {
return new Promise((resolve) => {
onMounted(()=> {
let imgDom:HTMLImageElement = document.querySelector(options.el) as HTMLImageElement
imgDom.onload = ()=> {
resolve({
Baseurl: toBase64(imgDom)
})
}
})
const toBase64 = (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')
}
})
}
使用する
<template>
<!-- <Layout></Layout> -->
<div>
<img id="img" src="./assets/logo.png" alt="" width="300" height="300" />
转化为base64
</div>
</template>
<script setup lang="ts">
import useBase64 from './hook/tobase64'
useBase64({
el: '#img',
}).then((res) => {
console.log('res', res.Baseurl)
})
</script>
<style lang="scss">
html,
body,
#app {
height: 100%;
width: 100%;
overflow: hidden;
}
</style>
- 効果
- base64に変換されたURLパス
- URLパスをブラウザのURLアドレスにコピーすると、現在のbase64imgを直接表示できます