Ganchos personalizados de vue3.0

Ganchos personalizados de vue3.0

• que son los ganchos
  • Esencialmente, un gancho es una función, pero un gancho encapsula el componente API (ref, reactivo, calculado, reloj, función de ciclo de vida) en la función de combinación de configuración, etc., y extrae el código (código público, componentes públicos, etc. ), lo que hace que el código sea más conciso.
  • hook es similar a mixin en vue2

vueuse encapsula muchas funciones de enlace público

• Sitio web oficial: sitio web oficial
• descargar:
  • yarn add @vueuse/core -D
• dijo que no jugara

Convertir img de gancho personalizado a base64

gancho / 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
      // console.log("imgDom",imgDom); // <img id="img" src="./assets/logo.png" alt="" width="300" height="300" />
      imgDom.onload = ()=> {
    
     // 等待 img 加载完毕之后 才转化为base64
        resolve({
    
    
          Baseurl: toBase64(imgDom)
      })
      }
    })
  
    const toBase64 = (el:HTMLImageElement)=>{
    
    
      const canvas = document.createElement("canvas") // 创建标签
      const ctx = canvas.getContext("2d") // 给 canvas 指定一个文件
      canvas.width =  el.width // 给canvas 指定宽高
      canvas.height =  el.height
      ctx?.drawImage(el, 0, 0, canvas.width,canvas.height) // 制作一个画布
      return canvas.toDataURL('image/png') // 导出 base64的img
    }
  })
}

utilizar

<template>
  <!-- <Layout></Layout> -->
  <div>
    <img id="img" src="./assets/logo.png" alt="" width="300" height="300" />
    转化为base64
  </div>
</template>

<script setup lang="ts">
// import Layout from './layout/Layout.vue'
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>

• Efecto
  • ruta de URL convertida a base64
    
  • Copie la ruta de la URL a la dirección URL del navegador, puede mostrar directamente la img base64 actual