【jquery】通过降低图片的质量（或尺寸）压缩图片大小

生产上图片太大除了用户体验不好，上传等待时间过长，还可能会引发用户缓存丢失，导致必要参数缺失请求失败，或者超时引起的请求失败，查找资料，原理是经过一系列的转化过程file文件=》base64=》cavas=》blob=》file文件，关键在canvas生成时质量降低，也可以根据需求把canvas的尺寸也缩小，我的话是直接不改变图片的尺寸。还有一个关键点是，需要异步拿到压缩侯到文件，否则拿到是处理前到文件。代码如下

function compressImg(file) {var deferred = $.Deferred();var fileObj = file;if(file.size > 3 * 1024 * 1024){var reader = new FileReader()var name = fileObj.namereader.readAsDataURL(fileObj) //转base64reader.onload = function(e) {var image = new Image()image.src = e.target.resultimage.onload = function () {var canvas = document.createElement('canvas'), // 新建canvascontext = 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',0.86) // 压缩比例0.86，结果接近减小了一半var arr = data.split(','), mime = arr[0].match(/:(.*?);/)[1], // 转成blobbstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}var files = new File([u8arr], name, { type: mime }) // 转成filedeferred.resolve(files);}}}else{deferred.resolve(fileObj);}return deferred.promise();
}

【jquery】通过降低图片的质量（或尺寸）压缩图片大小相关推荐

js 压缩html 图片上传,js canvas 前端实现修改图片尺寸压缩图片大小
函数1:读取图片信息(主要是原使图片宽高) readImg(file) { return new Promise((resolve, reject) => { const img = new I ...
node 压缩图片_用图压批量压缩图片就这么简单
像平时很多情况都需要用到图片压缩,例如雷锋哥在公众号给大家发文,图片上传是有限制大小的,又或者文档/PPT里面的图片太大,导致传送麻烦,这时候就需要对图片进行压缩体积减少大小. 市面上图片压缩工具选择 ...
图片太大，怎么压缩图片大小？
图片太大,怎么压缩图片大小?我们知道图片被应用到生活的方方面面,所以我们经常会遇到因图片体积大半天打不开,或者是因为图片大好传送不过去.再或者因为图片太多内存不够等等情况,总之可能会带来很多我们预想不 ...
微信小程序之一本地图片处理--按屏幕尺寸插入图片
个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧.微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的 ...
微信小程序本地图片处理--按屏幕尺寸插入图片
个人感觉微信小程序的IDE用起来有时候不太方便,可能是之前用惯了Eclipse的原因吧.微信小程序的开发工具不支持直接将文件拷贝到目录下,所以首先要将图片文件导入到本地目录下,然后编写工具类获取屏幕的 ...
java等比压缩图片_java上传并压缩图片（等比例压缩或者原尺寸压缩）
先看效果: 原图:1.33M 处理后:27.4kb 关键代码; package codeGenerate.util; import java.awt.Color; import java.awt.Gr ...
node 压缩图片_为了你安全压缩图片我操碎了心
近期有几个用户询问压缩的都是证件照和扫码件图片,太美工具站是否安全?我如实的按本文末尾回答了.虽然本站去年底就发布并上线了不上传图片的压缩图片工具-自定义图片压缩,可以从技术上永久解决了私密.隐私图片 ...
如何使用python批量压缩图片_python利用Guetzli批量压缩图片
Google 又开源了,这次开源了一款图像算法工具 Guetzli.Guetzli,在瑞士德语中是"cookie(曲奇)"的意思,是一个针对数码图像和网页图像的 JPEG 编码器, ...
idea批量修改变量快捷键mac_使用Mac自带功能批量修改图片名称、类型和压缩图片大小...
Mac电脑自带的聚焦搜索功能已经很强大,可以快速准确的搜索电脑内的文件,但是从网上下载的文件,特别是一些图片文件都是一串数字组成的文件名,很难记忆和搜索,我们可以使用Mac自带的『自动操作』功能给图片 ...
如何使用python批量压缩图片_利用Python 批量压缩图片
方法一直接调整宽高先放参考资料:如何用Python智能批量压缩图片? import math from glob import glob from PIL import Image import ...

【jquery】通过降低图片的质量（或尺寸）压缩图片大小

【jquery】通过降低图片的质量（或尺寸）压缩图片大小相关推荐

最新文章

热门文章