image-conversion 图片压缩，vue

image-conversion ，vue，element

需求：需要用户上传图片时候，对大尺寸图片进行压缩，减小图片大小，减少服务器的压力。

用到的第三方插件image-conversion

文档： https://www.npmjs.com/package/image-conversion

1.安装

npm i image-conversion --save

2.引入,可以在main.js中全局引入，也可以在组件中引入。

我是在组件中引入的

import * as imageConversion from 'image-conversion'

3.使用,

上传组件使用的 el-upload组件，调用了 :before-upload="beforeAvatarUpload 方法。

压缩是 imageConversion.compressAccurately 这个语句。

<el-uploadclass="upload-demo"action="网址":on-preview="handlePreview":on-remove="handleRemove":on-success="hsuccess":before-remove="beforeRemove":before-upload="beforeAvatarUpload"multiple:limit="3":on-exceed="handleExceed":file-list="fileList"list-type="picture">


//图片上传前，进行图片校验beforeAvatarUpload(file) {// const isJPG = file.type === "image/jpeg/png";const isLt1M = (file.size / 1024 / 1024) * 10 < 6;// if (!isJPG) {//   this.$message.error("上传头像图片只能是 JPG 和 PNG 格式!");// }if (!isLt1M) {this.$message.warning("上传头像图片大小不能超过 600kb! 将进行压缩");let myImg = new Promise((resolve) => {// 压缩到500KB,这里的500就是要压缩的大小,可自定义imageConversion.compressAccurately(file, 500).then((res) => {resolve(res);});});console.log(myImg);return myImg;}return isLt1M;},

若是图片大小超过600kb,就提示用户，图片过大，将对图片进行压缩。然后调用压缩语句。
执行后，打印结果如图：

这是的 size，单位大小是字节，大小应该是500kb左右。

下载到电脑上以后，大小如图：

PS 图片格式是 PNG的，使用图片压缩的话，会背景透明部分会变成黑色。
其中一个解决思路，把图片透明背景转成白色，再进行压缩。
方法的话，可以参考这篇文章，我觉得写的挺好的 image-conversion库压缩png图片背景黑色问题解决 ——前端辣么菜

image-conversion 图片压缩，vue相关推荐

vue图片压缩image-conversion
vue图片压缩需求解决方式一.安装依赖二.根据图片URL进行压缩完整代码 1.将图片URL转为转为file 2.页面中使用三.上传文件时进行压缩需求根据图片的URL或者上传图片时将图片进 ...
移动端图片上传并生成图片（图片上传/图片压缩/图片绘制/Vue纯前端）
如今用户上传图片,生成图保存分享这些都是h5页面的基操了吧,十分常见,实际操作起来也是满满的技能点,其实也有很多兼容问题的坑. 下面是以vue+elementUI做的一套,有需要的直接拿去- 如果有对 ...
vue 打包时图片压缩
1.image-webpack-loader 是依赖于 imagemin-pngquant,则必须要按顺序安装 npm install imagemin-pngquant --save-dev npm ...
vue中前端实现图片压缩 file文件
项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下.(我已经拿到上传的file文件的前提下) 先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法将图片压缩的方法写到这 ...
vue lrz图片压缩插件
vue lrz图片压缩插件安装引入使用参考网站安装 npm i lrz -S 引入 // main.js 中引入 import lrz from 'lrz' 使用 methods: {aft ...
vue图片压缩不失真_图片压缩会失真？快试试这几个无损压缩神器。
前端通常在做网页的时候会出现图片加载慢的情况在这里我通常会将图片进行压缩但是通常情况下观众会认为图片压缩会出现失真的现象在这里我会向大家推荐几款图片压缩的工具基本上会实现无损压缩 1.T ...
基于vue + axios + lrz.js 微信端图片压缩上传
业务场景微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...
JS—图片压缩上传（单张）
*vue+webpack环境,这里的that指到vue实例 <input type="file" name="file" accept="ima ...
删除vue打包大小限制_压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)...
问题由于这次项目是在初学 Vue 之后的第一个正式项目,没有考虑到类似路由懒加载. 按需加载的问题 ,所以呢,也算是没经验. 到了这些天,项目写得差不多了,准备放到服务器测试,才发现这个问题. 优 ...