Vue3+TypeScript学习笔记(二十六)

简介: 本节记录自定义hook函数相关的内容

hook是Vue3的新特性,和Vue2的minxin非常像,但相比minxin其不覆盖同名变量,按需引入的方式使其更适合频繁使用,除了Vue原生的hook函数(useAttr()等)外,useVue也提供了一系列强大的hook函数,本节演示如何使用hook函数将图片转为base64编码

App.vue

<template>
    <img src="./assets/test1.jpg" alt="" />
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import useBase64 from './hooks/useBase64'

useBase64('img').then((res: string) => {
    console.log(res)
})
</script>

<style scoped></style>

canvas.drawImage共有三种参数列表:

drawImage(image, dx, dy)
drawImage(image, dx, dy, dWidth, dHeight)
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)

其中,image规定要使用的图像、画布或视频,dx、dy表示开始剪切的图像xy坐标,均为0则剪切完整图像,dWidth和dHeight表示image在目标画布上绘制的宽高,更多参数解析请参考MDN文档

https://developer.mozilla.org/zh-CN/docs/Web/API/CanvasRenderingContext2D/drawImage

useBase64.ts

import { onMounted } from 'vue'

// 默认导出一个函数,返回一个Promise对象,Promise中的泛型类型表示其resolve时返回的数据类型
// 这里option的值是'img'
export default function (option: string): Promise<string> {
    return new Promise((resolve) => {
        onMounted(() => {
            let img = document.querySelector(option) as HTMLImageElement
            img.onload = () => {
                resolve(base64(img))
            }
        })
    })
}

// 借助canvas画布将图片转为base64编码
const base64 = (img: HTMLImageElement) => {
    let canvas = document.createElement('canvas')
    canvas.width = img.width
    canvas.height = img.height
    let ctx = canvas.getContext('2d')
    ctx?.drawImage(img, 0, 0, canvas.width, canvas.height)
    return canvas.toDataURL('img/png')
}
相关文章
|
1天前
|
JavaScript 安全 前端开发
Vue 3 中的 TypeScript
【6月更文挑战第15天】
8 6
|
24天前
|
JavaScript 前端开发
TypeScript 学习笔记(六):TypeScript 与前端框架的结合应用
笔记,进一步提升 TypeScript 编程技能。
23 1
|
1月前
|
JavaScript 前端开发 编译器
TypeScript 学习笔记
TypeScript 学习笔记
|
1月前
|
JavaScript 前端开发 开发者
类型检查:结合TypeScript和Vue进行开发
【4月更文挑战第24天】TypeScript是JavaScript超集,提供类型注解等特性,提升代码质量和可维护性。Vue.js是一款高效前端框架,两者结合优化开发体验。本文指导如何配置和使用TypeScript与Vue:安装TypeScript和Vue CLI,创建Vue项目时选择TypeScript支持,配置`tsconfig.json`,编写`.tsx`组件,最后运行和构建项目。这种结合有助于错误检查和提升开发效率。
|
1月前
|
JavaScript 前端开发 开发者
Vue工具和生态系统: Vue.js和TypeScript可以一起使用吗?
【4月更文挑战第18天】Vue.js与TypeScript兼容,官方文档支持在Vue项目中集成TypeScript。TypeScript作为JavaScript超集,提供静态类型检查和面向对象编程,增强代码准确性和健壮性。使用TypeScript能提前发现潜在错误,提升代码可读性,支持接口和泛型,使数据结构和函数更灵活。然而,不是所有Vue插件都兼容TypeScript,可能需额外配置。推荐尝试在Vue项目中使用TypeScript以提升项目质量。
24 0
|
1月前
|
JavaScript 前端开发 数据可视化
前端开发使用 Vue 3 + TypeScript + Pinia + Element Plus + ECharts
前端开发使用 Vue 3 + TypeScript + Pinia + Element Plus + ECharts
60 0
|
1月前
|
JavaScript 前端开发
在Vue中使用TypeScript的常见问题有哪些?
在Vue中使用TypeScript的常见问题有哪些?
43 2
|
1月前
|
JavaScript 前端开发
在Vue中使用TypeScript的优缺点是什么?
在Vue中使用TypeScript的优缺点是什么?
32 0
|
1月前
|
JavaScript
在 Vue 中如何使用 TypeScript?
在 Vue 中如何使用 TypeScript?
18 0
|
1月前
|
JavaScript 安全 容器
Vue3 + setup + TypeScript: 构建现代、类型安全的Vue应用的关键技巧总结
当使用 setup 的时候,组件直接引入就可以了,不需要再自己手动注册