图片压缩上传实例

前台图片上传压缩是一种常见的需求,可以通过前端技术实现图片的压缩,减小图片的大小,提高页面加载速度。以下是一个前台图片上传压缩的实例:

  1. 首先,在前端页面中添加一个文件上传的input标签:
复制代码

<input type="file" id="uploadInput">

  1. 使用JavaScript监听文件上传事件,并获取上传的图片文件:
复制代码

var uploadInput = document.getElementById('uploadInput'); uploadInput.addEventListener('change', function() { var file = uploadInput.files[0]; // 处理上传的图片文件 });

  1. 使用HTML5的Canvas元素进行图片压缩:
复制代码

var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); var img = new Image(); img.src = URL.createObjectURL(file); img.onload = function() { // 设置canvas的宽高 var maxWidth = 800; var maxHeight = 600; var width = img.width; var height = img.height; if (width > height) { if (width > maxWidth) { height *= maxWidth / width; width = maxWidth; } } else { if (height > maxHeight) { width *= maxHeight / height; height = maxHeight; } } canvas.width = width; canvas.height = height; // 绘制压缩后的图片到canvas ctx.drawImage(img, 0, 0, width, height); // 将canvas转换为DataURL格式的图片数据 var compressedDataUrl = canvas.toDataURL('image/jpeg', 0.8); // 处理压缩后的图片数据 };

  1. 最后,可以将压缩后的图片数据发送到服务器进行保存或其他操作。

这是一个简单的前台图片上传压缩实例,通过使用Canvas元素对图片进行压缩,可以减小图片的大小,提高页面加载速度。

相关推荐
Larry_Yanan2 小时前
QML学习笔记(三十四)QML的GroupBox、RadioButton
c++·笔记·qt·学习·ui
im_AMBER2 小时前
杂记 14
前端·笔记·学习·web
立志成为大牛的小牛3 小时前
数据结构——十七、线索二叉树找前驱与后继(王道408)
数据结构·笔记·学习·程序人生·考研·算法
张永清-老清3 小时前
每周读书与学习->初识JMeter 元件(五)
学习·jmeter·性能调优·jmeter性能测试·性能分析·干货分享·每周读书与学习
低音钢琴3 小时前
【从零开始构建性能测试体系-02】 Apache JMeter 取样器指南:从入门到精通
学习·jmeter·apache
im_AMBER4 小时前
Web 开发 27
前端·javascript·笔记·后端·学习·web
cimeo4 小时前
【C 学习】12.2-函数补充
学习·c#
微露清风5 小时前
系统性学习C++-第五讲-内存管理
java·c++·学习
小张的博客之旅7 小时前
2025年“羊城杯”网络安全大赛 线上初赛 (WriteUp)
python·学习·网络安全
~无忧花开~8 小时前
JavaScript学习笔记(二十八):JavaScript性能优化全攻略
开发语言·前端·javascript·笔记·学习·性能优化·js