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