js 압축 그림 의 예제(부피 만 줄 이 고 그림 크기 는 변경 하지 않 음)

본문 저자:Marydon
링크
1.상황 전시

위의 그림 에서 보 듯 이 사진 업로드 버튼 을 누 르 면 휴대 전화 카메라 촬영 기능 을 호출 한다. 
　　
우 리 는 현재 휴대 전화 사진 이 10MB 정도 되 고 부피 가 너무 크다 는 것 을 알 고 있다.서버 에 올 리 기 전에 그림 의 크기 만 줄 이 고 그림 의 사 이 즈 를 바 꾸 지 않 을 수 있 을 까?
2.원인 분석
canvas 를 통 해 그림 을 다시 그립 니 다. 
코드 표시:

/**
 *     
 * @explain   canvas       （canvas2DataURL）
 * @param base64Url base64        
 * @param imgAttr        、  、        
 * @param callback         ，        
 * @returns
 */
function photoCompress (base64Url, imgAttr, callback){
  var img = new Image();
  img.src = base64Url;
  img.onload = function(){
    var that = this;
    //        
    var w = that.width,
      h = that.height,
      //     
      scale = w / h;
    w = imgAttr.width || w;
    h = imgAttr.height || (w / scale);
    //        0.7
    var quality = 0.7;
    //  canvas
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    //       
    var anw = document.createAttribute("width");
    anw.nodeValue = w;
    canvas.setAttributeNode(anw);
    var anh = document.createAttribute("height");
    anh.nodeValue = h;
    canvas.setAttributeNode(anh);
    ctx.drawImage(that, 0, 0, w, h);
    //     （0-1）
    if(imgAttr.quality && imgAttr.quality <= 1 && imgAttr.quality > 0){
      quality = imgAttr.quality;
    }
    //         
    var imgType = imgAttr.type || 'image/jpeg';
    // quality   ，          
    var base64 = canvas.toDataURL(imgType, quality);
    //       base64  
    callback(base64);
  };
}　　　　

그림 의 질,그림 의 너비,높이 를 사용자 정의 로 설정 할 수 있 습 니 다(imgAttr 설정 을 통 해).　　
3.전체 예시

// js       
var fileObj = document.getElementById("file").files[0];
if (null == fileObj) {
  alert("      ，   ！");
}
//       
var reader = new FileReader();
//    base64（Blob   File  ）
reader.readAsDataURL(fileObj);
//     <=1MB，size   ：B（1Mb=1B*1024*1024）
if(fileObj.size/1024 <= 1024) {
  reader.onload = function(e) {
    //      base64
    var imgBase64 = e.target.result;
    //     base64     
    //       
    $.post(baseUrl + "/weixin/facein/upImg2.do",{imgBase64:imgBase64},function(resData){
      // TODO                 
    });
  };
} else {
  //     
  reader.onload = function(){
    //       base64Url
    var fileBase64 = this.result;
    //     
    var imgAttr = {quality : 0.2, type : 'img/jpeg'};
    //     
    var callBack = function (base64Codes) {
      //     
      //       
       
    };
    //     
    photoCompress(fileBase64,imgAttr,callBack);
  };
}

설명:
전단 에서 그림 을 다시 그 리 는 것 은 브 라 우 저 에 대한 요구 가 있 습 니 다.제 가 테스트 할 때 컴퓨터 쪽 에 문제 가 없 지만 위 챗 에서 사용 할 때 매우 힘 들 고 위 챗 의 qq 브 라 우 저 커 널 을 무 너 뜨 려 서 사용 할 수 없습니다.
안 됩 니 다.전단 에서 압축 하 겠 다 는 생각 을 버 리 고 그림 을 스 트림 으로 백 스테이지 에 제출 합 니 다https://www.cnblogs.com/Marydon20170307/p/11486511.html
보충:
그림 최적화 에 있어 서 다음 과 같은 몇 가지 측면 에서 시작 할 수 있 습 니 다.해상도 감소>압축 그림>chrome 은 webp 형식 을 사용 합 니 다.
마지막 에 쓰다
어떤 사내 가 글 에 오류 가 있 거나 더 많은 내용 을 보충 해 야 한 다 는 것 을 발견 하면 댓 글 을 환영 합 니 다!!
이상 은 js 압축 이미지 의 예제(부피 만 줄 이 고 그림 사 이 즈 를 바 꾸 지 않 음)의 상세 한 내용 입 니 다.js 압축 이미지 에 관 한 자 료 는 다른 관련 글 을 주목 하 십시오!