2012-12-13 169 views
0

使用前面在stackoverflow中找到的插件。繪畫變得流暢而美好。我想要的只是獲得從畫布裁剪的圖像部分作爲輸出而不是完整的畫布。有人可以幫忙嗎? 這是我現在使用我的畫布代碼:http://jsfiddle.net/sVsZL/1/使用畫布僅顯示繪製的圖像而不顯示整個畫布

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

回答

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); 
     }); 
+0

感謝您的精彩代碼保存的樣本函數。但是,在練習時,我發現圖像的一些小部分被從右上方切掉。你如何增加捕獲箱的大小? –

+0

@Lotkar:你看起來相當有經驗。因爲我是編碼新手。你能幫我畫出不同線寬的相同圖像嗎?簡單地說,我希望線條寬度在畫布上拖動時從小到正常變化。爲了使圖畫看起來不那麼專業?謝謝 –