js 图片压缩和上传（base64转file）

// 文件上传成功
function compress(){
　　var file = document.getElementById('file_cw').files[0];
　　// 压缩图片需要的一些元素和对象
　　var reader = new FileReader(),
　　//创建一个img对象
　　img = new Image();
　　reader.readAsDataURL(file);
　　// 文件base64化，以便获知图片原始尺寸
　　reader.onload = function(e) {
　　　　img.src = e.target.result;
　　};


　　// base64地址图片加载完毕后执行
　　img.onload = function () {
　　　　// 缩放图片需要的canvas（也可以在DOM中直接定义canvas标签，这样就能把压缩完的图片不转base64也能直接显示出来）
　　　　var canvas = document.createElement('canvas');
　　　　var context = canvas.getContext('2d');

　　　　// 图片原始尺寸
　　　　var originWidth = this.width;
　　　　var originHeight = this.height;

　　　　// 最大尺寸限制，可通过设置宽高来实现图片压缩程度
　　　　var maxWidth = 1200,
　　　　maxHeight = 1200;
　　　　// 目标尺寸
　　　　var targetWidth = originWidth,
　　　　targetHeight = originHeight;
　　　　// 图片尺寸超过300x300的限制
　　　　if(originWidth > maxWidth || originHeight > maxHeight) {
　　　　　　if(originWidth / originHeight > maxWidth / maxHeight) {
　　　　　　　　// 更宽，按照宽度限定尺寸
　　　　　　　　targetWidth = maxWidth;
　　　　　　　　targetHeight = Math.round(maxWidth * (originHeight / originWidth));
　　　　　　} else {
　　　　　　　　targetHeight = maxHeight;
　　　　　　　　targetWidth = Math.round(maxHeight * (originWidth / originHeight));
　　　　　　}
　　　　}
　　　　// canvas对图片进行缩放
　　　　canvas.width = targetWidth;
　　　　canvas.height = targetHeight;
　　　　// 清除画布
　　　　context.clearRect(0, 0, targetWidth, targetHeight);
　　　　// 图片压缩
　　　　context.drawImage(img, 0, 0, targetWidth, targetHeight);
　　　　/*第一个参数是创建的img对象；第二三个参数是左上角坐标，后面两个是画布区域宽高*/

　　　　//压缩后的图片转base64 url
　　　　/*canvas.toDataURL(mimeType, qualityArgument),mimeType 默认值是'image/png';
　　　　* qualityArgument表示导出的图片质量，只有导出为jpeg和webp格式的时候此参数才有效，默认值是0.92*/
　　　　var newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式
　　　　//downLoad(newUrl,file["name"]);// 测试下载图片质量

　　　　//调用 base64 转 file文件
　　　　var blob = dataURLtoBlob(newUrl);

　　　　　　　 var aasfile = blobToFile(blob, file["name"]);
　　　　　　　 var aafile = new File([aasfile], file["name"], { type: file["type"] });

　　　　formData.append('file', aafile);
　　　　return
　　　　$.ajax({
　　　　　　url: "./upload.do",
　　　　　　type: "post",
　　　　　　data: formData,
　　　　　　async: false,
　　　　　　contentType: false,
　　　　　　processData: false,
　　　　　　dataType: "json",
　　　　　　mimeType: "multipart/form-data",
　　　　　　success: function (data) {
　　　　　　　　console.log(data);
　　　　　　　　js.showMessage("上传成功！");
　　　　　　}
　　　　});

　　};
}
// 测试下载图片质量
function downLoad(content,fileName){
　　var aEle = document.createElement("a");// 创建a标签
　　aEle.download = fileName;// 设置下载文件的文件名
　　aEle.href = content;
　　aEle.click();// 设置点击事件

}
//将base64转换为blob
function dataURLtoBlob(dataurl) { 
　　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 Blob([u8arr], { type: mime });
};
//将blob转换为file
function blobToFile(theBlob, fileName){
　　theBlob.lastModifiedDate = new Date();
　　theBlob.name = fileName;
　　return theBlob;
};