JavaScript前端实现压缩图片功能

JavaScript前端实现压缩图片功能

    • 为什么要前端来压缩图片
    • 接下来看下详细步骤

为什么要前端来压缩图片

最近在做一个移动端h5上传图片的功能,本来这个功能并不复杂,只需要将图片文件通过axios传到服务端即可,但是考虑到现在手机设配的拍照功能十分强大,随便一张照片都能动辄五六兆,而服务端的要求是上传图片必须小于两兆,而且直接传这么大图片,带宽它也受不了,所以前端进行压缩图片就成了一个必要的环节。

压缩效果
在这里插入图片描述

首先介绍下压缩的大概流程

  • 通过原生的input标签拿到要上传的图片文件
  • 将图片文件转化成img元素标签
  • 在canvas上压缩绘制该HTMLImageElement
  • 将canvas绘制的图像转成blob文件
  • 最后将该blob文件传到服务端
  • 完成!

接下来看下详细步骤

考虑到文章和步骤的完整性,所以我会把每个细节都写出来,即使有些东西很基础。

1. 使用Input标签来获取图片文件资源

这一步大家应该最熟悉不过了吧,原生input标签,通过设置 type 属性为file来让用户可以选择文件,设置 accept 限制选择的文件类型,绑定onchange事件,来获取确认选择后的文件

	<input type="file" accept="image/*" />

点击控件,触发焦点,打开文件资源管理器,选中文件并确认后,会触发change事件,所以可以在change事件的回调中获取选中文件,它长这个样
在这里插入图片描述
2. 读取文件转成img标签元素

拿到图片文件后,先将其转成HTMLImageElement,也就是普通的img标签,具体要使用 FileReader构造函数。

先new出来一个img和fileReader的实例,通过fileReader的 readAsDataURL这个api,来读取图片文件,其返回值是一个编码后的base64的字符串,然后将这个字符串赋值给img的src属性上,这样就完成了图片文件到 HTMLImageElement的转化。

// 先new一个img和fileReader的实例
const img = new Image()
const reader = new FileReader() // 读取文件资源
reader.readAsDataURL(file) 
reader.onload = function(e){ img.src = e.target.result
}

转化的HTMLImageElement在这里插入图片描述
3. canvas压缩,核心步骤

拿到转化后的img元素后,先取出该元素的宽高度,这个宽高度就是实际图片文件的宽高度。

const { width: originWidth, height: originHeight } = img

然后定义一个最大限度的宽高度,如果超过这个限制宽高度,则进行等比例的缩放

