jpg 이미지를 업로드하고 이미지의 크기를 조정 한 다음 mime of image/jpg로 base64로 변환

지금까지 작업 코드를 가지고 있지만 image로 base64로 이미지를 출력합니다/png. 대신 jpg로 캔버스를 설정하는 방법이 있습니까?jpg 이미지를 업로드하고 이미지의 크기를 조정 한 다음 mime of image/jpg로 base64로 변환

여기

에 StackOverflow

여기에 너희들의 도움으로 여러 게시물 덕분에 조립이 코드는 내 코드입니다 :

<!DOCTYPE html> 
    <html> 
    <head> 
    <style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
    </style> 
    </head> 
    <body> 
    <input type="file" id="input"/> 
    <br> 
     <canvas id="canvas" width=800 height=600></canvas> 
     <script type="text/javascript"> 
    var canvas=document.getElementById("canvas"); 
     var ctx=canvas.getContext("2d"); 
     var cw=canvas.width; 
     var ch=canvas.height; 


     var maxW=320; 
     var maxH=200; 

     var input = document.getElementById('input'); 
     input.addEventListener('change', handleFiles); 

     function handleFiles(e) { 
      var img = new Image; 
     img.onload = function() { 
      var iw=img.width; 
      var ih=img.height; 
      var scale=Math.min((maxW/iw),(maxH/ih)); 
      var iwScaled=iw*scale; 
      var ihScaled=ih*scale; 
      canvas.width=iwScaled; 
      canvas.height=ihScaled; 
      ctx.drawImage(img,0,0,iwScaled,ihScaled); 
      document.getElementById("base").value=canvas.toDataURL(); 
     } 
    img.src = URL.createObjectURL(e.target.files[0]); 
     } 
    </script> 
    <textarea cols="80" rows="50" id="base" name="img"></textarea> 

    </body> 
    </html>

출처

2017-11-25 drtechno

음

또는 그것은 브라우저에서 기본이고, 어떻게 든 img 태그에 MIME 형식을 통과해야? 귀하의 질문에 "자바"라는 태그가 붙지 만 JavaScript 코드가 표시됩니다. 잘못된 전문가가 질문을하는 것을 원하지 않으므로 태그를 추가하십시오. –

죄송합니다. 나는 자바 용어에 관해서는 좀 새로운 것이다. 나는 자바가 모든 종류의 맛이 있다고 생각한다. – drtechno

? 아니요, 가까이에 없습니다. Java와 JavaScript는 완전히 다른 언어이며, 햄은 햄버거와 거의 비슷합니다. –

잘 내가 좀 더 그것으로 바이올린을 켜는이 변경했습니다 base64 코드에 이미지/jpeg가 표시됩니다. 이상한 점은 textarea 태그를 img 태그로 변경하고 스크립트의 요소 ID를이 줄의 "value"에서 "src"로 변경하면 여전히 png로 저장하려고한다는 것입니다.

document.getElementById("base").value=canvas.toDataURL("image/jpeg");

"image/jpeg"를 추가하면 png 파일이 5K 씩 (다른 PNG와 비교하여) 낮춰졌지만 정확합니까? jpg에 저장하려고 시도해야합니까? , ... 자바 나 자바 스크립트

출처

2017-11-25 03:48:55 drtechno

jpg 이미지를 업로드하고 이미지의 크기를 조정 한 다음 mime of image/jpg로 base64로 변환

답변

관련 문제