집 > 기사 > 웹 프론트엔드 > JS의 이미지 압축 방법 요약

JS의 이미지 압축 방법 요약

韦小宝원래의: 2018-01-08 10:57:461585검색

이 글에서는 이미지를 동일한 비율로 압축하는 js 방법을 포함하여 JS의 이미지 압축 방법을 주로 소개합니다. js에 관심이 있는 친구들은 이 글을 참고하세요

먼저 우리에게 필요한 것이 무엇인지 생각해 보세요. 대부분의 경우 File 개체 를 압축한 다음 이를 File 개체로 변환하고 원격 이미지 서버에 전달해야 합니다. 때로는 base64 문자열 을 압축한 다음 이를 base64 문자열로 변환해야 합니다. 때로는 캔버스일 수도 있고, 이미지 개체일 수도 있고, 사진의 URL 주소일 수도 있습니다. 우리는 이를 압축하여 원격 위치에 업로드해야 한다고 Wang Er은 말했습니다. one Picture:

Alt text

2. Solution

위 그림과 같이 Wang Er은 JS에서 기본적으로 대부분의 파일 형식의 변환 및 압축을 다루는 총 7가지 방법을 작성했습니다.

1. urltoImage(url,fn)는 url 매개변수가 이미지의 URL에 전달되고 fn이 이미지 매개변수를 포함하는 콜백 메소드를 통해 필요한 이미지 객체를 로드합니다.

function urltoImage (url,fn){
  var img = new Image();
  img.src = url;
  img.onload = function(){
    fn(img);
  }
};

2.imagetoCanvas(image)는 Image 객체를 Canvas 유형 객체로 변환하며, 여기서 image 매개변수는 Image 객체에 전달됩니다. :

function imagetoCanvas(image){
  var cvs = document.createElement("canvas");
  var ctx = cvs.getContext(&#39;2d&#39;);
  cvs.width = image.width;
  cvs.height = image.height;
  ctx.drawImage(image, 0, 0, cvs.width, cvs.height);
  return cvs ;
};

3.canvasResizetoFile(canvas ,quality,fn)은 Canvas 객체를 Blob 유형 객체로 압축하고 변환합니다. 이미지 압축 품질을 나타내는 0-1의 숫자 유형입니다. fn은 Blob 개체의 매개 변수를 포함하는 콜백 메서드입니다. 코드는 다음과 같습니다.

function canvasResizetoFile(canvas,quality,fn){
  canvas.toBlob(function(blob) {
    fn(blob);
  },&#39;image/jpeg&#39;,quality);
};

여기서 Blob 개체는 유사한 원시 데이터를 나타냅니다. 파일 객체에. Blob은 반드시 JavaScript 기본 형식이 아닐 수도 있는 데이터를 나타냅니다. 파일 인터페이스는 Blob을 기반으로 하며 Blob의 기능을 상속하고 사용자 시스템의 파일을 지원하도록 확장합니다. 파일 유형으로 처리할 수 있습니다. 보다 구체적인 사용법은 MDN 문서

4를 참조하세요. canvasResizetoDataURL(canvas,quality)는 Canvas 개체를 캔버스 개체에 전달되는 dataURL 문자열로 압축합니다. ; 품질 매개변수는 이미지 압축 품질을 나타내는 숫자 유형으로 전달됩니다.

methods.canvasResizetoDataURL = function(canvas,quality){
  return canvas.toDataURL(&#39;image/jpeg&#39;,quality);
};

toDataURL API는 MDN 문서

5를 참조할 수 있습니다. (file,fn)은 파일(Blob) 유형 파일이 dataURL 문자열로 변환되며, 여기서 file 매개변수는 파일(Blob) 유형 파일로 전달됩니다. fn은 dataURL 문자열 매개변수를 포함하는 콜백 메소드입니다.

function filetoDataURL(file,fn){
  var reader = new FileReader();
  reader.onloadend = function(e){
    fn(e.target.result);
  };
  reader.readAsDataURL(file);
};

6 . dataURLtoImage(dataurl,fn)은 dataURL 문자열을 이미지 유형 파일로 변환합니다. 여기서 dataurl 매개변수는 dataURL 문자열로 전달되고 fn은 콜백 메서드입니다. 이미지 유형 파일의 매개변수를 포함하는 코드는 다음과 같습니다.

function dataURLtoImage(dataurl,fn){
  var img = new Image();
  img.onload = function() {
    fn(img);
  };
  img.src = dataurl;
};

7. dataURLtoFile(dataurl)은 dataURL 문자열을 Blob 유형 객체로 변환합니다. dataURL 문자열의 코드는 다음과 같습니다.

function dataURLtoFile(dataurl) {
  var arr = dataurl.split(&#39;,&#39;), 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});
};

3. 추가 캡슐화

File 객체를 압축한 다음 File 객체로 변환하는 데 일반적으로 사용되는 방법은 다음과 같습니다. 위 메소드를 다시 캡슐화할 수 있는데, 다음 코드를 참고하세요.

function fileResizetoFile(file,quality,fn){
  filetoDataURL (file,function(dataurl){
    dataURLtoImage(dataurl,function(image){
      canvasResizetoFile(imagetoCanvas(image),quality,fn);
    })
  })
}

그 중 file 매개변수는 A File(Blob) 유형의 파일로 전달되며, quality 매개변수는 0의 숫자 유형으로 전달됩니다. -1은 이미지 압축 품질을 나타냅니다. fn은 Blob 유형 파일의 매개변수를 포함하는 콜백 메소드입니다.

다음과 같이 작동합니다.

var file = document.getElementById(&#39;demo&#39;).files[0];
fileResizetoFile(file,0.6,function(res){
  console.log(res);
  //拿到res，做出你要上传的操作；
})

이 경우에는 위의 8가지 방법을 패키지화하여 github에 올려 놓으니 쉽게 이미지 압축 및 업로드가 가능합니다. 딱딱한.

ps: JS에서 이미지를 동일한 비율로 압축하는 방법을 살펴보겠습니다

function proDownImage(path,imgObj) { // 等比压缩图片工具 
  //var proMaxHeight = 185; 
  var proMaxHeight=300; 
  var proMaxWidth = 175; 
  var size = new Object();　 
  var image = new Image();　 
  image.src = path;　 
  image.attachEvent("onreadystatechange", 
  function() { // 当加载状态改变时执行此方法,因为img的加载有延迟 
    if (image.readyState == "complete") { // 当加载状态为完全结束时进入 
      if (image.width > 0 && image.height > 0) { 
        var ww = proMaxWidth / image.width; 
        var hh = proMaxHeight / image.height;　 
        var rate = (ww < hh) ? ww: hh; 
        if (rate <= 1) {　 
          alert("imgage width*rate is:" + image.width * rate); 
          size.width = image.width * rate; 
          size.height = image.height * rate; 
        } else { 
          alert("imgage width is:" + image.width);　　 
          size.width = image.width;　　 
          size.height = image.height;　　　 
        }　 
      } 
    } 
    imgObj.attr("width",size.width); 
    imgObj.attr("height",size.height); 
  }); 
}

Summary

위는 소개된 JS의 이미지 압축 방법입니다. 편집자 요약, 모두에게 도움이 되기를 바랍니다!

JS의 이미지 압축 방법 요약

관련 기사