图片压缩上传实例

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

  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_Yanan35 分钟前
QML学习笔记(四十五)QML与C++交互:信号槽的双向实现
c++·笔记·qt·学习·ui·交互
Rock_yzh2 小时前
AI学习日记——PyTorch深度学习快速入门:神经网络构建与训练实战
人工智能·pytorch·python·深度学习·神经网络·学习
hello kitty w2 小时前
Python学习(10) ----- Python的继承
开发语言·python·学习
CandyU22 小时前
C++ 学习 —— 02 - 排序算法
c++·学习·排序算法
~无忧花开~2 小时前
CSS学习笔记(二):CSS动画核心属性全解析
开发语言·前端·css·笔记·学习·css3·动画
浮游本尊4 小时前
React 18.x 学习计划 - 第五天:React状态管理
前端·学习·react.js
baole9634 小时前
YOLOv4简单基础学习
学习·yolo·目标跟踪
Pluchon4 小时前
硅基计划5.0 MySQL 叁 E-R关系图&联合/多表查询&三大连接&子查询&合并查询
开发语言·数据库·学习·mysql
学工科的皮皮志^_^5 小时前
网口学习理解
经验分享·笔记·嵌入式硬件·学习·fpga开发·以太网
后端小张7 小时前
【鸿蒙开发手册】重生之我要学习鸿蒙HarmonyOS开发
开发语言·学习·华为·架构·harmonyos·鸿蒙·鸿蒙系统