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

php中世界最好的语言
풀어 주다: 2018-04-17 11:33:29
원래의
1442명이 탐색했습니다.

이번에는 이미지 압축을 위한 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