2013-12-22 2 views
5

좋아, 크기가 조정 된 캔버스 이미지를 Flask에 파일로 업로드하려고합니다.캔버스를 이미지로 변환하여 플라스크에 업로드하는 방법은 무엇입니까?

먼저 canvas.toDataURL()을 사용하여 base64 (?) 문자열로 변환 한 다음 AJAX가있는 formdata을 사용하여 이미지로 업로드하려고 시도했습니다. 내가 사용하는 아약스 양식

function toblob(stuff) { 
    var g, type, bi, ab, ua, b, i; 
    g = stuff.split(','); 
    if (g[0].split('png')[1]) 
     type = 'png'; 
    else if (g[0].split('jpeg')[1]) 
     type = 'jpeg'; 
    else 
     return false; 
    bi = atob(g[1]); 
    ab = new ArrayBuffer(bi.length); 
    ua = new Uint8Array(ab); 
    for (i = 0; i < bi.length; i++) { 
     ua[i] = bi.charCodeAt(i); 
    } 
    b = new Blob([ua], { 
     type: "image/" + type 
    }); 
    return b; 
} 

없는 이미지 ... 여기

것 :

은 그 때 나는이 기능을 사용하여 BLOB에 base64로 변환 시도 Heres는

s = new FormData(); 
s.append('image', toblob(d)); \\I believe I refer to this with request.files['image']? 
var g = $.ajax({ 
    url: 'url', 
    type: 'POST', 
    processData : false, 
    contentType : false, 
    data: s 
}) //POSTDATA 

를 내가 지금까지 서버가 있습니다 :

@app.route('/requests/<req>', methods=['POST']) 
def requests(req=None): 
     if req == 'upload' and request.method == 'POST' and request.files['file']: 
    file = request.files['image'] \\referring to formdata() key 
    if file and allowed_file(file.filename): 
     n = secure_filename(file.filename) 
     file.save(os.path.join(app.config['UPLOAD_FOLDER'],n)) 
     return redirect(url_for('index', p=n)) 

ALL 그건 제쳐두고 더 중요한

나는 많은 다른 유래의 질문 PHP 서버에 대해 동일한 방법을 사용하여 같은 자바 스크립트가 데이터를 전송하는 좋은 일을하고 서버가 실제로 데이터를 잡 것을 꽤 확신 .

내 문제는이 데이터를 실제 파일로 변환하여 디렉토리에 저장하는 방법을 모르겠다는 것입니다.

  • 내가 사용 해봤 upload tutorial하지만 데이터가 작동하지 않는 파일 때문에 없습니다.
  • 블롭 업로드 방법에 대해 tutorial을 찾았지만 정의되지 않은 "파일"을 사용하기 때문에 작동하지 않습니다.

플라스크 또는 js를 통해이 데이터를 실제 이미지 파일로 변환 할 수있는 방법이 있습니까?

THANKYOU!

+0

https://coderwall.com/p/4qpmfw –

+0

아약스를 통해 blob 게시하기 https://stackoverflow.com/a/19032688/1783439 –

답변

2

해결 방법을 찾았습니다!

FileStorage(stream=request.files['image']).save(os.path.join(app.config['AUTHOR_FOLDER'],'testpic.jpg'))) 

을 대신 플라스크의 file.save()를 사용 , 나는 werkzeug's FileStorage() 어떤 (내가 아는까지로) 내가 지금처럼 (참고로 한방울 인)을 filenamestream를 지정하여 사용 file.save()의 원시 버전을 사용 그것을 스크립트로 가져 와서 오류 400 주위를 피했고 작동 함수를 간신히 폐기했습니다! 하하.

그것은 작동하지만 얼마나 안정적인지 또는 얼마나 안정적인지 전혀 알지 못하고 있습니다. 지금은 그걸로 갈 것입니다. 어떤 사람이라도 경험이 있으면 나를 도와주세요. 감사!

인생은 최고입니다!

관련 문제