Vue: 自定义hooks转img为base64

2022-03-26 13:03:47 阅读：224 来源： 互联网

标签：canvas Vue const 自定义 hooks elem height vue console

import { onMounted } from 'vue'


type Options = {
  elem: string
}

const base64 = (elem: HTMLImageElement) => {
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext(('2d'))
  canvas.width = elem.width
  canvas.height = elem.height
  ctx?.drawImage(elem, 0, 0, canvas.width, canvas.height)
  return canvas.toDataURL('image/png')
}
export default function (options: Options): Promise<{ baseUrl: string }> {
  return new Promise(resolve => {
    onMounted(() => {
      const imgElement: HTMLImageElement = document.querySelector(options.elem) as HTMLImageElement
      console.log(imgElement)
      imgElement.onload = () => {
        resolve({
          baseUrl: base64(imgElement)
        })
      }
    })
  })
}

App.vue

<template>
  <div>
    <img src="@/assets/img.png" alt="" id="img">
    <A a="555" title="666"></A>
  </div>
</template>

<script lang="ts" setup>
import A from '@/components/A.vue'
import useBase64 from '@/hooks/index.ts'


useBase64({
  elem: '#img'
}).then(data => {
  console.log(data.baseUrl)
})
</script>

A.vue

<template>
  <div class="a">
    component A
  </div>
</template>
<script lang="ts" setup>
import { useAttrs, useSlots } from 'vue'


const attrs = useAttrs()
console.dir(useAttrs)
console.dir(attrs)

const slots = useSlots()
console.dir(useSlots)
console.dir(slots)

</script>

<style scoped>
.a {
  width: 200px;
  height: 200px;
  border: 2px inset palegreen;
}
</style>

标签：canvas,Vue,const,自定义,hooks,elem,height,vue,console
来源： https://www.cnblogs.com/dissipate/p/16058435.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue: 自定义hooks转img为base64