如何实现图片压缩上传的功能,方法是什么
Admin 2022-07-02 群英技术资讯 404 次浏览
我们通常在做图片上传的时候都会遇上这样的情况,一是后端接口限制上传图片的大小,或者是即使后端没有限制大小,因为图片太大在前端渲染时太慢,造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。
本文主要包括以下流程:
input
框选择图片FileReader
进行图片预览canvas
画布上canvas
画布的能力进行图片压缩Base64(DataURL)
格式的数据转换成Blob
对象进行上传Input 标签来获取图片
通过设置input
标签的type
属性为file
,来让用户可以选择文件,设置accept
限制选择的文件类型,绑定onchange
事件,来获取确认选择后的文件
<input type="file" accept="image/*" onchange="loadFile(event)"
FileReader
FileReader
是什么,我们先来看看官方文档的介绍
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
FileReader
常用的两个方法如下:
FileReader.onload
:处理load
事件。即该钩子在读取操作完成时触发,通过该钩子函数可以完成例如读取完图片后进行预览的操作,或读取完图片后对图片内容进行二次处理等操作。FileReader.readAsDataURL
:读取方法,并且读取完成后,result
属性将返回Data URL
格式(Base64 编码)的字符串,代表图片内容。在图片上传中,我们可以通过readAsDataURL()
方法进行了文件的读取,并且通过result
属性拿到了图片的Base64(DataURL)
格式的数据,然后通过该数据实现了图片预览的功能
<div class="container"> <input type="file" accept="image/*" onchange="loadFile(event)" /> </div> <script> const loadFile = function (event) { let file = event.target.files[0] const reader = new FileReader() reader.onload = function () { console.log(reader.result) ... } reader.readAsDataURL(file) } </script>
canvas 压缩图片
这是图片上传压缩的核心所在,我们先使用CanvasRenderingContext2D.drawImage()
方法将上传的图片文件在画布上绘制出来,再使用Canvas.toDataURL()
将画布上的图片信息转换成base64(DataURL)
格式的数据。
drawImage()
drawImage()
方法在画布上绘制图像、画布或视频。drawImage()
方法也能够绘制图像的某些部分,以及/或者增加或减少图像的尺寸。参数如下
var cas = document.querySelector('canvas') var ctx = cas.getContext('2d') // 先创建图片对象 var img = new Image() img.src = './images/1.jpg' // 图片加载完之后 img.onload = function () { ctx.drawImage(img, 206, 111, 32, 38, 100, 100, 32, 38) }
Canvas.toDataURl()
Canvas.toDataURl()
方法可以将canvas
画布上的信息转换为base64(DataURL)
格式的图像信息,纯字符的图片表示形式。该方法接收 2 个参数:
mimeType
(可选): 表示需要转换的图像的mimeType
类型。默认值是image/png
,还可以是image/jpeg
,image/webp
等。quailty
(可选):quality 表示转换的图片质量。范围是 0 到 1。图片的mimeType
需要是image/jpeg
或者image/webp
,其他mimeType
值无效。默认压缩质量是 0.92。var canvas = document.createElement('canvas') canvas.toDataURL("image/jpeg" 0.8)
到这里,我们先来上 canvas 压缩图片的代码
function compress(base64, quality, mimeType) { let canvas = document.createElement('canvas') let img = document.createElement('img') img.crossOrigin = 'anonymous' return new Promise((resolve, reject) => { img.src = base64 img.onload = () => { let targetWidth, targetHeight if (img.width > MAX_WIDTH) { targetWidth = MAX_WIDTH targetHeight = (img.height * MAX_WIDTH) / img.width } else { targetWidth = img.width targetHeight = img.height } canvas.width = targetWidth canvas.height = targetHeight let ctx = canvas.getContext('2d') ctx.clearRect(0, 0, targetWidth, targetHeight) // 清除画布 ctx.drawImage(img, 0, 0, canvas.width, canvas.height) let imageData = canvas.toDataURL(mimeType, quality / 100) resolve(imageData) } }) }
将 base64 转化为文件
window.atob
将base-64
字符串解码为binaryString
(二进制文本);binaryString
构造为multipart/form-data
格式;Uint8Array
将multipart
格式的二进制文本转换为ArrayBuffer
。function dataUrlToBlob(base64, mimeType) { let bytes = window.atob(base64.split(',')[1]) let ab = new ArrayBuffer(bytes.length) let ia = new Uint8Array(ab) for (let i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i) } return new Blob([ab], { type: mimeType }) }
将图片上传到服务端
创建一个FormData
,把blob
append 到FormData
里面请求服务端接口,提交图片
function uploadFile(url, blob) { let formData = new FormData() let request = new XMLHttpRequest() formData.append('image', blob) request.open('POST', url, true) request.send(formData) }
ps:在实际开发中,我们要不要把图片转化为FormData
形式上传到服务端,这就看具体的业务需要了。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
猜你喜欢
本文主要介绍了使用canvas仿Echarts实现金字塔图的实例代码,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
ss动画会被JS阻塞吗?对于这个问题,一些朋友不是很理解,其实css的动画部分是会被js阻塞的,不过transform的动画则不会受影响。下面我们通过示例来分析一下。
这篇文章主要介绍了html5移动端价格输入键盘的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
SVG是一种基于XML语法的图像格式,接下来通过本文给大家介绍HTML页面插入SVG的多种方式,通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
在css中,可以利用“margin-top”属性把表格往下移,该属性用于设置元素的上外边距,只需要给表格元素添加“margin-top:向下移动距离值;”样式,即可增加表格的上外边距,进而使表格元素向下移动。
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所有
增值电信经营许可证 : B1.B2-20140078 粤ICP备09006778号 域名注册商资质 粤 D3.1-20240008