jquery 前端实现图片压缩和上传

手机端上传图片时，有时候图片会是一张比较大的图片，上传一张的大的图片会消耗比较大的资源影响效率，这个时候就需要对上传的图片进行压缩了。然而图片的压缩有很多种的实现方式，我这里主要是通过画布，拆分瓦片的形式来压缩图片。

（这个主要为个人笔记记录）

jquery的代码实现：

 //用于压缩图片的canvasvar canvas = document.createElement("canvas");var ctx = canvas.getContext('2d');// 瓦片canvasvar tCanvas = document.createElement("canvas");var tctx = tCanvas.getContext("2d");var maxsize = 100 * 1024;//使用canvas对大图片进行压缩function compress(img) {var initSize = img.src.length;var width = img.width;var height = img.height;var bili = 1;if(width>480){bili = 480/width;}else{if(height>640){bili = 640/height;}else{bili=1;}}//如果图片大于四百万像素，计算压缩比并将大小压至400万以下var ratio;if ((ratio = width * height / 4000000) > 1) {ratio = Math.sqrt(ratio);width /= ratio;height /= ratio;} else {ratio = 1;}canvas.width = width;canvas.height = height;// 铺底色ctx.fillStyle = "#fff";ctx.fillRect(0, 0, canvas.width, canvas.height);//如果图片像素大于100万则使用瓦片绘制var count;if ((count = width * height / 1000000) > 1) {count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片//计算每块瓦片的宽和高var nw = ~~(width / count);var nh = ~~(height / count);tCanvas.width = nw;tCanvas.height = nh;for (var i = 0; i < count; i++) {for (var j = 0; j < count; j++) {tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);}}} else {ctx.drawImage(img, 0, 0, width, height);}//进行最小压缩var ndata = canvas.toDataURL('image/jpeg', bili);tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;return ndata;}

html的代码:

.inputfilestyle{width:96%;height:2.4rem;cursor: pointer;font-size: 30px;outline: medium none;position: absolute;filter:alpha(opacity=0);-moz-opacity:0;opacity:0;z-index:9999;
}

上传多张图片的示例

<div class="card"><div class="card-header">照片</div><div class="card-content" style="display: none;" id="carddiv"><div class="card-content-inner"><div id="imgresultdiv"></div></div></div><div class="card-footer"><div class="content-block" style="width: 100%;"><div class="row" style="width: 100%;"><div class="col-100"><input type="file" id="imgchoose" accept="image/*" multiple class="inputfilestyle" οnclick="buttonclick();"><a href="#" class="button button-big button-fill button-blue">上传照片</a></div></div></div></div></div>
</div>

其jquery代码

