base64에서 레일 3에서 앱을 저장하지 않고 서버에 저장하지 않음

Question

레일즈 3.2 앱에서 다음 javascript를 사용하여 캔버스에서 Base64로 변환 한 하이 차트 차트가 있습니다.

canvg(document.getElementById('chart'), chart.getSVG()) 
var canvas = document.getElementById("chart"); 
var img = canvas.toDataURL("image/png"); 
document.write('<img src="'+img+'"/>'); 

는 지금, 나는 이미지 파일로 해당 이미지를 디코딩 할. 그러나 나는 페이스 북에서 공유하는 유일한 목적이기 때문에 서버에 저장하고 싶지 않습니다. 다음 두 옵션이 표시됩니다.

- 데이터를 img에서 서버로 다시 보낸 다음이를 임시 폴더에 저장된 이미지로 변환하고보기로 렌더링합니다.

-javascript를 사용하여 Base64를 PNG 파일로 디코딩하고 새 창에서 엽니 다.

어떤 방향으로하고 어떻게 구현해야합니까? 나는 몇 시간 동안 봤는데 내가 필요한 부분을 한 몇 가지 예제를 발견했지만, 전체 이야기를 찾을 수 없습니다.

이 솔루션은 매우 유망한 듯하지만 내 이미지는 GET 요청을 사용하기에 너무 크고 POST 요청을 사용하는 나의 시도가 실패 그래서 자바 스크립트에 익숙하지 않다 :

Convert canvas to image and open in new window using ruby on rails and javascript

편집 : 또 다른 잠재적 인 해결책으로, 이미지와 링크를 자동으로 반환하는 base64 문자열을 보낼 수있는 웹 도구가 있습니까? 한마디로

Answer 1

: 첫 번째 옵션은 가장

롱 버전은 다음과 같습니다 나는 당신이 페이스 북에 게시 base64로 URL을 사용할 수 있습니다 모르겠어요 - 같은 이유로 당신은을 사용할 수 없습니다 거대한 base64 문자열에 대한 요청을 받으십시오. (오랫동안 URL을 지원합니까?) - 실제로 에이 필요합니다.

내가 잘 모르겠지만, 내가 직접 페이스 북 측을 저장 (는 "공유"버튼을에 연결되지 않은) 사용자가 게시 된 사진 만 생각, 다른 사람은 실제로 서버에 앉아있다 .

먼저 facebook API를 통해 거대한 base64 문자열을 보내면 테스트해야합니다. FB의 온라인 도구를 사용하여 작은 이미지 용 그래프 API 메타 태그를 만들려고했는데 작동하지 않았습니다. 좋은 모양 (비록 내가 FB API를 잘 모른다는 것을 인정하지만).

이미지를 저장해야합니다. AJAX POST 요청을 통해 서버로 보내면 어렵지 않습니다. JQuery을 사용하면 정말 간단합니다. 나중에 루비를 사용하여 base64를 이미지 파일로 변환하십시오.

편집 : 내가 undestand 잘 질문 궁금해. 사용자가 만든 이미지를 다운로드 할 수있게 하시겠습니까? 그렇다면 오른쪽 클릭> 생성 된 이미지를 저장하면됩니다.canvas2image lib도 사용자 "장애인을 마우스 오른쪽 버튼으로 클릭"에 대한이 쉽게 만들 수

가 편집 2) :는 여기에 jQuery로 아약스 POST 요청의 예입니다 : 귀하의 경우 너무

$.post( 
    // first argument : the URL you want to POST to 
    'url/to/post.js', 
    // second argument: the data to send to the server 
    myData, 
    // third argument : a callback function, 
    // that is called when the request is complete 
    // and is passed the data returned by the server 
    // + response status (success, error...) 
    function(data){  
    alert('request completed, returned :' + data); 
    });     

당신 이런 식으로 뭔가를 할 수 :

$.post(
    '<%= create_facebook_image_path format: :js %>', 
    { base_64_string: img }, 
    function(data){ 
    $('#viewport').append($('<img />').attr({ src: data.url })); 
    }); 

더 많은 예제가 성공/오류 상태를 처리하는 방법을 포함하여, JQuery's doc에서 사용할 수 있습니다. JQuery를 사용하여 배우는 것이 좋습니다. 곧 간단하지만 강력한 방법을 알게 될 것입니다.