在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
我们通常在做图片上传的时候都会遇上这样的情况,一是后端接口限制上传图片的大小,或者是即使后端没有限制大小,因为图片太大在前端渲染时太慢,造成页面加载体验较差。因此我们很有必要对上传的图片进行压缩。 本文在gitthub做了收录:github.com/Michael-lzg… 本文主要包括以下流程:
Input 标签来获取图片 通过设置 <input type="file" accept="image/*" onchange="loadFile(event)" FileReader
FileReader 对象允许 Web 应用程序异步读取存储在用户计算机上的文件(或原始数据缓冲区)的内容,使用 File 或 Blob 对象指定要读取的文件或数据。
在图片上传中,我们可以通过 <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 压缩图片 这是图片上传压缩的核心所在,我们先使用 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()
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 转化为文件
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 }) } 将图片上传到服务端 创建一个 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:在实际开发中,我们要不要把图片转化为 到此这篇关于浅析图片上传及canvas压缩的流程的文章就介绍到这了,更多相关图片上传canvas压缩内容请搜索极客世界以前的文章或继续浏览下面的相关文章,希望大家以后多多支持极客世界! |
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论