前端图片压缩并上传

一、简述

移动端压缩图片并上传主要用到filereader、canvas 以及 formdata 这三个h5的api。

整个过程概述为三步：
　　1、用户使用input file上传图片的时候，用filereader读取用户上传的图片数据（base64格式）
　　2、把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas.toDataURL对图片进行压缩
　　3、获取到压缩后的base64格式图片数据，转成二进制塞入formdata，再通过XmlHttpRequest提交formdata。

二、图片压缩上传

1、获取图片数据

监听input file元素的change事件，获取到上传的文件对象files，将类数组的files转成数组，然后进行遍历，处理每个file对象。

处理file对象时，判断文件类型是否为图片，如果不是则不作处理。若是图片就实例化一个filereader，以base64格式读取上传的文件数据，判断数据长度，如果大于1MB的图片就调用compress方法进行压缩。

fileElem.onchange = function() {
    if (!this.files.length) return false;

    var files = Array.prototype.slice.call(this.files);

    if (files.length > 6) {
        alert("最多同时只可上传6张图片");
        return false;
    }
	//遍历并处理文件对象
    files.forEach(function(file, i) {
        if (!/\/(?:jpeg|png)/i.test(file.type)) return;

		var li = document.createElement("li");
        li.innerHTML = '';
        $("#imgList").append($(li));
        
        var reader = new FileReader();
        reader.onload = function() {
            var result = this.result;
            var img = new Image();
            img.src = result;

            //如果图片大小小于1MB，则直接上传
            if (result.length <= 1024*1024) {
                $(li).css("background-image", "url(" + result + ")");
                img = null;
                upload(result, file.type, $(li));

                return false;
            }

            //图片加载完毕之后进行压缩，然后上传
            if (img.complete) {
                callback();
            } else {
                img.onload = callback;
            }

            function callback() {
                var data = compress(img);
                $(li).css("background-image", "url(" + data + ")");
                upload(data, file.type, $(li));
                img = null;
            }
        };

        reader.readAsDataURL(file);
    })
};

2、压缩图片

压缩图片并不是直接把图片绘制到canvas再调用一下toDataURL就行的。

在IOS中，canvas绘制图片是有两个限制的：
　　首先是图片的大小，如果图片大小超过两百万像素，是无法绘制到canvas上的，调用drawImage的时候不会报错，但是用toDataURL获取图片数据的时候获取到的是空的图片数据。
　　再者就是canvas的大小有限制，如果canvas的大小大于大概五百万像素（即宽高乘积）的时候，不仅图片画不出来，其他什么东西也都是画不出来的。

应对第一种限制，处理办法就是瓦片绘制。瓦片绘制是将图片分割成多块绘制到canvas上。

应对第二种限制，处理办法是对图片的宽高进行适当压缩，为了保险起见，上限要低于五百万像素。

如此一来就解决了IOS上的两种限制了。

除了上面所述的限制，还有两个坑，一个就是canvas的toDataURL是只能压缩jpg的，当用户上传的图片是png的话，就需要转成jpg，也就是统一用canvas.toDataURL(‘image/jpeg’, 压缩比) ， 类型统一设成jpeg，而压缩比（0~1）就自己控制了。

另一个就是如果是png转jpg，绘制到canvas上的时候，canvas存在透明区域的话，当转成jpg的时候透明区域会变成黑色，因为canvas的透明像素默认为rgba(0,0,0,0)，所以转成jpg就变成rgba(0,0,0,1)了，也就是透明背景会变成了黑色。解决办法就是绘制之前在canvas上铺一层白色的底色。

// 用于压缩图片的canvas
var canvas = document.createElement('canvas')
var ctx = canvas.getContext('2d')
// 瓦片canvas
var tCanvas = document.createElement('canvas')
var tctx = tCanvas.getContext('2d')

function compress(img) {
    var initSize = img.src.length;
    var width = img.width;
    var height = img.height;

    //如果图片大于四百万像素，计算压缩比并将大小压至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', 0.1);

    console.log('压缩前：' + initSize);
    console.log('压缩后：' + ndata.length);
    console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");

    tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
    return ndata;
}

3、图片上传

先将base64数据转成字符串，再实例化一个ArrayBuffer，然后将字符串以8位整型的格式传入ArrayBuffer，再通过BlobBuilder或者Blob对象，将8位整型的ArrayBuffer转成二进制对象blob，然后把blob对象append到formdata里，再通过ajax发送给后台即可。

//图片上传
function upload(basestr, type, $li) {
	//将base64的图片转成二进制对象
	var blob = b64toBlob(basestr, type);
	
    var xhr = new XMLHttpRequest();
    var formdata = new FormData();
    formdata.append('imgData, blob);

    xhr.open('post', '/imgUpload');

    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            console.log('上传成功：' + xhr.responseText);
        }
    };

    xhr.send(formdata);
}

//将base64的图片转成二进制对象
function b64toBlob (basestr, fileType)  {
	var text = window.atob(basestr.split(',')[1]);
	var ubuffer = new Uint8Array(text.length);
	for (var i = 0; i < text.length; i++) {
		ubuffer[i] = text.charCodeAt(i);
	}
	var Builder = window.WebKitBlobBuilder || window.MozBlobBuilder;
	var blob
	if (Builder) {
		var builder = new Builder();
		builder.append(ubuffer);
		blob = builder.getBlob(fileType);
	} else {
		blob = new window.Blob([ubuffer], {type: fileType});
	}
	return blob;
}

参考：https://www.cnblogs.com/plBlog/p/11572639.html