js图片上传 压缩图片大小

2024-04-24 01:38

本文主要是介绍js图片上传 压缩图片大小,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

此demo为大于1M对图片进行压缩上传

若小于1M则原图上传,可以根据自己实际需求更改。

demo源码如下:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>XMLHttpRequest上传文件</title><script type="text/javascript">/*三个参数file:一个是文件(类型是图片格式),w:一个是文件压缩的后宽度,宽度越小,字节越小objDiv:一个是容器或者回调函数photoCompress()*/function photoCompress(file,w,objDiv){var ready=new FileReader();/*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ready.readAsDataURL(file);ready.onload=function(){var re=this.result;canvasDataURL(re,w,objDiv)}}function canvasDataURL(path, obj, callback){var img = new Image();img.src = path;img.onload = function(){var that = this;// 默认按比例压缩var w = that.width,h = that.height,scale = w / h;w = obj.width || w;h = obj.height || (w / scale);var quality = 0.7;  // 默认图片质量为0.7//生成canvasvar canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 创建属性节点var anw = document.createAttribute("width");anw.nodeValue = w;var anh = document.createAttribute("height");anh.nodeValue = h;canvas.setAttributeNode(anw);canvas.setAttributeNode(anh);ctx.drawImage(that, 0, 0, w, h);// 图像质量if(obj.quality && obj.quality <= 1 && obj.quality > 0){quality = obj.quality;}// quality值越小,所绘制出的图像越模糊var base64 = canvas.toDataURL('image/jpeg', quality);// 回调函数返回base64的值callback(base64);}}/*** 将以base64的图片url数据转换为Blob* @param urlData*            用url方式表示的base64图片数据*/function convertBase64UrlToBlob(urlData){var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while(n--){u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type:mime});}var xhr;//上传文件方法function UpladFile() {var fileObj = document.getElementById("file").files[0]; // js 获取文件对象var url = "后台图片上传接口"; // 接收上传文件的后台地址 var form = new FormData(); // FormData 对象if(fileObj.size/1024 > 1025) { //大于1M,进行压缩上传photoCompress(fileObj, {quality: 0.2}, function(base64Codes){//console.log("压缩后:" + base.length / 1024 + " " + base);var bl = convertBase64UrlToBlob(base64Codes);form.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象xhr = new XMLHttpRequest();  // XMLHttpRequest 对象xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。xhr.onload = uploadComplete; //请求完成xhr.onerror =  uploadFailed; //请求失败xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】xhr.upload.onloadstart = function(){//上传开始执行方法ot = new Date().getTime();   //设置上传开始时间oloaded = 0;//设置上传开始时,以上传的文件大小为0};xhr.send(form); //开始上传,发送form数据});}else{ //小于等于1M 原图上传form.append("file", fileObj); // 文件对象xhr = new XMLHttpRequest();  // XMLHttpRequest 对象xhr.open("post", url, true); //post方式,url为服务器请求地址,true 该参数规定请求是否异步处理。xhr.onload = uploadComplete; //请求完成xhr.onerror =  uploadFailed; //请求失败xhr.upload.onprogress = progressFunction;//【上传进度调用方法实现】xhr.upload.onloadstart = function(){//上传开始执行方法ot = new Date().getTime();   //设置上传开始时间oloaded = 0;//设置上传开始时,以上传的文件大小为0};xhr.send(form); //开始上传,发送form数据}}//上传成功响应function uploadComplete(evt) {//服务断接收完文件返回的结果var data = JSON.parse(evt.target.responseText);if(data.success) {alert("上传成功!");}else{alert("上传失败!");}}//上传失败function uploadFailed(evt) {alert("上传失败!");}//取消上传function cancleUploadFile(){xhr.abort();}//上传进度实现方法,上传过程中会频繁调用该方法function progressFunction(evt) {var progressBar = document.getElementById("progressBar");var percentageDiv = document.getElementById("percentage");// event.total是需要传输的总字节,event.loaded是已经传输的字节。如果event.lengthComputable不为真,则event.total等于0if (evt.lengthComputable) {//progressBar.max = evt.total;progressBar.value = evt.loaded;percentageDiv.innerHTML = Math.round(evt.loaded / evt.total * 100) + "%";}var time = document.getElementById("time");var nt = new Date().getTime();//获取当前时间var pertime = (nt-ot)/1000; //计算出上次调用该方法时到现在的时间差,单位为sot = new Date().getTime(); //重新赋值时间,用于下次计算var perload = evt.loaded - oloaded; //计算该分段上传的文件大小,单位boloaded = evt.loaded;//重新赋值已上传文件大小,用以下次计算//上传速度计算var speed = perload/pertime;//单位b/svar bspeed = speed;var units = 'b/s';//单位名称if(speed/1024>1){speed = speed/1024;units = 'k/s';}if(speed/1024>1){speed = speed/1024;units = 'M/s';}speed = speed.toFixed(1);//剩余时间var resttime = ((evt.total-evt.loaded)/bspeed).toFixed(1);time.innerHTML = ',速度:'+speed+units+',剩余时间:'+resttime+'s';if(bspeed==0) time.innerHTML = '上传已取消';}</script>
</head>
<body>
<progress id="progressBar" value="0" max="100" style="width: 300px;"></progress>
<span id="percentage"></span><span id="time"></span>
<br /><br />
<input type="file" id="file" name="myfile" accept="image/x-png, image/jpg, image/jpeg, image/gif"/>
<input type="button" onclick="UpladFile()" value="上传" />
<input type="button" onclick="cancleUploadFile()" value="取消" />
</body>
</html>

