使用compressorjs压缩图片,优化功能,压缩所有格式的图片
上一篇文章写的图片压缩功能只适用于
image/jpeg
和image/webp
图像。vue实现图片压缩,支持多文件上传时压缩图片(只能支持jpeg)_ZMJ_QQ的博客-CSDN博客在实际开发中常见的图片格式还有png以及ios中的heic图片格式,需要压缩所有格式的图片,因此可以先将图片格式转换成jpeg后再使用compressorjs压缩图片。
1、ConvertImage.js 将图片转成jpeg格式的
参考的博客 input file 上传图片及压缩_么灬名字的博客-CSDN博客_input上传压缩图片
该文章的方法直接调整canvas画布的 大小,但是该方法压缩出来的图片失真严重
(可能还有更简单的方法转换图片格式,如果有人知道可以给我留个链接,嘻嘻)
// 思路是创建一个图片,将file等于这个图片,然后创建一个canvas图层 ,将canvas等比例缩放,
//然后用canvas的drawImage将图片与canvas合起来,然后在把canvas的base64转成file即可
export default function ConvertImage(file) {return new Promise((resolve, reject) => {const fileName = file.name.substring(0, file.name.indexOf('.'));let reader = new FileReader(); //读取filereader.readAsDataURL(file);reader.onloadend = function (e) {let image = new Image() //新建一个img标签(还没嵌入DOM节点)image.src = e.target.result //将图片的路径设成file路径image.onload = function () {let canvas = document.createElement('canvas'),context = canvas.getContext('2d'),imageWidth = image.width, imageHeight = image.height,data = ''canvas.width = imageWidthcanvas.height = imageHeightcontext.drawImage(image, 0, 0, imageWidth, imageHeight)data = canvas.toDataURL('image/jpeg')var newfile = dataURLtoFile(data, fileName + '.jpeg');resolve(newfile)}}})
}
function dataURLtoFile(dataurl, filename) { // base64转file对象let arr = dataurl.split(','),mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, { type: mime }); //转成了jpeg格式
}
2、ImageCompressor.js 对图片进行压缩
import Compressor from 'compressorjs';
// 只能对jpeg格式的图片进行转换
/*** @param image 图片* @param backType 需要返回的类型blob,file* @param quality 图片压缩比 0-1,数字越小,图片压缩越小* @returns*/
export default function ImageCompressor(image, backType, quality) {return new Promise((resolve, reject) => {new Compressor(image, {quality: quality || 0.6,success(result) {let file = new File([result], image.name, { type: image.type })if (!backType || backType == 'blob') {resolve(result)} else if (backType == 'file') {resolve(file)} else {resolve(file)}},error(err) {console.log('图片压缩失败---->>>>>', err)reject(err)}})})
}
3、使用
如果图片不是jpeg格式的就先将文件转换,转换成功后在进行压缩
import ImageCompressor from '@/utils/ImageCompression';
import ConvertImage from '@/utils/ConvertImage';async getUrl(file) {this.isShowLoading = true;const formData = new FormData();for (let i = 0; i < file.length; i++) {let img = file[i];const fileType = img.name.substring(img.name.indexOf('.') + 1);// 判断文件是不是jpeg 不是jpeg的都转成jpeg if (!['jpeg', 'jpg'].includes(fileType)) {img = await ConvertImage(img); //转陈jpeg格式的file}let newImg = await ImageCompressor(img, 'file', 0.6); //图片压缩formData.append('file', newImg);}multipleFiles(formData).then((res) => {//axios上传。。。。。});},
使用compressorjs压缩图片,优化功能,压缩所有格式的图片相关推荐
- 图片优化技巧,如何做好SEO图片优化?
一般企业网站中除了文字就是图片展示在前台页面与用户进行交互,使用视频的还是比较少,其会拖慢整个网站的运行速度,所以我们做SEO填充网站内容主要就是文字和图片的优化,对于文字来说我们可以通过专业的原创文 ...
- vue项目,把图片文件流转为base64格式以图片形式展示在前端
问题描述 前台需要展示图片,期望后台直接返回图片地址,但是后台给的是的文件流而不是一个图片地址,需要把文件流转为base64的格式展示出来. 请求后台接口时,返回图片内容如下: 上图不是base64格 ...
- java 指针 地址压缩_JVM优化之压缩普通对象指针(CompressedOops)
通常64位JVM消耗的内存会比32位的大1.5倍,这是因为对象指针在64位架构下,长度会翻倍(更宽的寻址). 对于那些将要从32位平台移植到64位的应用来说,平白无辜多了1/2的内存占用,这是开发者不 ...
- java 压缩oop_JVM优化之压缩普通对象指针(CompressedOops)
通常64位JVM消耗的内存会比32位的大1.5倍,这是因为对象指针在64位架构下,长度会翻倍(更宽的寻址). 对于那些将要从32位平台移植到64位的应用来说,平白无辜多了1/2的内存占用,这是开发者不 ...
- android 图片查看功能吗,Android仿百度图片查看功能
我们知道,进入百度图片后,输入一个关键字后,首先看到的是很多缩略图,当我们点击某张缩略图时,我们就可以进入到大图显示页面,在大图显示页面,中包含了一个图片画廊,同时当前大图为刚刚我们点击的那张图片.现 ...
- 如何开启电脑的图片解锁功能和关闭电脑的图片解锁功能?
首先, 按WIN+I打开设置 选择"帐户" 在"帐户设置"里面, 选择"登录选项 Windows Hello.安全密钥.密码.动态锁" 选择 ...
- Python模块学习 - 用tinify模块压缩和优化图片
Python模块学习 - 用tinify模块压缩和优化图片 tinify模块 功能描述:TinyPNG和TinyJPG网站提供了压缩和优化.png和.jpg格式图片的功能.虽然可以很轻松地使用网页版进 ...
- [Python模块学习]用tinify模块压缩和优化图片
tinify模块 by: uizuizui 功能描述:TinyPNG和TinyJPG网站提供了压缩和优化.png和.jpg格式图片的功能.虽然可以很轻松地使用网页版进行操作,但是在搭建个人博客的时候, ...
- 前端图片压缩上传(压缩篇)
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
- Android:最全面详细的性能优化攻略(含内存优化、内存泄漏、绘制优化、布局优化、图片优化、APK优化、多线程优化、列表优化等)
前言:佛教中有一句话:初学者的心态,拥有初学者心态是件了不起的事情.真正的大师永远怀有一颗学徒的心. 一.概述 在Android中,性能优化是细分领域中最难且也是知识面涉及最深和最广的方向之一. 更快 ...
最新文章
- 【c语言】float强制转换为int类型
- 百度2011招聘笔试题+答案解析
- 关于spring mybateis 定义resultType=java.util.HashMap
- Equipment upload 不起作用的分析
- java类编写sql_用JavaBean编写SQL Server数据库连接类
- HDOJ 1047 Integer Inquiry
- c语言中结构体类型只有,C语言中main()函数不要返回结构体类型(求助)
- Uva 11178 Morley's Theorem 向量旋转+求直线交点
- svnant-不可映射字符编码
- Entity Framework 复杂类型
- 遗传算法的C语言代码
- win10下ctfmon.exe系统程序误删的解决方案
- 电影片段素材网,自媒体必备素材网站推荐,视频素材免费下载网站
- 九 Go语言之数据格式
- 紫书5-16UVa212
- java 鸡尾酒排序_java交换排序之鸡尾酒排序实现方法
- 洞悉物联网发展1000问之为什么虚拟现实技术将迎来春天?
- mysql 1032错误_3分钟解决MySQL 1032 主从错误
- Windows GDI 窗口与 Direct3D 屏幕截图
- ukf实测信号的预测 matlab,无迹卡尔曼滤波(UKF)在参数估计应用中迭代停滞问题
热门文章
- win10下不能连接CMCC
- 对标阿里P7.腾讯T3.年薪40W+架构师,所需技术整理的最全的大厂面试题.GitHub 5K标星(持续更新)
- 吴恩达深度学习笔记【2】
- dataset和data set的区别
- 安装app “ApplicationVerificationFailed”
- 大洋蛋...今天好累啊...倒数344....
- some方法 使用 意思
- 1958: 订火车票~
- 7.devtool快速参考
- Android+阿里云数据库,实现安卓云数据库