使用画布仅显示绘制的图像而不显示整个画布

使用前面在stackoverflow中找到的插件。绘画变得流畅而美好。我想要的只是获得从画布裁剪的图像部分作为输出而不是完整的画布。有人可以帮忙吗？这是我现在使用我的画布代码：http://jsfiddle.net/sVsZL/1/使用画布仅显示绘制的图像而不显示整个画布

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

来源

2012-12-13 shabbir.rang

添加另一个答案，因为另一次是完全关闭。

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

来源

2012-12-13 15:42:21 Loktar

感谢您的精彩代码保存的样本函数。但是，在练习时，我发现图像的一些小部分被从右上方切掉。你如何增加捕获箱的大小？ –

@Lotkar：你看起来相当有经验。因为我是编码新手。你能帮我画出不同线宽的相同图像吗？简单地说，我希望线条宽度在画布上拖动时从小到正常变化。为了使图画看起来不那么专业？谢谢 –

使用画布仅显示绘制的图像而不显示整个画布

回答

相关问题