【前端】压缩图片以及图片相关概念

压缩图片思路

获得上传文件
上传文件类型为file 或者blod（这两个都是）
将file转成base64
base64压缩图片
base64转成file，判断大小，返回压缩后的图片大小

流程：
1.获得上传文件：

<input id="selectImage" type="file" onchange="selectImg(this)" accept="image/*"/>function selectImg(event) {var f = event.files[0];if (f==undefined) {return;}var name = f.name;var size=f.size;}

2.压缩图片

if (!file || !window.FileReader) return;
var image = new Image();
image.onload = function () {var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');ctx.clearRect(0, 0, canvas.width, canvas.height);canvas.width = image.width * nextQ; //nextQ取值范围0-1：图片质量canvas.height = image.height * nextQ;ctx.drawImage(image, 0, 0, canvas.width, canvas.height);var base64Codes = canvas.toDataURL(file.type, nextQ); };if (/^image/.test(file.type)) {// 创建一个readervar reader = new FileReader();// 将图片将转成 base64 格式reader.readAsDataURL(file);// 读取成功后的回调reader.onload = function () {image.src = this.result;}}

3.base64转成file，判断大小

var compressFile = self.dataUrlToFile(base64Codes, file.name.split('.')[0]);
var compressFileSize = compressFile.size;

ps:
1.input 的accept属性如果限制图片类型，可能导致某些安卓机没办法上传图片，上述写法可以解决问题

2.代码参考链接：js图片大小压缩到指定范围

自定义概念

大小：图片具体多少kb，占多少字节
尺寸：图片的高度和宽度
像素：图片尺寸的单位
分辨率：同尺寸

【前端】压缩图片以及图片相关概念相关推荐

vue：前端压缩图片上传
网上关于vue前端压缩图片后再上传到的代码很多,大家可以一试~ compressImage.js文件 // 压缩图片 export function compressImage({ file, con ...
前端方案（时间/图片/PWA/微信公众号/图片前端压缩/动画与过渡/新兴方案/屏幕适配）
时间时间戳(毫秒数)不分时区,即UTC时间所累积的毫秒数,UI必须获得时间戳或者UTC时间的字符串才能正确显示浏览器本地时间. 方案1.后台数据库存放本地时间,返回时间戳给UI. 后台数据库存放本地 ...
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例
前端压缩图片 -- vue项目使用localResizeIMG插件 -- 实例本博没有新的东西, 都是东拼西凑的. 但是, 组合出了个宝贝, 包括: 文件类型/宽高/大小的校验, 还有展示图片参照 ...
使用squoosh网的压缩方法实现浏览器前端压缩图片功能
假如说你做的网站有需要用户自定义上传图片的功能,那么往往这些图片,都需要进行压缩,且往往是需要经过服务器端压缩的.同时如果说你不懂图片压缩原理的话,你还得去花钱使用他人的API进行图片压缩(例如tin ...
一篇帮助前端小白理解 PNG 图片压缩原理
png??png的图片我们每天都在用,可是png到底是什么,它的压缩原理是什么? 很好,接下来我将会给大家一一阐述. 什么是PNG PNG的全称叫便携式网络图型(Portable Network Gr ...
【转】c# 图片压缩（非图片大小变化）----使得显示效果差点，但是图片占用空间需要变小
转自:http://bbs.csdn.net/topics/270043488 c# 图片压缩 (非图片大小变化)----使得显示效果差点,但是图片占用空间需要变小. [问题点数:60分,结帖人lin ...
前端加载超大图片(100M以上)实现秒开解决方案
前言前端加载超大图片时,一般可以采取以下措施实现加速: 图片压缩:将图片进行压缩可以大幅减小图片的大小,从而缩短加载时间.压缩图片时需要注意保持图片质量,以免影响图片显示效果. 图片分割:将超大图片 ...
前端加载大图片的解决方案汇总
前端加载大图时,我们一般可以采用如下方式进行加速: 图片压缩:将图片进行压缩,可以减小图片大小,从而缩短加载时间.但要注意图片质量,不要过分压缩导致图片失真. 图片分割:将超大图片分割成多个小图进行加 ...
前端开发中常用图片格式
前端开发中常用图片格式在我们的日常开发中.必不可少会使用很多种图片. 我们需要根据业务场景来选择所使用的图片类型. 这里我整理了一些常用图片类型.他们的优缺点以及建议的使用场景. 如何在计算机中显示 ...

【前端】压缩图片以及图片相关概念

【前端】压缩图片以及图片相关概念相关推荐

最新文章

热门文章