프로젝트에서 신분증 인식을 할 때 이미지를 base64 형식으로 인코딩하여 전송해야 하는데, 휴대폰으로 찍은 사진이 너무 크고, base64로 변환하는 것도 너무 아까워서 해결책을 찾았습니다.
관련된 지식 포인트 <!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <meta name=viewport content=width=device-width,initial-scale=1.0> <meta http-equiv=X-UA -호환 가능한 콘텐츠=ie=edge> <title>문서</title></head><body> <input type=file onchange=loadImg(this)> <hr> <div>800×449, 544KB</div> <img src= <hr> <div>400×224, 157KB</div> <canvas></canvas> <script> // 이미지 업로드 함수 loadImg(me) { let img = document.querySelector('img'); let cvs = document.querySelector('canvas'); me.files[0]; // 파일 객체 얻기 // 업로드된 이미지가 500KB보다 큰 경우에만 압축합니다. if (file && (file.size / 1024 > 500)) { let reader = new FileReader(); .readAsDataURL( file); // base64 인코딩으로 변환 reader.onload = function (e) { let naturalBase64 = e.target.result; 인코딩, 이것은 원본 이미지입니다. img.src = naturalBase64; img.onload = function () { let ratio = img.naturalWidth / img.naturalHeight; // 동일한 비율로 압축하기 위해 원본 이미지 비율을 가져옵니다. 너비 = 400; cvs .height = cvs.width / ratio; let ctx = cvs.getContext('2d'); ctx.drawImage(img, 0, 0, cvs.width, cvs.height); // 캔버스에 그리기 // 압축 후 새 이미지의 Base64 let zipBase64 = cvs.toDataURL() } } } </script> </body></html>렌더링
압축된 이미지 크기 정보다음은 기본 방법입니다. baseStr은 다음을 포함하는 완전한 Base64 인코딩입니다.
베이스64
암호:
function calcBase(baseStr){ var tag = 'base64,'; baseStr = baseStr.substring(baseStr.indexOf(tag)+tag.length) var eqTagIndex = baseStr.indexOf('='); 1?baseStr.substring(0,eqTagIndex):baseStr; var strLen = baseStr.length; - (strLen / 8) * 2; console.log(파일 크기: + (fileSize / 1024).toFixed(1) + 'KB');}위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.