手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
2022/5/12 20:27:45
本文主要是介绍手把手教你实现一个图片压缩工具(Vue与Node的完美配合),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
前言
图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。
效果展示
原图片大小:82KB
压缩后的图片大小:17KB
测试
是不是特别good!!!看到上面的压缩后的图片,可能你还会质疑图片的清晰度,那么看下面(第一张图为压缩后的图片):
教程
这么好的工具,那我们来看看怎么用代码实现它。首先你可能需要一些Vue.js和Node.js的基础,另外你可能还需要一点对知识的渴望~ 哈哈哈。
话不多说,我们来上干货。
前台搭建
<template> <div class="face"> <label for="file" class="inputlabelBox"> <input type="file" ref="pic" id="file" name="face" accept="image/*" capture="camera" :style="{ display: 'none' }" @change="handleClick" /> <div class="upload">上传图片</div> </label> <div class="imgbox" v-show="imgsrc != ''"> <img src id="imgs" alt /> </div> <div> <p class="upload" @click="keepImg" v-show="imgsrc != ''">确定</p> </div> </div> </template> <script>
更多内容请见原文,原文转载自:https://blog.csdn.net/weixin_44519496/article/details/119116475
这篇关于手把手教你实现一个图片压缩工具(Vue与Node的完美配合)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist