0

使用我之前在 stackoverflow 上找到的插件。绘图变得流畅和漂亮。我想要的是只获取我从画布中裁剪出来的图像部分作为输出，而不是完整的画布。有人可以帮忙吗。这是我现在用于画布的代码：http: //jsfiddle.net/sVsZL/1/

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

1 回答 1

1

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

现场演示

您本质上需要的是跟踪边界框。我所做的是创建一个对象，该对象包含您绘制位置的最小值和最大值。这使您能够跟踪图像的大小以及开始/结束的位置。

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-13T15:42:21.873 回答