Question

首先我有一个画布区域，

我正在从图像数据中裁剪一些部分，然后我想显示裁剪的部分拉伸到完整的画布比例。

像。

我有一张面积为400,400的画布，

然后我裁剪图像数据从（20,100）到（200,300），意味着180（宽度）和200（高度）

之后我希望裁剪的部件显示在拉伸到其全宽和高度的同一个画布上。

是否可以通过javascript部分或我们需要为此目的创建自己的函数。

Answer 1

您可以使用toDataURL将当前画布捕获为URL

var dataURL=canvas.toDataURL();

然后，您可以使用drawImage裁剪和缩放图像并将其粘贴回画布

context.drawImage(theImage,CropatX,CropatY,WidthToCrop,HeightToCrop,
        pasteatX,pastatY,scaledWidth,scaledHeight)

这是代码和小提琴：http://jsfiddle.net/m1erickson/Ap3Hd/

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css -->
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<style>
    body{ background-color: ivory; padding:20px; }
    canvas{border:1px solid black;}
</style>

<script>
$(function(){

    var canvas=document.getElementById("canvas");
    var ctx=canvas.getContext("2d");

    ctx.beginPath();
    ctx.fillStyle="green";
    ctx.strokeStyle="blue";
    ctx.lineWidth=10;
    ctx.arc(125,100,65,0,2*Math.PI,false);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.fillStyle="purple";
    ctx.strokeStyle="yellow";
    ctx.rect(100,0,50,300);
    ctx.fill();
    ctx.stroke();
    ctx.beginPath();
    ctx.strokeStyle="red";
    ctx.lineWidth=3;
    ctx.rect(20,100,180,200);
    ctx.stroke();


    // 
    $("#crop").click(function(){
        // save the current canvas as an imageURL
        var dataURL=canvas.toDataURL();
        // clear the canvas
        ctx.clearRect(0,0,canvas.width,canvas.height);
        // create a new image object using the canvas dataURL
        var img=new Image();
        img.onload=function(){
            // fill the canvas with the cropped and scaled image
            // drawImage takes these parameters
            // img is the image to draw on the canvas
            // 20,100 are the XY of where to start cropping
            // 180,200 are the width,height to be cropped
            // 0,0 are the canvas coordinates where the
            //        cropped image will start to draw
            // canvas.width,canvas.height are the scaled
            //        width/height to be drawn
            ctx.drawImage(img,20,100,180,200,0,0,canvas.width,canvas.height);
        }
        img.src=dataURL;
    });

}); // end $(function(){});
</script>

</head>

<body>
    <p>Red rectangle indicates cropping area</p>
    <canvas id="canvas" width=300 height=300></canvas><br/>
    <button id="crop">Crop the red area and scale it to fill the canvas</button>
</body>
</html>

将图像数据缩放到更大的尺寸

1 个答案: