이미지를 jpg 각도로 변환 4

Question

웹 응용 프로그램에 TypeScript와 함께 Angular 4를 사용하고 있습니다. 사용자가 png, jpeg 또는 jpg 형식으로 썸네일 프로필 사진을 업로드 할 수 있도록 허용하고 있으며 해당 사진을 프론트 엔드의 jpg로 변환하고 싶습니다. 파일 형식이 읽기 전용이므로이 작업을 수행 할 방법을 찾고 있습니다.

내가 이렇게하는 이유는 사용자가 프로필 페이지를로드 할 때 페이지가 빠르기 때문에 큰 이미지를 다운로드 할 필요가 없기 때문입니다. 나는 jpg 로의 변환이 샘플 이미지로 테스트했을 때 이미지의 png가 35.4KB 였고 동일한 이미지의 변환 된 jpg가 6.7KB 였기 때문에 가장 좋은 방법이라고 생각합니다. 더 나은 해결책이 있다면, 나는 그것을 듣고 싶습니다!

미리 감사드립니다.

Answer 1

난 그냥 여기에 내가 무슨 짓을, 귀하의 요구 사항과 같은 몇 가지 코드를 작성 : FileReader에 의해

1. 부하 로컬 이미지를 만들의 onload 청취자 년 onload 이벤트에
2. 을 리스너를 추가에 " SRC "(데이터 URL 형식)
3. 가 생성"캔버스 "요소를,이 캔버스
4. 사용,678,444에 이미지를 그려"로드 된 이미지에 의해 속성 "이미지"new Image()에 의해 개체 및 설정 "SRC , Data URL 문자열의 캔버스 내용을 얻을 것이다 Canvas.toDataURL() 전화그리는
5. 는 후 서버

에 이미지 데이터를 게시 (base64로) 캔버스에 이미지를 변환 된 이미지 데이터를 가져 오기 위해, 그것은이다 점에 유의하시기 바랍니다 이미지 크기가 100 x 100이고 캔버스 크기가 50 x 50 인 경우와 같이 캔버스 데이터는 원본 이미지 데이터가 아닌 경우이 함수를 사용하여 50 x 50 픽셀의 이미지를 얻습니다. 따라서 전체 크기 이미지를 원하면 캔버스의 크기를 특정 크기로 조정해야합니다.

이 함수는 두 개의 파라미터 가지고

canvas.toDataURL (유형을 encoderOptions);

• 유형 - 이미지 형식을 나타내는 DOMString. 기본 형식 유형은 image/png입니다. 코드에서 이 "image/jpeg"로 설정된 경우
• encoderOptions - 요청한 유형이 image/jpeg 또는 image/webp 인 경우 이미지 품질을 나타내는 0과 1 사이의 숫자입니다. 나는 몇 가지 변수를 생략

  preview(input: HTMLInputElement) { 
       if (input.files.length) { 
        let reader = new FileReader(); 
        reader.onload = (e) => { 
         if (!this.img) { 
          this.img = new Image(); 
         } 
  
         this.img.src = (e.target as any).result; 
         this.img.onload =() => { 
          // omit code of setting 'dx', 'dy', 'width', 'height' 
          let ctx = <CanvasRenderingContext2D>this.canvas.nativeElement.getContext('2d'); 
          ctx.drawImage(this.img, dx, dy, width, height); 
  
          let dataUrl = (<HTMLCanvasElement>this.canvas.nativeElement).toDataURL('image/jpeg', 0.7); 
          this.uploadService.upload(dataUrl).then((resp: any) => { 
           if (resp.key) { 
            this.asset.image = resp.key; 
           } 
          }); 
         }; 
        } 
  
        reader.readAsDataURL(input.files[0]); 
       } 
      } 
  

  :

가 여기 내 참조 TypesScript에서 기능 쓰기를 "미리보기 및 업로드"입니다 위의 코드에서 dx, dx, width, height, 나는 클리핑 위해 (이미지 위치를 조정하기 위해 이러한 변수를 사용 목적).

function _elm(id) { 
 
    return document.getElementById(id); 
 
} 
 

 
_elm('fileInput').onchange= function(event) { 
 
    if (event.target.files.length) { 
 
    var fileReader = new FileReader(); 
 
    fileReader.onload = function(event) { 
 
     var img = new Image(); 
 
     img.src = event.target.result; 
 
     _elm('sizeRaw').innerText = '+ data-url size ' + event.target.result.length; 
 
     img.onload = function() { 
 
     var canvas = _elm('canvas'); 
 
     var context = canvas.getContext('2d'); 
 
     context.drawImage(img, 0, 0, 200, 200); 
 
     var dataUrl = canvas.toDataURL('image/jpeg', 0.5); 
 
     _elm('output').innerText = dataUrl; 
 
     _elm('sizeNew').innerText = '+ data-url size ' + dataUrl.length; 
 
     } 
 
    }; 
 
    fileReader.readAsDataURL(event.target.files[0]); 
 
    } 
 
};

#canvas { 
 
    border: 1px solid blue; 
 
} 
 

 
#output { 
 
    word-break: break-all; 
 
}

<h3>Input file <span id="sizeRaw"></span>: </h3> 
 
<input id="fileInput" type="file" accept="image/*"> 
 
<h3>Canvas</h3> 
 
<div> 
 
<canvas id="canvas" width="200" height="200"></canvas> 
 
</div> 
 
<h3>Output <span id="sizeNew"></span>: </h3> 
 
<div id="output"> 
 
</div>