前端
文章平均质量分 64
小张Python1
这个作者很懒,什么都没留下…
展开
-
为了一键式构图,利用canvas做了一个海报生成器
说干就干,最快方式莫过于用代码构建一个网页,生成类似布局的海报生成器:用户只需提供所需图片以及文字(还需不要对上传图片数量进行限制),就可以生成对应的效果,并且提供海报一键下载入口,将目标渲染的页面效果转坏为图片方式保存在本地。,将网页中选定的区域页面 基于 DOM 进行“截图”,最终转化为 canvas 图像,然后依附于js IO 相关三方库,将对应图片保存到本地;这类操作对我来说,后面要处理的频率比较高,因此有了想把操作自动化的 idea。为一个下载库,目的是将canvas 图片下载到本地。原创 2024-09-14 11:25:40 · 307 阅读 · 0 评论 -
在 Next 中, ORM 框架 Prisma 使用
自动生成且类型安全的查询构建器,适用于 Nodex.js 和 TS;: 迁移系统,当项目 Model 结果或字段发生变化后,可以将数据自动映射到 DB ,进行对应更新GUI 界面,用于查看和编辑 DB 中的数据日常开发中最常用 为 Prisma Client ,Prisma 支持关系型数据库如MySQL、PostgreSQL,及非关系型数据库 MongoDB 等。原创 2024-02-09 20:57:09 · 920 阅读 · 0 评论 -
Vue3引入腾讯地图,点击坐标后实时获取经纬度
1,引入腾讯地图,需要借助腾讯地图提供的 SDK,先需要在腾讯地图开发平台添加应用,申请对应的调用 key凭证,开发平台地址:https://lbs.qq.com/dev/console/application/mine。2,找到Vue/Vue3 项目中的 index.html , 通过 script 标签 引入 腾讯地图 sdk。3,在组件中实现核心代码,渲染地图组件,原创 2023-10-14 15:26:39 · 2200 阅读 · 0 评论 -
Vue 中 KeepAlive 内置缓存使用
KeepAlive 是 vue 中的内置组件,当多个组件动态切换时可以对实例状态进行缓存,用法如下router-view 中定义了一个信号槽,来渲染跳转后的组件,将keep-alive标签封装在 组件的外面,即可实现路由跳转组件的缓存效果。原创 2023-10-09 21:36:53 · 837 阅读 · 0 评论 -
vue-img-cutter 实现图片裁剪[vue 组件库]
借助 vue-img-cutter 可以在网页端实现图片裁剪功能,最终功能效果如下:组件 npm 安装。原创 2023-10-06 19:06:06 · 1201 阅读 · 0 评论 -
[CSS案例二]—实现一个响应式网页,兼容PC移动端,ScrollReveal 增加动画
大家好,我是小张本期案例,用前端三件套实现一个简约的响应式布局网页,当屏幕分辨率自适应改变时网页布局会自动发生切换,网页布局同时兼容PC端和移动端,在普通PC屏幕下网页布局效果移动端网页布局:除了基础布局外,借助插件,在网页中加入了一些动画,例如网页首次打开时,左侧图标 由左向右 延迟 500ms 出现,透明度从 100 到 0;中间 标题和图片 由下向上延迟 400ms 出现,透明度从 100 到 0;原创 2023-05-28 07:46:51 · 1110 阅读 · 0 评论 -
[前端案例]用HTML、JS、CSS实现一个进度条,加上动画效果
进度条最终效果如下,上面是一个进度条进度,进度通过线条颜色来控制:蓝色表示已达到该进度,黑色表示未达到;下方是两个按钮来控制整体进度条的进度:点击Prev按钮减少进度,Next来增加进度;首先创建一个 index.html,补充页面中的标签元素</</</</</</</</</</</</</</</</</原创 2023-05-21 23:36:32 · 1843 阅读 · 0 评论