Js는 방법을 설명하기 위해 Canvas를 사용하여 이미지를 압축합니다.

아래 편집기에서는 JS를 사용하여 Canvas를 사용하여 이미지 압축 기능을 구현하는 방법에 대한 기사를 제공합니다. 편집자님이 꽤 좋다고 생각하셔서 지금 공유하고 모두에게 참고용으로 드리도록 하겠습니다. 에디터 따라가서 살펴볼까요

제가 최근 작업한 APP 프로젝트는 휴대폰으로 사진을 찍고 업로드하는 작업이에요. 휴대폰으로 찍은 사진은 대개 용량이 커서 업로드가 매우 느립니다. 이러한 이유로 업로드 기능을 최적화하려면 이미지를 압축해야 합니다. 구체적인 구현은 다음과 같습니다.

/* 
 * 图片压缩
 * img    原始图片
 * width   压缩后的宽度
 * height  压缩后的高度
 * ratio   压缩比率 
 */
 function compress(img, width, height, ratio) {        
   var canvas, ctx, img64;
        
   canvas = document.createElement('canvas');        
   canvas.width = width;
   canvas.height = height;
        
   ctx = canvas.getContext("2d");        
   ctx.drawImage(img, 0, 0, width, height);
        
   img64 = canvas.toDataURL("image/jpeg", ratio);
        
   return img64;
 }

위는 이미지 데이터를 base64 형식으로 반환하는 이미지 압축 함수입니다. 압축률 값(0~1 사이)이 클수록 화질이 좋아집니다. 이미지의 base64가 jpeg보다 훨씬 길기 때문에 이미지를 png 형식으로 변환하지 않는 것이 좋습니다. 실제 호출은 다음과 같습니다.

var image = new Image();
image.src = "/img/test.jpg";
      
image.onload = function(){
  var img64 = compress(image, 500, 400, 0.7);
  document.getElementById("test").src = img64;
}

참고: 압축 방법에 대한 호출과 이미지 src 할당은 이미지의 onload 방법에 배치되어야 합니다. 이미지가 로드된 후에만 할당을 위해 압축하고 base64로 변환할 수 있기 때문입니다. onload 메서드 외부에 배치하면 압축 코드가 유효하지 않거나 순수한 검정색 이미지가 생성될 수 있습니다.

위 내용은 Js는 방법을 설명하기 위해 Canvas를 사용하여 이미지를 압축합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!