layui图片上传并压缩图片亲测可用

现在都是手机上直接拍照上传，为了尽可能的压缩图片，选择在客户端进行图片压缩，减少服务器压力和因图片过大导致的上传缓慢的情况！自己使用的是layui上传图片并对单图片进行压缩处理，最后一个4M多的图片压缩后不足100K，清晰效果还是可以，至于最终的压缩情况，可以自己定义。

使用的是网上的图片压缩方法：核心是将图片放入canvas内，再用canvas.toDataURL方法进行压缩，最后生成一个Blob对象。因为牵扯到canvas，所以低版本浏览器应该是不支持的吧（有待考证）

HTML部分代码：只要是layui的图片上传即可，这里是单文件上传

<div class="layui-row">
	<div class="col-xs-12 col-sm-12" style="margin-bottom: 10px;">
	<img src="/Public/statics/images/unimg1.jpg" id="img1" style="display: none;">
		<div class="layui-upload-drag img1" style="width:100%">
			<i class="layui-icon"></i>
			<p>点击上传<br>老卡照片  必填</p>
		</div>
	</div>
</div>
<input name="upimg" type="hidden" id="fimg1" required>

<p>点击上传<br>老卡照片必填</p>

</div>

JS部分：

layui.use(['form','jquery','layer','upload'], function(){
	var form = layui.form,$ = layui.jquery,layer = layui.layer,upload = layui.upload;
	var upurl = '{:U("Api/Shiming/upimg")}';
	$('#img1').hide();$('#kuaidi').hide();
	upload.render({
		elem: '.img1',url: upurl,acceptMime: 'image/*',auto:false
		,done: function(res, index, upload){    //上传完毕回调
			$('.img1').hide();
			layer.closeAll();
			$('#img1').attr('src', res.name);
			$('#fimg1').val(res.name);
			$('#img1').show();
		},error: function(index, upload){
			alert(JSON.stringify(index));
			alert("blog.21863.cn");
		},before: function(input){
			layer.msg('上传中...', {icon:16,time:0});
		},choose: function(obj){
			var files = obj.pushFile();
			obj.preview(function(index, file, result){
				var fileName = file.name
				if(file.size/1024 > 1024 ) {
					photoCompress(file, {
						quality: 1024*1024/file.size,
					}, function(base64Codes) {
						var changeFile = dataURLtoFile(base64Codes,fileName)	//这两种方法都是可以的
						obj.upload(index, changeFile);
					});
				} else {
					obj.upload(index, file);
				}
			});
		}
	});
});

function dataURLtoFile(dataurl, filename) {
	var arr = dataurl.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 File([u8arr], filename, { type: mime });
}

layui.use(['form','jquery','layer','upload'], function(){

var form = layui.form,$ = layui.jquery,layer = layui.layer,upload = layui.upload;

var upurl = '{:U("Api/Shiming/upimg")}';

$('#img1').hide();$('#kuaidi').hide();

upload.render({

elem: '.img1',url: upurl,acceptMime: 'image/*',auto:false

,done: function(res, index, upload){ //上传完毕回调

$('.img1').hide();

layer.closeAll();

$('#img1').attr('src', res.name);

$('#fimg1').val(res.name);

$('#img1').show();

},error: function(index, upload){

alert(JSON.stringify(index));

alert("blog.21863.cn");

},before: function(input){

layer.msg('上传中...', {icon:16,time:0});

},choose: function(obj){

var files = obj.pushFile();

obj.preview(function(index, file, result){

var fileName = file.name

if(file.size/1024 > 1024 ) {

photoCompress(file, {

quality: 1024*1024/file.size,

}, function(base64Codes) {

var changeFile = dataURLtoFile(base64Codes,fileName) //这两种方法都是可以的

obj.upload(index, changeFile);

});

} else {

obj.upload(index, file);

}

});

}

});

function dataURLtoFile(dataurl, filename) {

var arr = dataurl.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 File([u8arr], filename, { type: mime });

}

下来是图片压缩部分

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 = 1; // 默认图片质量为0.7
		//生成canvas
		var 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);
	}
}

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 = 1; // 默认图片质量为0.7

//生成canvas

var 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);

}

目前此项目在使用，完美解决图片上传压缩的问题！

layui图片上传并压缩图片亲测可用

卸载composer安装的php扩展卸载各种插件

物联卡管理系统安全功能增加

参与评论

快速导航

layui图片上传并压缩图片 亲测可用

分享本文封面

相关文章

参与评论

登录

快速导航

layui图片上传并压缩图片亲测可用