이미지를 클라이언트 측 HTML에서 jpg로 변환 (자바 스크립트)

Question

사용자가 이미지 (입력)를 삽입하는 html 양식이 있습니다. 내 사용자는 고급 사용자가 아니므로 다양한 유형의 이미지 형식을 삽입 할 수 있습니다. 그러나, 나는 단지 사용자가 jpg/gif/png 파일을 보내길 원한다. 한 가지 옵션은 다른 파일 형식을 차단하는 것입니다. 그러나 클라이언트 측에서 파일을 변환 할 수 있다면 방황하고있었습니다 (매우 큰 파일을 보내지 않고 서버에서 변환하려고합니다). 따라서, 내가 생각할 수있는 유일한 방법은 javacript를 사용하는 것입니다.

그래서 어느 누구도 자바 스크립트에서 이미지 형식 변환을하는 방법을 알고 있습니까? 그리고이 이미지 결과를 html : input의 값으로 넣으시겠습니까?

감사합니다!

Answer 1

TL; DR은 :

이 이론적으로는 가능 수 있습니다 귀찮게하지 마,하지만 난 아주 강하게에 추천 할 것입니다. 사용자가 입력 한 URL을 참조하는 javadript Img 요소를 만들 수 있습니다. 그런 다음이 이미지를 HTML5 캔버스에 그릴 수 있습니다.

그러면 캔버스에있는 데이터에 수동으로 액세스하여 이미지를 적절한 형식으로 분석/변환 할 수 있습니다. 그런 다음이 Base64 또는 URL 인코딩을 서버에 보내면 이미지를 클라이언트에 반환 할 수 있습니다.

물론 이것은 완전히 미쳐야하고 이 아닌이 시도되어야합니다. 이 솔루션은 자바 스크립트에서 JPG 압축을 구현해야하는데 기술적으로 가능하지만 브라우저 제약 (예 : 속도)으로 인해 가능하지 않을 수 있습니다.

Answer 2

아니요. javascript는 바이너리 내용을 조작 할 수 없습니다.

Answer 3

그냥 불가능합니다.

이미지 조작을 수행 할 때 클라이언트 측 자바 스크립트 지원이 없습니다.

Internet Explorer, Firefox, Safari, Chrome 또는 Opera와 같은 시장에서 가장 널리 사용되는 웹 브라우저의 확장 성 API를 사용할 수 있지만 표준 Javascript 기반 솔루션은 아닙니다. 어쨌든, 그것은 클라이언트 측 솔루션이 될 것이며 이러한 API 지원 문서 조작 중 일부는 특정 CSS 클래스가있는 특정 HTML 요소에서 일종의 클릭을 처리 할 수 ​​있습니다.

Answer 4

(업로드하기 전에 Facebook 사진 업로드 애플릿이 미리 준비/크기 조정하는 것과 유사한 방식으로) Java 애플릿을 사용할 수 있지만 사용할 수있는 옵션은 많지 않습니다.

기본적으로 변환 클라이언트 측을 수행하는 것은 매우 어려울 것이지만 브라우저 플러그인을 사용하여 가능합니다. 자바 스크립트 만 사용하는 것은 불가능합니다. 그렇다고해도 여러 브라우저에서 다양한 구현이 이루어지기 때문에 위험 할 수 있습니다. 다른 솔루션은 제로 - 풋 프린트가되지 않습니다 (사용자는 자신의 컴퓨터에 의존성을 설치해야합니다).

가장 신뢰할 수있는 옵션은 사용 가능한 익숙한 기술로 서버 측 (Java에 익숙하면 Apache Batik 사용)을 수행하는 것입니다.

Answer 5

가능하지만 권장하지는 않습니다.

모바일에서 오는 이미지를 올바르게 회전 시키려면 먼저 exif 데이터를 가져와야합니다. 그런 다음 파일 형식을 확인하고 ajax를 통해 업로드 할 수있는 형식으로 변환해야합니다.이렇게하려면, 당신은 캔버스 객체의 "toDataURL"를 처리 할 수있는 브라우저가 필요합니다 : 파일을 일단

function supportsToDataURL() { 
    var c = document.createElement("canvas"); 
    var data = c.toDataURL("image/jpeg"); 
    return (data.indexOf("data:image/jpeg") == 0)   
} 

, 나는 megapix으로 렌더링하고자 : megapixel library

이미지를 수신 이 같은 온로드 이벤트 :

var img = new Image() 
img.onload = function() { 
    // do some stuff like rendering image to a canvas 
} 
var mpImg = new MegaPixImage(file); 
mpImg.render(img, { quality: 1, maxWidth: 1024 }); 

당신은 다음 캔버스에 이미지를 작성할 수

var canvas = document.createElement('canvas'), 
    ctx = canvas.getContext('2d'); 

canvas.width = sourceWidth; 
canvas.height = sourceHeight; 

ctx.drawImage(img, 0, 0, sourceWidth, sourceHeight); 
var url = canvas.toDataURL(); 
// or if you want a specific file type 
var jpeg = canvas.toDataURL("image/jpeg"); 
var png = canvas.toDataURL("image/png"); 

참고 : 일부 버전의 Android는 "toDataURL"을 지원하지만 전체 사양은 지원하지 않을 수 있습니다. 그들은 단지 png 등을 렌더링 할 수 있습니다. 이것은 이미지 렌더링에서 크로스 브라우저 호환성을 얻으려는 많은 문제 중 하나 일뿐입니다.

모바일 웹 앱을위한 이미지 자르기 및 조정 도구를 만드는 데 약 16 시간이 걸렸습니다. 쉬운 일이 아닙니다.

사용자가 파일을 선택하여 base64로 변환하고 아약스를 통해 업로드하도록하는 것이 더 좋은 해결책입니다. 그런 다음 물건을 서버 측으로 변환하고 (필요한 경우) 볼 수있는 사용자에게 다시 보낼 수 있습니다.

모바일 이미지 업로드를 허용하는 플러그인을 만들고 있습니다. 작업이 완료되면 여기에 링크를 넣어 드리겠습니다.

Answer 6

jimp-browser (아마도 WebWorkers에서)를 사용할 수 있습니다.

https://github.com/oliver-moran/jimp/tree/master/browser

이 라이브러리는 캔버스 따라서 예컨대 toDataUrl 방법에 의존되지 또한 iOS에서 더 큰 이미지에서도 작동합니다 ("알려진 문제"여기 http://caniuse.com/#search=toDataURL 참조).