前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >手把手教你实现一个图片压缩工具(Vue与Node的完美配合)

手把手教你实现一个图片压缩工具(Vue与Node的完美配合)

作者头像
马克社区
发布于 2022-05-12 11:20:15
发布于 2022-05-12 11:20:15
31400
代码可运行
举报
文章被收录于专栏:高端IT高端IT
运行总次数:0
代码可运行

前言

图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。 效果展示 原图片大小:82KB

压缩后的图片大小:17KB

测试

是不是特别good!!!看到上面的压缩后的图片,可能你还会质疑图片的清晰度,那么看下面(第一张图为压缩后的图片):

教程

这么好的工具,那我们来看看怎么用代码实现它。首先你可能需要一些Vue.js和Node.js的基础,另外你可能还需要一点对知识的渴望~ 哈哈哈。

话不多说,我们来上干货。 前台搭建

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<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

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
图片压缩对于我们日常生活来讲,是非常实用的一项功能。有时我们会在在线图片压缩网站上进行压缩,有时会在电脑下软件进行压缩。那么我们能不能用前端的知识来自己实现一个图片压缩工具呢?答案是有的。
Vam的金豆之路
2021/12/01
8060
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
H5图片压缩与上传
现在手机用户拍照照片都十分巨大,1m-10m,而普通用户的上传带宽大概为100kb/s-1m/s,导致上传图片十分缓慢
仙士可
2019/12/19
2K0
H5图片压缩与上传
"图像瘦身术":Java借助Tinify轻松将4M图片压缩至1M
在当今的数字化时代,图片已成为网站、应用和社交媒体中不可或缺的元素。然而,大尺寸的图片不仅会增加页面或者客户端加载时间,还会占用大量的存储空间。为了解决这个问题,可以使用图片压缩工具来减小图片的尺寸,然后再将压缩后的图片上传至对象存储服务(如阿里云OSS)。本文将详细介绍如何利用Tinify压缩图片,并将其上传至OSS,重点介绍图片压缩实现方式。
小明爱吃火锅
2024/09/23
5350
​PNG图片压缩对比分析
随着版本的迭代,业务的增加,QQ音乐apk的大小已经超过25M,其中res目录占用的大小超过5.5M,所以提出了对安装包进行瘦身的技术需求。
QQ音乐技术团队
2018/02/01
10.1K0
​PNG图片压缩对比分析
手把手教你实现一个Vue无限级联树形表格(增删改)
平时我们可能在做项目时,会遇到一个业务逻辑。实现一个无限级联树形表格,什么叫做无限级联树形表格呢?就是下图所展示的内容,有一个祖元素,然后下面可能有很多子孙元素,你可以实现添加、编辑、删除这样几个功能。
马克社区
2022/05/11
1.5K0
localResizeIMG图片压缩上传 原
(adsbygoogle = window.adsbygoogle || []).push({});
tianyawhl
2019/04/04
1.4K0
localResizeIMG图片压缩上传
                                                                            原
Typecho增加评论图片
代码 // 评论图片 $CommentImg = new Typecho_Widget_Helper_Form_Element_Select(
小东东
2023/03/20
1K0
Typecho增加评论图片
《Nuxt.js 实战:从放弃到入门》三、超实用! 打造图片压缩神器
代码托管地址:https://github.com/outeasy/outeasy/releases/tag/v0.3
小码农薛尧
2025/02/20
860
《Nuxt.js 实战:从放弃到入门》三、超实用! 打造图片压缩神器
直播视频网站源码,多媒体图片压缩工具类
以上就是 直播视频网站源码,多媒体图片压缩工具类相关的代码,更多内容欢迎关注之后的文章
yunbaokeji柯基
2021/01/06
7490
直播视频网站源码,多媒体图片压缩工具类
图片上传预览插件制作思路及Demo分享
一旦选择的路径被改变就把图片上传至服务器,然后就返回图片在服务器端的地址,并且赋值到img元素上。
winty
2019/12/26
1.4K0
element ui 图片上传封装多张或单张
最近写了一个后台管理项目,发现每个后台项目都离不开上传图片,决定把上传图片做个封装,话不多说直接上代码!
前端小白@阿强
2020/08/11
2.4K0
Vue 图片上传组件(base64 版):vue-upload-imgs
vue-upload-imgs 上传组件保存的是图片的 base64 码,这是项目地址,欢迎关注。
谭光志
2020/09/28
1.1K0
vue.js + axios.js图片压缩处理并上传到服务器demo
点击查看效果 图片压缩原理 将图片重新画入一个canvas中。可设置最大宽度,再按图片宽高比例定义canvas画布的宽高。 完整代码demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>上传图片</title> <meta name="renderer" content="webkit"> <meta name="viewport" content="widt
别盯着我的名字看
2022/06/09
5.6K0
开发实例:后端Java和前端vue实现图片管理功能
2. 通过input[type=file]元素上传图片,使用element-ui的Upload组件进行封装。
用户1289394
2024/01/19
6960
开发实例:后端Java和前端vue实现图片管理功能
vue+vue-cropper实现上传剪裁图片以及上传时压缩图片
代码暂时都是从项目中抽出来的,只适合借鉴参考,等有时间再单独将这些功能单独写项目,欢迎大家提供更好用的方法或指出不足之处,一起进步。
conanma
2021/11/03
3.7K0
使用Vue封装一个实用的人脸识别组件
由于我们的电脑有的有摄像头,有的没有摄像头,所以我们需要根据不同的场景来封装这个组件。先放个图吧,大家可以看得更加直观一些。
Vam的金豆之路
2021/11/30
3.5K1
使用Vue封装一个实用的人脸识别组件
Nodejs实现图片的上传、压缩预览、定时删除。
这里我们用到的是koa框架,它可是继express框架之后又一个更富有表现力、更健壮的web框架。
Vam的金豆之路
2021/11/30
1.5K0
Nodejs实现图片的上传、压缩预览、定时删除。
如何用 JavaScript 制作一个好用又好玩的图片压缩工具
现在的设备发达了,图片拍下来动辄 5MB 10MB,单反相机歘欻欻一张经能达到 40MB,手机的内部储存也跟着很大,随便一个手机都 100G 。
独元殇
2023/03/21
9800
如何用 JavaScript 制作一个好用又好玩的图片压缩工具
移动商城第二篇(品牌管理模块)【文件上传、数据校验、CRUD】
添加品牌 在原型界面上,我们都是一些“死”数据,我们需要将数据库的记录代替这些“死”数据! 这里写图片描述 上传图片 服务端console对图片进行上传到我们的图片服务器上,而portal则访问的时候
Java3y
2018/04/02
1.6K0
移动商城第二篇(品牌管理模块)【文件上传、数据校验、CRUD】
Vue 图片压缩并上传至服务器
本文主要讲解基于 Vue + Vant ,实现移动端图片选择,并用 Canvas 压缩图片,最后上传至服务器。还会封装一个工具类,方便直接调用。
solocoder
2022/04/06
2.4K0
Vue 图片压缩并上传至服务器
推荐阅读
相关推荐
手把手教你实现一个图片压缩工具(Vue与Node的完美配合)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验