javascript - 모바일에 이미지를 업로드하는 방법은 무엇입니까? , 업로드하기 전에 이미지를 특정 크기로 압축하시겠습니까?

모바일에서 사진을 어떻게 업로드하나요? , 업로드하기 전에 이미지를 특정 크기로 압축하시겠습니까?

답글 내용:

모바일에서 사진을 어떻게 업로드하나요? , 업로드하기 전에 이미지를 특정 크기로 압축하시겠습니까?

1. 비동기 업로드의 경우에도 직접 파일 업로드 방법을 사용하려면 HTML5의 FormData을 사용하면 됩니다. 구체적인 작업은 이 블로그를 참조하세요. http://www.cnblogs.com/lhb25/...

2. 사진을 비동기적으로 업로드하는 또 다른 방법이 있습니다. 먼저 이미지를 base64 문자열로 변환한 다음 서버에 base64 문자열을 제출한 후 특정 API를 사용하여 base64 문자열을 이미지 콘텐츠로 변환할 수 있습니다. 구체적인 구현 방법은 다음과 같습니다.

<code>var getObjectURL = function(file) {
        var url = null;   
        if (window.createObjectURL !== undefined) { // basic  
            url = window.createObjectURL(file);  
        } else if (window.URL !== undefined) { // mozilla(firefox)  
            url = window.URL.createObjectURL(file);  
        } else if (window.webkitURL !== undefined) { // webkit or chrome  
            url = window.webkitURL.createObjectURL(file);  
        }  
        return url;
    }</code>

getObjectURL 메소드는 들어오는 입력의 이미지 파일 객체를 임시 URL로 변환하는 데 사용되며 이 URL은 동일한 도메인에 속합니다.

<code>var converImgTobase64 = function(url, callback, outputFormat) {
        var canvas = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
            img = new Image;
        img.crossOrigin = 'Anonymous';
        img.onload = function(){
            canvas.height = img.height;
            canvas.width = img.width;
            ctx.drawImage(img,0,0);
            var dataURL = canvas.toDataURL(outputFormat || 'image/png');
            callback.call(this, dataURL);
            canvas = null; 
        };
        img.src = url;
    }</code>

converImgTobase64 방법은 위에서 얻은 URL을 canvasAPI를 통해 전달하고 이를 base64 문자열로 변환하는 것입니다. 참고로 이 URL은 동일한 도메인에 있어야 하며 도메인 간을 이동할 수 없으므로 getObjectURL 이 방법이 매우 필요합니다. .

예:

<code>var input = $("input[type=file]")[0],
    src = getObjectURL(input.files[0]);

converImgTobase64(src, function(base64Str) {
    //处理base64Str相关的callback，可以直接在这里发送ajax请求。
});
</code>

구성 요소의 이 부분에 대한 코드는 내 유틸리티 라이브러리 중 하나에 있습니다. 이를 참조하고 수정을 위한 제안을 제공해 주세요~~~https://github.com/zero-mo/Br...

또한 이미지 압축의 경우 canvas을 기반으로 한 작업을 시도해 볼 수 있습니다.
http://www.cnblogs.com/xiao-y...

다음은 이전 답변의 인용문입니다

IE과의 호환성을 고려하지 않는 경우 FileReader API을 사용하여 파일을 읽어 파일의 Base64 값을 얻을 수 있습니다.
img 태그를 사용하여 이미지를 직접 표시할 수 있습니다. 🎜> 그런 다음 일부 플러그인을 사용하여 이미지를 자른 다음 서버에 업로드하고 Base64 저장하세요.

https://developer.mozilla.org...

FileReader API 参考文档： http://www.jq22.com/jquery-in...
jQuery 剪裁图片插件(支持移动端)：

압축의 경우 크롭된 이미지의 크기는 당연히 원본 이미지보다 훨씬 작습니다

원래 질문 주소: https://segmentfault.com/q/10...

방금 쓴 글 :

https://segmentfault.com/a/11...

주로 네이티브 HTML5 파일 형식 선택을 사용하고, 플러그인을 사용하여 압축하고, 마지막으로 사용 플러그인의 FormData 출력을 직접 업로드합니다.