// 最大尺寸限制
const maxWidth = 1000,maxHeihgt = 1000
// 需要压缩的目标尺寸
let targetWidth = originWidth, targetHeight = originHeight
// 等比例计算超过最大限制时缩放后的图片尺寸
if (originWidth > maxWidth || originHeight > maxHeight) {if (originWidth / originHeight > 1) {// 宽图片targetWidth = maxWidthtargetHeight = Math.round(maxWidth * (originHeight / originWidth))} else {// 高图片targetHeight = maxHeighttargetWidth = Math.round(maxHeight * (originWidth / originHeight))}
}

计算好将要压缩的尺寸后,创建canvas实例,设置canvas的宽高度为压缩计算后的尺寸,并将img绘制到上面

// 创建画布
const canvas = document.createElement('canvas')
const context = canvas.getContext('2d')// 设置宽高度为等同于要压缩图片的尺寸
canvas.width = targetWidth
canvas.height = targetHeight
context.clearRect(0, 0, targetWidth, targetHeight)
// 将img绘制到画布上
context.drawImage(img, 0, 0, targetWidth, targetHeight)

4. 转成blob文件

canvas绘制完成后,就可以使用 toBlob来将图像转成blob文件了,这个api接受三个入参

canvas.toBlob(callback, type, encoderOptions);

回调函数中可以得到转化后的blob文件,type为要转成的图片类型,默认png。

encoderOptions为当设置的图片格式为 image/jpeg 或者 image/webp 时用来指定图片展示质量。

所以如果我们只是要压缩jpg或者webp格式的图片的话,不需要进行第3部的操作,直接使用这个api,然后填入想要的质量参数就可以了。但实际上,我们还是要考虑多种的图片格式,因此很有必要使用第三部的过程。

转成的blob长这个样子
在这里插入图片描述

5. 将blob上传,大功告成。

完整的代码实现

因为整个过程中都存在着异步回调操作,所以我使用了async,实现异步代码的同步执行

// 压缩前将file转换成img对象
function readImg(file) {return new Promise((resolve, reject) => {const img = new Image()const reader = new FileReader()reader.onload = function(e) {img.src = e.target.result}reader.onerror = function(e) {reject(e)}reader.readAsDataURL(file)img.onload = function() {resolve(img)}img.onerror = function(e) {reject(e)}})
}
/*** 压缩图片*@param img 被压缩的img对象* @param type 压缩后转换的文件类型* @param mx 触发压缩的图片最大宽度限制* @param mh 触发压缩的图片最大高度限制*/
function compressImg(img, type, mx, mh) {return new Promise((resolve, reject) => {const canvas = document.createElement('canvas')const context = canvas.getContext('2d')const {width: originWidth,height: originHeight} = img// 最大尺寸限制const maxWidth = mxconst maxHeight = mh// 目标尺寸let targetWidth = originWidthlet targetHeight = originHeightif(originWidth > maxWidth || originHeight > maxHeight) {if(originWidth / originHeight > 1) {// 宽图片targetWidth = maxWidthtargetHeight = Math.round(maxWidth * (originHeight / originWidth))} else {// 高图片targetHeight = maxHeighttargetWidth = Math.round(maxHeight * (originWidth / originHeight))}}canvas.width = targetWidthcanvas.height = targetHeightcontext.clearRect(0, 0, targetWidth, targetHeight)// 图片绘制context.drawImage(img, 0, 0, targetWidth, targetHeight)canvas.toBlob(function(blob) {resolve(blob)}, type || 'image/png')})
}

大致执行过程,具体可根据需求,自行改动

async function upload(file) {const img = await readImg(file)const blob = await compressImg(img, file.type, 1000, 1000)const formData = new FormData()formData.append('file', blob, 'xxx.jpg')axios.post('http://xxx.com/api', formData)
}
upload(file).catch(e => console.log(e))

转载于:https://www.jb51.net/article/182078.htm

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://xiahunao.cn/news/143818.html

如若内容造成侵权/违法违规/事实不符,请联系瞎胡闹网进行投诉反馈,一经查实,立即删除!

相关文章

HTML实现纯前端压缩图片

演示 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>压缩图片</title> </head> <bo…

前端js实现canvas压缩图片并上传

一. 上传前压缩图片的好处 可以减少用户的等待时间&#xff0c;提升使用体验&#xff0c;目前手机拍摄的图片文件大小一般在几 M 左右&#xff0c;文件直接上传时会有卡顿现象。可以减少服务端的存储空间。再次回去图片资源是也可以快速的加载。虽然目前阿里云的 oss 有相对应…

JS前端图片压缩上传-纯js

JS前端图片压缩上传-纯js 最近在做一个手机端的图片上传&#xff0c;写了一个比较符合自己要求的方法&#xff0c;可供参考 在做这个功能模块时&#xff0c;我遇到了以下问题&#xff0c;都花费了大量时间&#xff1a; 1. 不知道怎么压缩图片&#xff0c;&#xff08;代码和…

JS前端图片压缩上传

JS前端图片压缩上传重点知识 最近在做一个手机端的图片上传&#xff0c;写了一个比较符合自己要求的方法&#xff0c;可供参考 在做这个功能模块时&#xff0c;我遇到了以下问题&#xff0c;都花费了大量时间&#xff1a; 1. 不知道怎么压缩图片&#xff0c;&#xff08;代码…

图片纯前端JS压缩的实现

一、功能体验 先看demo&#xff1a;使用canvas在前端压缩图片并上传demo 如下截图&#xff1a; 点击文件选择框&#xff0c;我们不妨选一张尺寸比较大的图片&#xff0c;例如下面这种2M多的钓鱼收获照&#xff1a; 于是图片歘歘歘地传上去了&#xff1a; 此时我们点击最终…

JavaScript 图像压缩

JavaScript 可以使用类似于 canvas 和 web workers 来实现图像压缩。 使用 canvas&#xff0c;可以将图像绘制到 canvas 上&#xff0c;然后使用 canvas 提供的 toBlob() 或 toDataURL() 方法将其转换为不同格式的图像。在这些方法中指定图像质量参数即可实现压缩。 使用 web…

英文论文(sci)解读复现【NO.11】一种先进的基于深度学习模型的植物病害检测:近期研究综述

此前出了目标检测算法改进专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读发表高水平学术期刊中的 SCI论文&a…

如何自己制作简历模板?简历在线制作的方法介绍

找工作时好看并有意义的简历是十分重要的事儿&#xff0c;如何制作一份出色的简历&#xff0c;在漫天的简历中脱颖而出呢&#xff1f;如何自己制作简历模板&#xff1f;今天七分简历--简历在线制作就来给大家介绍方法吧。 1.选用正确的简历模板 所谓正确的简历模板&#xff0c;…

怎么从手机上下载应聘简历模板?个人简历如何从手机做?

​当我们找工作时&#xff0c;一般都会先准备一份应聘简历&#xff0c;当我们投递简历或者面试时都会用到&#xff0c;那么如果想要用手机来制作一份简历时&#xff0c;该如何操作呢&#xff1f;想要制作简历&#xff0c;那么首先要下载一份自己喜欢的简历模板&#xff0c;会让…

手机怎么做个人简历?多行业简历模板自由选择

如何利用手机来制作简历呢&#xff1f;现在找工作的时候&#xff0c;大多会使用手机来查看各种招聘app软件的信息来选择自己喜欢的工作。那么为了能够更好的获取面试的机会&#xff0c;那么准备一份优质的个人简历是必不可少的&#xff0c;那么从手机上如何下载一个精美简历模板…

简历怎么制作?简历制作的步骤是什么?

制作简历最基础的工作就是先了解自己&#xff0c;知道自己的兴趣爱好和职业特长是什么&#xff0c;明确自己以后发展的方向&#xff0c;以此作为依据来制作简历。一份优秀的简历&#xff0c;一般分为以下6个部分。 1、基础信息 只需要介绍求职者的个人信息&#xff0c;如&…

简历编辑导出工具(类似wps简历助手)

目前支持简历的编辑&#xff0c;导出&#xff0c;模块化&#xff0c;顺序调整&#xff0c;导出样式选择&#xff0c;完成进度等功能&#xff0c;已经完全可以满足简历编辑的基本需求 在线体验地址&#xff1a;需要的可以私信我&#xff0c;避免网站被攻击 一.项目架构 前端&a…

wps怎么免费导出简历_WPS表格办公—一键添加简历模板

我们在利用WPS文字与Word文字进行日常办公时&#xff0c;经常需要输入各种各样文档&#xff0c;当我们毕业季需要面试的时候&#xff0c;一份干净简洁的简历就必不可少了&#xff0c;那么对于WPS小白来说&#xff0c;制作一份简历就太难了&#xff0c;没关系&#xff0c;WPS为大…

wps怎么免费导出简历_简历模板免费下载wps手机,简历模板免费下载wps可编辑

现在&#xff0c;无论您在哪里工作&#xff0c;都需要自己准备一份简历。履历代表一个人的形象。拥有良好的履历是踏脚石。只要您可以在一张简历中精简一下您的72种变化&#xff0c;就可以帮助您敲开雇主的门。如果您拥有出色的技能&#xff0c;却不知道如何向他人展示它&#…

WPS简历模板的图标怎么修改_个人简历模板集锦,简历自我评价怎么写?

个人简历是自己学习生活的简短集锦&#xff0c;也是求职者自我评价和认定的主要材料。它是一扇窗户&#xff0c;能使用人单位通过它了解到求职者的部分情况&#xff0c;也能激起用人单位与求职者进一步接触的浓厚兴趣。关注——简历通&#xff0c;海量模板任你挑选。如若求职者…

软件测试简历,别再做无用的简历了

简历是你进入面试的敲门砖&#xff0c;也是留给意向公司的第一印象&#xff0c;所以这个很重要&#xff0c;必须在这上面做足了文章&#xff0c;一份优秀的面试简历是整个面试成败的重中之重&#xff0c;我们会详细分析如何准备简历才能保证简历不被刷掉。 简历通常有这几部分…

求职简历这样写,轻松搞定面试官

如果你是从网上投的简历&#xff0c;那么必然会经过 HR 的筛选&#xff0c;一张简历 HR 可能也就花 10 秒钟看一下&#xff0c;就会决定你这一关是成功还是失败。 就算你通过了筛选&#xff0c;后面的面试中&#xff0c;面试官也会根据你的简历来判断你究竟是否值得他花费很多…

WPS简历模板的图标怎么修改_简历无话可说怎么办?复试、调剂简历模板分享!...

文 | 果哥 槟果考研原创(ID&#xff1a;bgky666) 小伙伴们&#xff0c;这段时间准备复试简历了吗&#xff1f;今天文章的内容是手把手教你制作复试简历&#xff0c;文末也给大家附了复试、调剂简历模板&#xff01; 1 复试简历内容 1 个人基本情况 主要包括&#xff1a;姓名、性…

如何用计算机制作个人简历,制作个人简历的模板(电脑个人简历制作步骤)

简历是我们求职过程中的一把钥匙&#xff0c;很多应届毕业生都做不好简历&#xff0c;那么今天就来教大家用Excel快速制作简历。 一、简历框架 打开Excel表格&#xff0c;选中7行23列&#xff0c;在【开始】选项卡下方&#xff0c;选择所有框线&#xff1b;然后点击【视图】&am…

计算机word简历制作教程,用word制作个人简历的方法

word中经常会被使用来制作个人简历&#xff0c;利用word制作个人简历具体该如何操作呢?下面是由学习啦小编分享的用word制作个人简历的方法&#xff0c;以供大家阅读和学习。 用word制作个人简历的方法(一) 步骤1&#xff1a;首先打开word&#xff0c;点击插入选项&#xff0c…