有没有专门做花鸟鱼虫的网站,广告公司官网,网站方案模板,电子商务推广方式图片压缩在众多应用场景中扮演着至关重要的角色#xff0c;尤其是在客户端上传图片时。原始图片往往体积庞大#xff0c;直接上传不仅消耗大量带宽资源#xff0c;还可能导致上传速度缓慢#xff0c;严重影响用户体验。因此#xff0c;在图片上传至服务器前对其进行压缩处… 图片压缩在众多应用场景中扮演着至关重要的角色尤其是在客户端上传图片时。原始图片往往体积庞大直接上传不仅消耗大量带宽资源还可能导致上传速度缓慢严重影响用户体验。因此在图片上传至服务器前对其进行压缩处理成为了一项关键优化措施。通过压缩图片文件大小显著减小从而加快上传速度提升效率确保用户获得流畅无阻的使用体验特别是在网络条件不佳的情况下这一优化显得尤为重要。 简而言之图片压缩能有效解决大文件上传带来的带宽压力与时间成本问题是提高应用响应速度、增强用户满意度的有效手段。它通过对图片进行智能处理去除冗余数据在尽可能保持视觉质量的同时大幅缩减文件大小使得图片上传过程更加迅速高效进而优化整个应用的性能表现。 一、效果演示 二、程序代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js/scriptstylediv {text-align: center;}input {height: 50px;line-height: 50px;}/style
/headbodyinput idfile typefile acceptimage/*div压缩前的图片大小span idbeforeSize/spanpimg idbefore //p/divdiv压缩后的图片大小span idafterSize/spanpimg idafter //p/divscript$(#file).change(function () {const file this.files[0];$(#before).attr(src, URL.createObjectURL(file));$(#before).css({width: 500,height: auto});const fileSize file.size / 1024;$(#beforeSize).html(fileSize.toFixed(2) KB);if (!file) return;compressImage(file, 1, 0.7).then(base64 {$(#after).attr(src, base64);$(#after).css({width: 500,height: auto});const sizeInKB (base64.length * 3 / 4) / 1024;$(#afterSize).html(sizeInKB.toFixed(2) KB);});});function compressImage(file, maxWidth, quality) {return new Promise((resolve, reject) {const reader new FileReader();reader.onload function (e) {const img new Image();img.onload function () {const canvas document.createElement(canvas);const ctx canvas.getContext(2d);canvas.width img.width;canvas.height img.height;ctx.drawImage(img, 0, 0);resolve(canvas.toDataURL(image/jpeg, quality || 0.9));};img.src e.target.result;};reader.readAsDataURL(file);});}/script
/body/html
