dataURL에서 캔버스 복제 (jpg/img) 생성

사용자가 끌어서 놓기를 사용하여 장면에 개체를 놓고 캔버스를 이미지로 저장하거나 게시 할 수있는 작은 페이지를 만들 수 있습니다. facebook/pinterest에 이미지.dataURL에서 캔버스 복제 (jpg/img) 생성

끌어서 놓기 이미지 저장 기능과 병합 된 해변 예제의 동물에 기반한 KineticJS 라이브러리를 사용하여 끌어서 놓기와 dataURI 기능을 만들었습니다.

내가 정말로하고 싶은 것은 동일한 (또는 새로운) 페이지 (예 : here using the Canvas2imageJS doc)의 이미지 홀더에 캔버스 이미지를 배치하는 것입니다. 저장 기능을 사용하여 새 창에서 이미지를 열고 텍스트 상자에 텍스트로 텍스트로 dataURI 문자열을 생성 할 수 있습니다 (here on jsfiddle 또는 아래 빈 공간 홀더가 포함 된 코드). 저장 버튼을 클릭하면 이미지 (dataURI)를 새 (더 작은) 창에 표시하고 dataURI에 대한 문자열도 생성합니다.

몸 { 여백 : 0 픽셀; 채우기 : 0px; } 캔버스 { 테두리 : 1px 단색 # 9C9898; } # 버튼 { 위치 : 절대; 왼쪽 : 10px; 상단 : 0 픽셀; } 버튼 { 여백 - 상단 : 10px; display : 블록;

} 
    #imgArea{ border: 2px solid red; min-width: 576px; min-height:200px; display: block;} 
</style> 
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.0.3.js"></script> 
<script> 
    window.onload = function() { 
    var stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 578, 
     height: 200 
    }); 
    var layer = new Kinetic.Layer(); 
    var rectX = stage.getWidth()/2 - 50; 
    var rectY = stage.getHeight()/2 - 25; 

    var box = new Kinetic.Rect({ 
     x: rectX, 
     y: rectY, 
     width: 100, 
     height: 50, 
     fill: '#00D2FF', 
     stroke: 'black', 
     strokeWidth: 4, 
     draggable: true 
    }); 

    box.on('mouseover', function() { 
     document.body.style.cursor = 'pointer'; 
    }); 

    box.on('mouseout', function() { 
     document.body.style.cursor = 'default'; 
    }); 

    layer.add(box); 
    stage.add(layer); 

    document.getElementById('save').addEventListener('click', function() { 
     stage.toDataURL({ 
     callback: function(dataUrl) { 
    document.getElementById("textArea").value = dataUrl; 

      window.open(dataUrl, "toDataURL() image", "width=600, height=200"); 
     } 

     }); 
    }, false); 
    }; 

</script> </head> <body> 
<div id="container"></div> 
<div id="buttons"> 
    <button id="save"> 
    Save as image 
    </button> 
</div><div style=""> 
    <textarea rows="10" cols="60" id="textArea"></textarea><br> 
    Your picture will appear here: 

    <img id="imgArea"/></div> 

    </body> </html>

사람은 내가 생성 된 이미지/공유 페이스 북/대표자 : 벽에 게시 할 수 있도록 클릭 버튼의 결과를 확인하는 방법을 이해하는 데 도움이 시겠어요? 내 작업이 진행 중입니다. 끌어서 놓기 만하면 새 창에서 dataURI가 생성됩니다. www.shugar.com.au/obar/Default4.html

출처

2012-12-08 user1840760

글쎄, do not do window.open (dataURL);

데이터 URL을 받아서 AJAX와 (과) 같은 다른 작업을 페이스 북에 수행하십시오.

나는 정확한 구문을 잊지하지만이 같은 간다 :

$.ajax({ 
    url: facebook.com/myaccountUpload/somethingsomething, //here you need the url to upload it to Facebook 
    data: dataURL, 
    success: function(response){ 
     alert('uploaded to Facebook'); 
    }, 
    error: .... console.log(error); 
});

을

출처

2013-01-11 17:09:23 SoluableNonagon

dataURL에서 캔버스 복제 (jpg/img) 생성

답변

관련 문제