图片压缩上传实例

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

  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元素对图片进行压缩,可以减小图片的大小,提高页面加载速度。

相关推荐
LIN-JUN-WEI33 分钟前
[ESP32]VSCODE+ESP-IDF环境搭建及blink例程尝试(win10 win11均配置成功)
c语言·开发语言·ide·vscode·单片机·学习·编辑器
艾莉丝努力练剑2 小时前
【C语言】学习过程教训与经验杂谈:思想准备、知识回顾(三)
c语言·开发语言·数据结构·学习·算法
ZZZS05163 小时前
stack栈练习
c++·笔记·学习·算法·动态规划
位东风3 小时前
【c++学习记录】状态模式,实现一个登陆功能
c++·学习·状态模式
Star Curry3 小时前
【新手小白的嵌入式学习之路】-STM32的学习_GPIO 8种模式学习心得
stm32·嵌入式硬件·学习
AI视觉网奇4 小时前
rag学习笔记
笔记·学习
Feliz Da Vida6 小时前
[代码学习] c++ 通过H矩阵快速生成图像对应的mask
c++·学习
wuxuanok6 小时前
Web后端开发-Mybatis
java·开发语言·笔记·学习·mybatis
一切顺势而行7 小时前
vue总结2
学习
今天背单词了吗9808 小时前
算法学习笔记:11.冒泡排序——从原理到实战,涵盖 LeetCode 与考研 408 例题
java·学习·算法·排序算法·冒泡排序