클라이언트 측 base64에서 그림 만들기

Question

HttpRequest.request를 사용하여 base64 문자열에서 서버로 전송하는 방법은 무엇입니까?

예를 들어, 나는 다음과 같은 base64로 문자열이 있습니다

'데이터 : 이미지/JPEG, Base64로, iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4 // 8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg =='

대신을 보내는 내가 좋아하는 것을 jpeg를 서버에 게시 하시겠습니까? 가능한가?

Answer 1

바이트로 Base64로 변환
How to native convert string -> base64 and base64 -> string

업로드 바이너리 이미지로
Dart how to upload image
편집

클라이언트 (이 내가 클라이언트 부분을 찾기 위해이 서버 부분입니다) 코드 :

var request = new HttpRequest() 
    ..open("POST", 'http://yourdomain.com/yourservice') 
    ..overrideMimeType("image/your-imagetype") // might be that this doesn't work than use the next line 
    ..setRequestHeader("Content-Type", "image/your-imagetype") 
    ..onProgress.listen((e) => ...); 

    request 
    ..onReadyStateChange.listen((e) => ...) 
    ..onLoad.listen((e) => ...) 
    ..send(yourBinaryDataAsUint8List); 

이미지로 변환 :
을 나는 @DanFromGermany가에서 언급 한 바와 같이 How to load an image in Dart
도 Base64 png data to html5 canvas 참조 여기에 표시된 것처럼 당신이 코드에서 SRC로 생성 된 dataUrl을 사용하여 다음 How to upload a file in Dart?
여기 쇼 같은 dataURL을 만들 필요가 있다고 생각 그의 질문에 대한 의견.

List를 Uint8List로 변환해야 할 수도 있습니다.
자세한 정보가 필요하면 의견을 추가하십시오.

Answer 2

나는 서버 측에서 디코딩하는 것을 좋아하지만 어쨌든.

기본적으로 canvas.toDataUrl()에서 가져온 텍스트를 분할하고 Base64 텍스트를 이진 데이터로 변환 한 다음 서버로 보냅니다. "crypto"라이브러리에서 "CryptoUtils"를 사용하여 Base64를 처리하십시오. 적절한 http 서버로 테스트하지는 않았지만이 코드는 제대로 작동합니다.

// Draw an on-memory image. 
final CanvasElement canvas = document.createElement('canvas'); 
canvas.width = 256; 
canvas.height = 256; 
final CanvasRenderingContext2D context = canvas.getContext('2d'); 
final CanvasGradient gradient = context.createLinearGradient(0, 0, 0, canvas.height); 
gradient.addColorStop(0, "#1e4877"); 
gradient.addColorStop(0.5, "#4584b4"); 
context.fillStyle = gradient; 
context.fillRect(0, 0, canvas.width, canvas.height); 
context.beginPath(); 
context.moveTo(10, 10); 
context.lineTo(240, 240); 
context.lineWidth = 10; 
context.strokeStyle = '#ff0000'; 
context.stroke(); 

// Convert the image to data url 
final String dataUrl = canvas.toDataUrl('image/jpeg'); 
final String base64Text = dataUrl.split(',')[1]; 
final Uint8ClampedList base64Data = new Uint8ClampedList.fromList(
    CryptoUtils.base64StringToBytes(base64Text)); 

// Now send the base64 encoded data to the server. 
final HttpRequest request = new HttpRequest(); 
request 
    ..open("POST", 'http://yourdomain.com/postservice') 
    ..onReadyStateChange.listen((_) { 
    if (request.readyState == HttpRequest.DONE && 
     (request.status == 200 || request.status == 0)) { 
     // data saved OK. 
     print("onReadyStateChange: " + request.responseText); // output the response from the server 
    } 
    }) 
    ..onError.listen((_) { 
    print("onError: " + _.toString()); 
    }) 
    ..send(base64Data); 

는 여기 완전한 조각을 기록했다. https://gist.github.com/hyamamoto/9391477

Answer 3

블롭 변환 부분이 작동하지 않는 것을 발견했습니다 (더 이상?).

Blob createImageBlob(String dataUri) { 
    String byteString = window.atob(dataUri.split(',')[1]); 
    String mimeString = dataUri.split(',')[0].split(':')[1].split(';')[0]; 
    Uint8List arrayBuffer = new Uint8List(byteString.length); 
    Uint8List dataArray = new Uint8List.view(arrayBuffer.buffer); 
    for (var i = 0; i < byteString.length; i++) { 
    dataArray[i] = byteString.codeUnitAt(i); 
    } 
    Blob blob = new Blob([arrayBuffer], mimeString); 
    return blob; 
}