JQuery와 아약스, 매우 큰 데이터베이스 64를 보내, 그 최적화 방법

Question

그래서, 내가 캡처를위한 스크립트를 웹캠에서 비디오를 가지고와 후와 GIF를 만들 :이 스크립트와 함께,

그래서, 내가 걸릴 blob object from webcam,이 BLOB를 base64로 인코딩하고 데이터를 내 img.src에 넣습니다.

그 후 jquery ajax를 사용하여이 데이터를 PHP로 보내야합니다.

base64data는 2 000 000 자처럼 매우 큽니다. 따라서 ajax 요청은 매우 길어 (20-50 초).

난 그냥 그런 식으로 데이터를 전송 :

var gif = $('.generated-img').attr('src').replace('data:image/gif;base64,', '');   
    gif = gif.match(/.{1,500000}/g); 
    $.ajax({ 
     type:"POST", 
     url: "/webcam/", 
     data: {image_gif:gif, crop_x:x, crop_y:y, crop_w:w, crop_h:h, gif:true}, 
     success: function() { 
      parent.$.fancybox.close(); 
     } 
    }); 

나는 500 000 자씩 여러 덩어리로 데이터를 중단해야합니다.

하지만 너무 오래 .... 어떻게 최적화 할 수 있습니까? 난 그냥 몇 가지 물건을 할 내 PHP 스크립트 에이 데이터를 검색 할 필요가 ...

Answer 1

나는 왜 당신이 그것을 분할해야 정확히 보이지 않는다; A가 비동기를 나타내는 AJAX를 사용한다는 아이디어는 백그라운드에서 큰 느린 작업을 할 수 있다는 것입니다.

하지만 정규 표현식을 사용하여 분할을 수행하는 대신 substr을 사용하여 분할합니다. 같은 (테스트하지, 그래서 상쇄 될 수있는 오류는 - 예를 들어, 당신은 + 1 또는 - 1 여기 저기해야 할 수도 있습니다) : /webcam/에서

var chunkSize = 500000; 
var chunkId = 0; 
var isLastChunk = false; 
for(var i = 0; i < gif.length; i += chunkSize) 
{ 
    var chunk; 
    if(gif.length > i + chunkSize) { 
     chunk = gif.substr(0, i, chunkSize); 
    } else { 
     chunk = gif.substr(0, i); 
     isLastChunk = true; 
    } 

    $.ajax({ 
     type:"POST", 
     url: "/webcam/", 
     data: { 
      chunk: chunk, chunkId: chunkId, isLastChunk: isLastChunk, 
      crop_x:x, crop_y:y, crop_w:w, crop_h:h, gif:true}, 
     success: function() { 
      // Chunk handled succesfully 
     } 
    }); 
} 

당신이 chunkId 및 isLastChunk을 확인할 수 있습니다.