首页 > 代码库 > js图片前端压缩多图上传(旋转其实已经好了只是手机端有问题要先压缩再旋转)

js图片前端压缩多图上传(旋转其实已经好了只是手机端有问题要先压缩再旋转)

  var filechooser = document.getElementById("choose");  //    用于压缩图片的canvas  var canvas = document.createElement("canvas");  var ctx = canvas.getContext(‘2d‘);  //    瓦片canvas  var tCanvas = document.createElement("canvas");  var tctx = tCanvas.getContext("2d");  var maxsize = 100 * 1024;  var Orientation = null;   $("#upload").on("click", function() {        filechooser.click();      })      .on("touchstart", function() {        $(this).addClass("touch")      })      .on("touchend", function() {        $(this).removeClass("touch")      });  filechooser.onchange = function() {    if (!this.files.length) return;    var files = Array.prototype.slice.call(this.files);    if (files.length > 9) {      alert("最多同时只可上传9张图片");      return;    }    files.forEach(function(file, i) {		      if (!/\/(?:jpeg|png|gif)/i.test(file.type)) return;	   EXIF.getData(file, function() {  		  		EXIF.getAllTags(this);   					Orientation = EXIF.getTag(this, ‘Orientation‘);  					});       var reader = new FileReader();      var li = document.createElement("li");//          获取图片大小      var size = file.size / 1024 > 1024 ? (~~(10 * file.size / 1024 / 1024)) / 10 + "MB" : ~~(file.size / 1024) + "KB";      li.innerHTML = ‘<div class="progress"><span></span></div><a href="javascript:void(0);" title="" data-index="‘+i+‘" onclick="delpic(‘+i+‘)"  ></a>‘;      $(".img-list").append($(li));      reader.onload = function() {        var result = this.result;        var img = new Image();        img.src = http://www.mamicode.com/result;"" && Orientation != 1){  				//alert(‘旋转处理‘);  								switch(Orientation){  					case 6://需要顺时针(向左)90度旋转  						//alert(‘需要顺左‘);						img.src = http://www.mamicode.com/rotateImg(img,‘left‘,canvas);  "background-image", "url(" + img.src + ")");						        //$(li).css("background-image", "url(" + result + ")");		$(li).css("background-size", "100% 100%");		$(li).attr(‘id‘,‘uploadImg_‘+i);        //如果图片大小小于100kb,则直接上传        if (result.length <= maxsize) {          //img = null;		  result = img.src;          upload(result, file.type, $(li),i);          return;        }//      图片加载完毕之后进行压缩,然后上传        if (img.complete) {          callback();        } else {          img.onload = callback;        }        function callback() {          var data = http://www.mamicode.com/compress(img);"#content"+i).remove();	$("#uploadImg_"+i).remove();}  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 = http://www.mamicode.com/canvas.toDataURL(‘image/jpeg‘, 0.1);"%");    tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;    return ndata;  }  //    图片上传,将base64的图片转成二进制对象,塞进formdata上传  function upload(basestr, type, $li,index) {    var text = window.atob(basestr.split(",")[1]);    var buffer = new Uint8Array(text.length);    var pecent = 0, loop = null;    for (var i = 0; i < text.length; i++) {      buffer[i] = text.charCodeAt(i);    }    var blob = getBlob([buffer], type);    var xhr = new XMLHttpRequest();    var formdata = http://www.mamicode.com/getFormData();"("+xhr.responseText+")");   		console.log(obj.path);        if(obj.iResult==1){						var html = ‘<input type="hidden" value="http://www.mamicode.com/‘+obj.path+‘" name="content[]" id="content‘+index+‘" >‘;			$("#photofile").append(html);		}else{			alert(‘上传失败‘);		}        var text = obj.iResult==1 ? ‘上传成功‘ : ‘上传失败‘;        //console.log(text + ‘:‘ + obj.path);		        clearInterval(loop);        //当收到该消息时上传完毕        $li.find(".progress ").animate({‘width‘: "100%"}, pecent < 95 ? 200 : 0, function() {          $(this).html(text);        });        if (!obj.path) return;        //$(".pic-list").append(‘<a href="http://www.mamicode.com/‘ + imagedata.path + ‘">‘ + imagedata.name + ‘(‘ + imagedata.size + ‘)<img src="http://www.mamicode.com/‘ + imagedata.path + ‘" /></a>‘);      }    };    //数据发送进度,前50%展示该进度    xhr.upload.addEventListener(‘progress‘, function(e) {      if (loop) return;      pecent = ~~(100 * e.loaded / e.total) / 2;      $li.find(".progress ").css(‘width‘, pecent + "%");      if (pecent == 50) {        mockProgress();      }    }, false);    //数据后50%用模拟进度    function mockProgress() {      if (loop) return;      loop = setInterval(function() {        pecent++;        $li.find(".progress").css(‘width‘, pecent + "%");        if (pecent == 99) {          clearInterval(loop);        }      }, 100)    }    xhr.send(formdata);  }  /**   * 获取blob对象的兼容性写法   * @param buffer   * @param format   * @returns {*}   */  function getBlob(buffer, format) {    try {      return new Blob(buffer, {type: format});    } catch (e) {      var bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder);      buffer.forEach(function(buf) {        bb.append(buf);      });      return bb.getBlob(format);    }  }  /**   * 获取formdata   */  function getFormData() {    var isNeedShim = ~navigator.userAgent.indexOf(‘Android‘)        && ~navigator.vendor.indexOf(‘Google‘)        && !~navigator.userAgent.indexOf(‘Chrome‘)        && navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534;    return isNeedShim ? new FormDataShim() : new FormData()  }  /**   * formdata 补丁, 给不支持formdata上传blob的android机打补丁   * @constructor   */  function FormDataShim() {    console.warn(‘using formdata shim‘);    var o = this,        parts = [],        boundary = Array(21).join(‘-‘) + (+new Date() * (1e16 * Math.random())).toString(36),        oldSend = XMLHttpRequest.prototype.send;    this.append = function(name, value, filename) {      parts.push(‘--‘ + boundary + ‘\r\nContent-Disposition: form-data; name="‘ + name + ‘"‘);      if (value instanceof Blob) {        parts.push(‘; filename="‘ + (filename || ‘blob‘) + ‘"\r\nContent-Type: ‘ + value.type + ‘\r\n\r\n‘);        parts.push(value);      }      else {        parts.push(‘\r\n\r\n‘ + value);      }      parts.push(‘\r\n‘);    };    // Override XHR send()    XMLHttpRequest.prototype.send = function(val) {      var fr,          data,          oXHR = this;      if (val === o) {        // Append the final boundary string        parts.push(‘--‘ + boundary + ‘--\r\n‘);        // Create the blob        data = http://www.mamicode.com/getBlob(parts);>

 

js图片前端压缩多图上传(旋转其实已经好了只是手机端有问题要先压缩再旋转)