어떻게 .ajax를 사용하여 base64 인코딩으로 이미지를 게시할 수 있을까요?

저는 서버로 이미지를 업로드하는 일부 JavaScript 코드를 가지고 있습니다. 아래는 올바르게 작동하는 ajax 호출입니다.

$.ajax({
    url: 'https://api.projectoxford.ai/vision/v1/analyses?',
    type: 'POST',
    contentType: 'application/json',
    data: '{ Url: http://images.takungpao.com/2012/1115/20121115073901672.jpg }',
})

이제 이미지를 base64 인코딩으로 업로드해야 합니다. 예시:

data: 'data:image/jpeg;base64,/9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z'

하지만 작동하지 않습니다. 즉, 서버가 전송한 데이터를 인식하지 못하고 불평합니다.

AJAX 호출에서 base64 인코딩된 데이터를 보내기 위한 올바른 형식을 아시는 분 계신가요?

답변 1

makeblob = function (dataURL) {
            var BASE64_MARKER = ';base64,';
            if (dataURL.indexOf(BASE64_MARKER) == -1) {
                var parts = dataURL.split(',');
                var contentType = parts[0].split(':')[1];
                var raw = decodeURIComponent(parts[1]);
                return new Blob([raw], { type: contentType });
            }
            var parts = dataURL.split(BASE64_MARKER);
            var contentType = parts[0].split(':')[1];
            var raw = window.atob(parts[1]);
            var rawLength = raw.length;
            var uInt8Array = new Uint8Array(rawLength);
            for (var i = 0; i < rawLength; ++i) {
                uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array], { type: contentType });
        }

그리고 나서

$.ajax({
    url: 'https://api.projectoxford.ai/vision/v1/ocr?' + $.param(params),
    type: 'POST',
    processData: false,
    contentType: 'application/octet-stream',
    data: makeblob('data:image/jpeg;base64,9j/4AAQSkZJRgA..........gAooooAKKKKACiiigD//Z'
 })
.done(function(data) {alert(성공);})
.fail(function() {alert(에러);});

답변 2

이미지를 base64 인코딩하여 .ajax를 통해 게시하는 방법에 대해 알려드리겠습니다. 이를테면, 사이트 속도 및 사용자 경험 측면에서 중요한 요소입니다.
우선, base64 인코딩이란 이미지를 텍스트 형식으로 변환하는 방법입니다. 이를 통해 이미지 파일을 서버로 전송할 필요 없이 텍스트 형태로 인코딩하여 서버로 전송할 수 있습니다. 그리고 .ajax를 사용하면 업로드할 때 화면 전환 없이 비동기로 파일을 서버로 전송할 수 있으며, 이는 사용자 경험을 향상시킵니다.
다음은 이미지를 base64로 인코딩하고 .ajax를 통해 게시하는 방법입니다. 먼저, 이미지를 base64로 인코딩하는 JavaScript 함수를 작성해야 합니다. 이 함수를 사용하여 이미지를 인코딩하고, .ajax 메서드를 사용하여 서버에 전송합니다.
```javascript
function encodeImageToBase64(file, callback) {
var reader = new FileReader();
reader.onloadend = function() {
callback(reader.result);
}
reader.readAsDataURL(file);
}
$(#file-input).on(change, function() {
var file = this.files[0];
encodeImageToBase64(file, function(base64) {
$.ajax({
type: POST,
url: your-server-url,
data: { image: base64 },
success: function(response) {
console.log(Image uploaded successfully.);
},
error: function() {
console.log(Error uploading image.);
}
});
});
});
```
위의 코드에서 `#file-input`은 파일 업로드를 위한 입력 필드의 ID입니다. 사용자가 파일을 선택하면 `change` 이벤트가 발생하며, 선택한 이미지 파일이 `encodeImageToBase64` 함수로 전달됩니다. 이 함수는 파일을 base64로 인코딩한 후 콜백 함수에 결과를 전달합니다. 그런 다음 .ajax를 사용하여 서버에 인코딩된 이미지를 전송합니다.
이렇게 수정된 코드에서는 서버의 `your-server-url`에 이미지 데이터를 POST하는 방식으로 전송하는 예제입니다. 실제 서버 측 구현은 서버 플랫폼 및 언어에 따라 다를 수 있습니다. 이 부분은 개발자가 서버 측에서 이미지 데이터를 처리하고 저장하는 방식에 맞게 수정해야 합니다.
이와 같이 이미지를 base64로 인코딩하여 .ajax를 통해 게시하는 방법은 속도 및 사용자 경험을 향상시키는 효과적인 방법입니다. 사용자는 페이지 전환이 없이 이미지를 업로드할 수 있으며, 서버는 base64를 해독하여 이미지 파일을 처리합니다. 이로써 웹 페이지의 성능과 SEO에 긍정적인 영향을 미칠 수 있습니다.