这篇关于js图片上传 压缩图片大小的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/930440

相关文章

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

Java实现数据库图片上传功能详解

《Java实现数据库图片上传功能详解》这篇文章主要为大家详细介绍了如何使用Java实现数据库图片上传功能,包含从数据库拿图片传递前端渲染,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1、前言2、数据库搭建&nbsChina编程p; 3、后端实现将图片存储进数据库4、后端实现从数据库取出图片给前端5、前端拿到

Python使用PIL库将PNG图片转换为ICO图标的示例代码

《Python使用PIL库将PNG图片转换为ICO图标的示例代码》在软件开发和网站设计中,ICO图标是一种常用的图像格式,特别适用于应用程序图标、网页收藏夹图标等场景,本文将介绍如何使用Python的... 目录引言准备工作代码解析实践操作结果展示结语引言在软件开发和网站设计中,ICO图标是一种常用的图像

SpringBoot集成图片验证码框架easy-captcha的详细过程

《SpringBoot集成图片验证码框架easy-captcha的详细过程》本文介绍了如何将Easy-Captcha框架集成到SpringBoot项目中,实现图片验证码功能,Easy-Captcha是... 目录SpringBoot集成图片验证码框架easy-captcha一、引言二、依赖三、代码1. Ea

Vue ElementUI中Upload组件批量上传的实现代码

《VueElementUI中Upload组件批量上传的实现代码》ElementUI中Upload组件批量上传通过获取upload组件的DOM、文件、上传地址和数据,封装uploadFiles方法,使... ElementUI中Upload组件如何批量上传首先就是upload组件 <el-upl

Node.js net模块的使用示例

《Node.jsnet模块的使用示例》本文主要介绍了Node.jsnet模块的使用示例,net模块支持TCP通信,处理TCP连接和数据传输,具有一定的参考价值,感兴趣的可以了解一下... 目录简介引入 net 模块核心概念TCP (传输控制协议)Socket服务器TCP 服务器创建基本服务器服务器配置选项服

mac安装nvm(node.js)多版本管理实践步骤

《mac安装nvm(node.js)多版本管理实践步骤》:本文主要介绍mac安装nvm(node.js)多版本管理的相关资料,NVM是一个用于管理多个Node.js版本的命令行工具,它允许开发者在... 目录NVM功能简介MAC安装实践一、下载nvm二、安装nvm三、安装node.js总结NVM功能简介N

如何使用CSS3实现波浪式图片墙

《如何使用CSS3实现波浪式图片墙》:本文主要介绍了如何使用CSS3的transform属性和动画技巧实现波浪式图片墙,通过设置图片的垂直偏移量,并使用动画使其周期性地改变位置,可以创建出动态且具有波浪效果的图片墙,同时,还强调了响应式设计的重要性,以确保图片墙在不同设备上都能良好显示,详细内容请阅读本文,希望能对你有所帮助...

Python脚本实现图片文件批量命名

《Python脚本实现图片文件批量命名》这篇文章主要为大家详细介绍了一个用python第三方库pillow写的批量处理图片命名的脚本,文中的示例代码讲解详细,感兴趣的小伙伴可以了解下... 目录前言源码批量处理图片尺寸脚本源码GUI界面源码打包成.exe可执行文件前言本文介绍一个用python第三方库pi

Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)

《Python爬虫selenium验证之中文识别点选+图片验证码案例(最新推荐)》本文介绍了如何使用Python和Selenium结合ddddocr库实现图片验证码的识别和点击功能,感兴趣的朋友一起看... 目录1.获取图片2.目标识别3.背景坐标识别3.1 ddddocr3.2 打码平台4.坐标点击5.图