Js+Canvas는 이미지 압축을 만듭니다.

이번에는 이미지 압축을 위한 Js+Canvas를 가져왔습니다. Js+Canvas를 사용한 이미지 압축 시 주의사항은 무엇인가요?

rreee

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

/* 
 * 图片压缩
 * 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");            
   img64 = canvas.toDataURL("image/jpeg", ratio);    
   return img64;
 }

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

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

모바일 단말기의 이미지 업로드를 위한 angularJS+Ionic(코드 포함)

Particles.js는 입자 동적 배경 애니메이션을 구현합니다

위 내용은 Js+Canvas는 이미지 압축을 만듭니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!