캔버스를 이미지로 변환하고 디스크에 저장

이미 많은 비슷한 질문이 있지만 어떤 이유로 내 문제를 해결하지 못합니다.캔버스를 이미지로 변환하고 디스크에 저장

내 프로젝트는 동적으로 생성 된 페이지 (또는 페이지의 일부)를 저장하는 것입니다. 사용자는 화면에서 객체를 드래그하여 원하는 순서로 남겨두고이 순서를 이미지로 디스크에 저장할 수 있습니다.

내 연구에 따르면 Draggable from JQuery을 사용할 수 있으며 구현하기가 쉽습니다. 나는 붙어있는 저축 부분이다.

나는 약간의 links을 따라 갔지만 이미지는 디스크에 저장되지 않는 것 같아 IE에서는 작동하지 않는다고 생각합니다! 그러나 FireFox에 만족하며 toDataUrl()을 사용하는 것이 가장 좋은 방법입니다. 나는 그것이 작동하지 수 있기 때문에

나는 (C#을) 내 코드의 저장 부분은

<script> 
    function SaveMe() { 
     var canvas = document.getElementById("mycanvas"); 
     var image = canvas.toDataUrl(); 
     document.getElementById("hideMe").value = image; 
    } 
</script>

과 같은

을 약간 전술을 변경하고 뒤에 코드에 값을 전달하기로 결정했을 때 나는 FireBug에서 디버그, 나는 결코 document.getElementById("hideMe").value = image;에 도달하지 않습니다. 단계별로 진행하지만 결코 지나칠 수 없음 var image = canvas.toDataUrl(); 오류 메시지가 없다고 가정 할 때 예상되는 동작입니까?

내 HTML의 몸은 내가 잘못 뭐하는 거지

<body> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('.popup_click').show(0).draggable();  
     });  
    </script> 

    <form id="form1" runat="server"> 

     <div class="popup_click"> 
      <div id="popup_title">Title</div> 
     </div> 

     <canvas id="mycanvas" class="canvas"></canvas> 

     <asp:HiddenField ID="hideMe" runat="server" /> 
     <asp:Button runat="server" OnClick="ClickMe" text="Click" OnClientClick="SaveMe()"/> 

    </form> 
</body>

입니까? 내가 디버그 모드, 2013

출처

2013-10-17 Dave

절대적으로 확실하지 Visual Studio에서 로컬로 일하고 있어요,하지만 나는 또한 과거에 todataurl()에 문제가 있었고,이 링크는 나에게

Not able to get data url when using images in kinetic js

출처

2013-10-17 14:12:14 user2890832

, 나는 '돈 보안 오류가 발생합니까? 나는 어떤 오류도 내지 않는다! – Dave

오류를 공유하여 전술을 변경하도록 강요 할 수 있습니까? – user2890832

오류가 없습니다 ... toDataUrl이 손상되지만 오류 메시지가 표시되지 않는 것처럼 저장하지 않은 것 같습니다. 당신이 참조하는 사이트로 +1하는 것이 정확히 필요한 일을하고 있습니다. – Dave

이것은 도움 이미지에 캔버스를 수출하고자 할 때 항상 사용하는 기능은, 그것은 팝업 창에 사용자가 (난이 도움이되기를 바랍니다) 그것으로 원하는 것을 할 수 있도록를 이미지를 박았 :

function imageCanvas(evt){ 
    var imageCanvas = document.createElement('canvas'); 
    imageCanvas.width = document.documentElement.clientWidth; 
    imageCanvas.height = document.documentElement.clientHeight; 
    var imageCanvasContext = imageCanvas.getContext("2d"); 
    imageCanvasContext.fillStyle = document.getElementById("body").style.backgroundColor; 
    imageCanvasContext.fillRect(0,0,imageCanvas.width,imageCanvas.height); 
    imageCanvasContext.drawImage(mainCanvas,0,0,imageCanvas.width,imageCanvas.height,0,0,imageCanvas.width,imageCanvas.height); 
    var dataURL = imageCanvas.toDataURL("image/png"); 
    var imagePopup = window.open("","fractalLineImage","left=0,top=0,width="+(imageCanvas.width/2)+",height="+(imageCanvas.height/2)+",toolbar=0,resizable=0"); 
    imagePopup.document.write("<title>Export Image</title>"); 
    imagePopup.document.write("<img id='exportImage'" 
    +" alt=''" 
    +" height='"+ imageCanvas.height+"'" 
    +" width='"+ imageCanvas.width+"'" 
    +" style='position:absolute;left:0;top:0'/>"); 
    imagePopup.document.close(); 
    var exportImage = imagePopup.document.getElementById("exportImage"); 
    exportImage.src = dataURL; 
}

출처

2013-10-17 14:18:43

캔버스를 이미지로 변환하고 디스크에 저장

답변

관련 문제