캔버스를 사용하여 전체 캔버스가 아닌 그려진 이미지 만 표시합니다.

Question

이전에 stackoverflow에서 찾은 플러그인을 사용합니다. 그리기가 부드럽고 멋지게되었습니다. 내가 원하는 것은 캔버스에서 그려진 이미지 부분 만 출력물이 아닌 전체 캔버스로 가져 오는 것입니다. 누군가 도울 수 있어요. http://jsfiddle.net/sVsZL/1/

function canvasDisplay() { 
var c=document.getElementById("canvas"); 
canvasImage=c.toDataURL("image/png"); 
document.getElementById("SSMySelectedImage").src=canvasImage; 
} 

Answer 1

다른 하나는 완전히 꺼 때문에 다른 대답을 추가 : 이 내가 지금 내 캔버스에 대한 사용하고있는 코드입니다.

Live Demo

은 당신이 기본적으로 필요로하는 것은 경계 상자의 추적을 유지하는 것입니다. 내가하는 것은 여러분이 그려 놓은 곳의 최소값과 최대 값을 가지고있는 객체를 만드는 것입니다. 이렇게하면 이미지의 크기와 시작/끝 위치를 추적 할 수 있습니다.

this.dim = {minX : 9999, minY : 9999, maxX : 0, maxY : 0}; 

그런 다음 경계를 확인하는 함수를 만들었습니다.

this.setDimensions = function(x,y){ 
     if(x < this.dim.minX){ 
      this.dim.minX = x; 
     } 

     if(y < this.dim.minY){ 
      this.dim.minY = y; 
     } 

     if(x > this.dim.maxX){ 
      this.dim.maxX= x; 
     } 

     if(y > this.dim.maxY){ 
      this.dim.maxY = y; 
     } 
    } 

클릭하거나 이동하는 동안 확인하십시오.

this.mousedown = function(ev) { 
     tool.setDimensions(ev._x,ev._y); 
    }; 

    this.mousemove = function(ev) { 
      tool.setDimensions(ev._x,ev._y); 
    }; 

그리고 이것은 당신이 그 멋진 코드 toDataUrl

var button = document.getElementsByTagName("input")[0]; 
     button.addEventListener("click", function(){ 
      var savedCanvas = document.createElement("canvas"), 
       savedCtx = savedCanvas.getContext("2d"), 
       minX = PEN.dim.minX, 
       minY = PEN.dim.minY, 
       maxX = PEN.dim.maxX, 
       maxY = PEN.dim.maxY, 
       width = maxX - minX, 
       height = maxY - minY; 

      savedCanvas.width = width; 
      savedCanvas.height = height; 

      document.body.appendChild(savedCanvas); 
      savedCtx.drawImage(canvas,minX,minY,width,height,0,0,width,height); 
     });