var filechooser = document.getElementById("imgchoose");
var imagebase64Array = new Array();
var chooseflag = false;
var filelength = 0;
var checklength = 0;
function buttonclick(){filelength = 0;checklength = 0;
}
//删除照片
function deleteImg(num){var temp = new Array();for(var i=0;i<imagebase64Array.length;i++){if(i!=num){temp.push(imagebase64Array[i]);}}imagebase64Array = temp;showImg();
}
//显示照片
function showImg(){if(imagebase64Array.length){$("#imgresultdiv").html("");for(var i=0;i<imagebase64Array.length;i++){var tempstr = imagebase64Array[i];var html = '<div style="border: 1px solid #cccccc;"><table style="width: 100%;"><tr><td align="center" style="background-image: url(\'\')">'+'<img src="'+tempstr+'" width="98%" id="htzpimg'+i+'" name="htzpimg"/></td></tr></table>';html =html+'<div class="menu-btn" style="margin: 15px;"><a href="#" οnclick="deleteImg('+i+')">删除该照片</a></div></div>';$("#imgresultdiv").append(html);}$("#carddiv").show();}else{$("#imgresultdiv").html("");$("#carddiv").hide();}
}
filechooser.onchange = function () {$.showIndicator();if (!this.files.length){$.hideIndicator();return;}var files = Array.prototype.slice.call(this.files);/* if (files.length > 8) {$.hideIndicator();$.alert("最多同时只可上传8张图片");return null;}  */filelength = files.length;files.forEach(function(file, i) {if (!/\/(?:jpeg|png|gif|jpg)/i.test(file.type)) return;  //可以上传的图片格式为 .jpeg、.png、.gif、.jpgvar reader = new FileReader();//获取图片大小var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";reader.onload = function() {var result = this.result;var img = new Image();img.src = result;//如果图片大小小于100kb，则直接上传if (result.length <= maxsize) {img = null;$.hideIndicator();imagebase64Array.push(result);chooseflag = true;checklength = checklength+1;if(checklength==filelength){showImg();$("#imgchoose").val("");$.alert("选择图片成功！");}return ;}//图片加载完毕之后进行压缩，然后上传if (img.complete) {callback();} else {img.onload = callback;}function callback() {var data = compress(img);$.hideIndicator();imagebase64Array.push(data);chooseflag = true;checklength = htchecklength+1;if(checklength==filelength){showImg();$("#imgchoose").val("");$.alert("选择图片成功！");}img = null;}};reader.readAsDataURL(file);})
};

上传一张图片的示例

<div class="card"><div class="card-header">照片</div><div class="card-content" style="display: none;" id="imgdiv"><div class="card-content-inner"><div id="resultdiv"></div></div></div><div class="card-footer"><div class="content-block" style="width: 100%;"><div class="row" style="width: 100%;"><div class="col-100"><input type="file" id="imgchoose" accept="image/*" multiple  class="inputfilestyle"><a href="#" class="button button-big button-fill button-blue" οnclick="" id="shangchuanimg">上传照片</a></div></div></div></div>
</div>

对应的jquery

var filechooser = document.getElementById("imgchoose");
var imagebase64 = "";
var chooseflag = false;
//删除照片
function deleteshowImg(num){if(num==0){imagebase64 = "";chooseflag = false;$("#resultdiv").html("");$("#imgdiv").hide();$("#shangchuanimg").attr("onclick","");$("#shangchuanimg").html("上传照片");$("#imgchoose").val("");$("#imgchoose").show();}
}
//页面显示上传的图片
function showImg(num){if(num==0){ var html = '<table style="width: 100%;"><tr><td align="center" style="background-image: url(\'\')" >'+'<img src="'+imagebase64+'" width="98%" id="htzpimg'+num+'" name="htzpimg"/></td></tr></table>';$("#imgdiv").html(html);$("#shangchuanimg").attr("onclick","deleteshowImg("+num+")");$("#shangchuanimg").html("删除照片");$("#imgdiv").show();$("#imgchoose").hide();}
}
//图片上传
filechooser.onchange = function () {$.showIndicator();if (!this.files.length){ $.hideIndicator();return;}var files = Array.prototype.slice.call(this.files);if (files.length > 1) {$.hideIndicator();$.alert("最多同时只可选择1张图片");return ;}files.forEach(function(file, i) {if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;var reader = new FileReader();//获取图片大小var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";reader.onload = function() {var result = this.result;var img = new Image();img.src = result;//如果图片大小小于100kb，则直接上传if (result.length <= maxsize) {$.hideIndicator();img = null;$.alert("选择图片成功！");imagebase64 = result;chooseflag = true;showImg(0);return ;}//图片加载完毕之后进行压缩，然后上传if (img.complete) {callback();} else {img.onload = callback;}function callback() {var data = compress(img);$.hideIndicator();imagebase64 = data;chooseflag = true;showImg(0);$.alert("选择图片成功！");img = null;};reader.readAsDataURL(file);})
};

jquery 前端实现图片压缩和上传相关推荐

前端实现图片压缩上传功能
以移动端为例,在H5上传图片时,由于机型 / 网速 / 流量等限制,在低版本机型上经常会出现上传的图片太大导致上传很慢甚至崩溃的情况,所以需要对在某些情况下需要对上传的图片进行压缩上传. 以下以移动端 ...
web 前端图片优化之--图片压缩上传
移动前端-图片压缩上传实践此前有同事跟我聊过关于移动端用canvas压缩图片后再上传的功能,最近有了点空闲时间,所以就实践了一下.demo效果链接在文章底部贴出. 在做移动端图片上传的时候,用户传 ...
JS前端图片压缩上传
JS前端图片压缩上传重点知识最近在做一个手机端的图片上传,写了一个比较符合自己要求的方法,可供参考在做这个功能模块时,我遇到了以下问题,都花费了大量时间: 1. 不知道怎么压缩图片,(代码和方法) ...
前端获取图片压缩后上传给后台
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
移动前端—图片压缩上传实践
在做移动端图片上传的时候,用户传的都是手机本地图片,而本地图片一般都相对比较大,拿iphone6来说,平时拍很多图片都是一两M的,如果直接这样上传,那图片就太大了,如果用户用的是移动流量,完全把图片上 ...
前端图片压缩上传(纯js的质量压缩，非长宽压缩)
前端图片压缩上传(纯js的质量压缩,非长宽压缩) 此demo为大于1M对图片进行压缩上传若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下: <!DOCTYPE html> ...
前端图片压缩上传（压缩篇）
为什么说这是一篇比较适合小白的前端图片压缩文章呢?因为我也是一个刚工作半年的前端小白,最近接到了一个前端图片压缩上传的任务,通过各种百度博客完成了这项任务,但是任务完成后对各种技术细节却还不是特别理解 ...
基于Plupload的图片压缩上传
前言这里的上传工具基于JQuery.Plupload 传送门:Plupload官方.中文文档为什么要做图片压缩? 现在手机拍照都快10M了,但是有时候图片上传只要看得清楚就可以了,比如上传身份证2 ...
移动端实现图片压缩上传
移动端实现图片压缩上传目前来说,HTML5的各种新API都在移动端的webkit上得到了较好的实现.根据查看caniuse,本demo里使用到的FileReader.Blob.Formdata对象均 ...

jquery 前端实现图片压缩和上传

jquery 前端实现图片压缩和上传相关推荐

最新文章

热门文章