2011-10-26 7 views
0

html5 캔버스를 슬라이드 주석으로 바꾸려고합니다. 내 목표는 슬라이드 이미지를 업로드하고 사용자가 그 위에 그림을 그릴 수 있도록 허용하는 것입니다.html5 캔버스 드로잉/저장

Whats working : 배경 이미지로 슬라이드를 업로드하고 사용자가 그림을 그릴 수있게했습니다. 저장 기능도 작동합니다.

뭐가 잘못 되었습니까 : 일단 이미지가 저장되면 사용자가 만든 그림은 유지되지만 배경 이미지는 저장된 이미지의 일부가되지 않습니다.

캔버스를 이미지에 저장하고 슬라이드 배경을 유지하는 방법이 있습니까? 아마도 그것은 배경 이미지가 아닌가? 여기

는 내 코드의 일부 :

캔버스 + 버튼 :

<div id="main"> 
<canvas id="drop1" class="drop" style=" background: url(pdf_images/pdf-save-0.png); background-repeat:no-repeat;"> 
</canvas> 
</div> 

<input type="button" id="savepngbtn" value="Save Slide"> 

저장 캔버스 :

document.getElementById("savepngbtn").onclick = function() { 
     saveCanvas(oCanvas, "PNG"); 
    } 

function saveCanvas(pCanvas, strType) { 
     var bRes = false; 
     if (strType == "PNG") 
      bRes = Canvas2Image.saveAsPNG(oCanvas); 
     if (!bRes) { 
      alert("Sorry, this browser is not capable of saving " + strType + " files!"); 
      return false; 
     } 
    } 

답변

0

당신은 '배경 이미지'를 확인해야합니다 일부 캔버스를 단일 이미지로 저장하려는 경우 다음 사용자가 주석을 추가하고 저장할 수

var ctx = yourcanvas.getContext('2d'); 
var img = new Image(); 
img.src = 'http://yourimage.png'; 
img.onload = function() { 
    ctx.drawImage(img, 0, 0) 
} 

:

당신이 뭔가를 시도 할 수 있습니다.

+0

내가 어떻게 그 일을했는지와 다른 방식으로 진행하려면 어떻게해야합니까? – Dom

+0

heya ... 명확한 샘플 코드 블록을 추가했습니다. – gthmb

0

배경 이미지가 아니어야합니다.

이미지를 그리려면 캔버스에서 제공 한 DrawImage을 사용해야합니다. 꽤 간단합니다. 즉, 새로운 이미지 요소 (예 : new Image())를 만들고 onload 이벤트를 설정하여 DrawImage이라는 자체 매개 변수를 호출 한 다음 .src 속성을 설정하여 실제로로드합니다.

분명히 이것은 이미지가 캔버스의 작동 방식에 가장 중요하기 때문에 가장 먼저해야 할 일입니다. onload 안에 추가 후크를 추가하여 이미지가로드 될 때까지 사용자가 드로잉을 할 수 없게 할 수 있습니다.