캔버스 및 이미지 압축을 위한 샘플 코드

이전에 Canvas 이미지 처리에 대한 기사를 작성한 적이 있습니다. 오늘은 Canvas를 사용하여 이미지를 압축하는 방법에 대해 이야기하겠습니다.

다음에는 구체적인 예시를 들어 Canvas 이미지 압축의 구체적인 과정을 설명하겠습니다.

1. 로컬 파일 가져오기

 <!--HTML--><입력 유형=파일 ID=선택-img />

 // JSvar chooseImg = document.getElementById(choose-img); chooseImg.onchange = function(e){ var file = this.files[0] // ... (코드의 일부가 생략되어 다음에 표시됩니다. 순서는 아래 동일)};

매우 간단합니다. 파일 유형이 있는 버튼을 통해 로컬 파일을 가져오면 됩니다.

 <!--HTML--><div id=result></div>

 // JSvar result = document.getElementById(result); // 이미지 출력 결과를 표시하거나 오류 메시지를 표시하는 데 사용됩니다. if(/image/.test(file.type)){ // 파일 형식이 이미지인지 확인 // ... }else{ result.innerHTML = '<span style=color: red;>파일 형식이 잘못되었습니다! </span>';}

 var img = new Image(), // 원본 이미지를 배치할 이미지 객체 생성 reader = new FileReader();reader.readAsDataURL(file) // base64 형식으로 읽고 FileReader 객체의 result 속성에 저장합니다. reader .onload = function(){ img.src = this.result; Image 객체의 src에 있는 document.body.insertBefore(img,chooseImg)에 이미지 base64 문자열을 직접 할당합니다. // 파일 버튼 앞에 출력 이미지를 삽입합니다. img.onload = function(){ // ... }; };

 var canvas = document.createElement('canvas');canvas.width = img.clientWidth;canvas.height = img.clientHeight;var context = canvas.getContext('2d');

참고: 캔버스 크기는 입력 이미지의 너비 및 높이와 동일합니다.

 context.drawImage(img,0,0,canvas.width,canvas.height);

 <!--HTML-->이미지 압축률: <input id=rate type=number min=0 max=100 /> %

 // JSvar rate = document.getElementById(rate).value || 100; // 이미지 압축률을 입력합니다. 기본값은 100%입니다. var imgUrl = canvas.toDataURL(file.type,rate/100) // 첫 번째 매개변수는 출력 이미지 유형이고 두 번째는 압축률입니다. result.innerHTML = '압축 후: <img src='+ imgUrl +' />' // 결과에 압축된 이미지를 표시합니다. img.style.display = 'none' // 원본 이미지를 숨깁니다.

Canvas에 그린 이미지를 다시 base64 형식으로 출력합니다.

 <!--HTML-->이미지 압축 비율: <input id=rate type=number min=0 max=100 /> %<input type=file id=choose-img /><div id=result></div >

 // JSvar chooseImg = document.getElementById(choose-img), result = document.getElementById(result);chooseImg.onchange = function(e){ var file = this.files[0] if(/image/.test( file.type)){ var img = new Image(), reader = new FileReader(); reader.readAsDataURL(file); function(){ img.src = this.result; document.body.insertBefore(img,chooseImg); img.onload = function(){ var canvas = document.createElement('canvas'); ; canvas.height = img.clientHeight; var context = canvas.getContext('2d'); context.drawImage(img,0,0,canvas.width,canvas.height); var rate = document.getElementById(rate).value || 100; var imgUrl = canvas.toDataURL(file.type,rate/100); result.innerHTML = '압축 후: <img src='+ imgUrl +' />' result.style.display = 'block'; img.style.display = 'none' }; } else{ result.innerHTML = '<span style=color: red;>파일 형식이 잘못되었습니다! </span>' }};

테스트 결과 JPEG 형식의 이미지 압축 효과는 Canvas를 통해 가장 좋은 반면, PNG 압축 효과는 뚜렷하지 않고 때로는 더 커지는 것으로 나타났습니다.

위 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.