1. js部分,直接调用函数
type options = {
el: string
}
export default (options: options): Promise<{ baseUrl: string }> => {
return new Promise((resolve) => {
onMounted(() => {
let img: HTMLImageElement = document.querySelector(
options.el
) as HTMLImageElement
console.log('el', img)
img.onload = () => {
resolve({
baseUrl: base(img)
})
}
})
// 转换成base64文件
const base = (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)
// image/jpeg可以动态匹配png
return canvas.toDataURL('image/jpeg')
}
})
}
2. 文件中使用
<template>
<div class="">
<img id="imgs" class="imgs" src="../../assets/34.jpeg" alt="">
</div>
</template>
<script setup lang="ts">
import useBase from './useBase';
useBase({el: '#imgs'}).then(res=> {
console.log('res', res.baseUrl)
})
</script>