0

まずキャンバス領域を用意し、

画像データから一部を切り取っています。切り抜いた部分をキャンバス全体の縮尺に伸ばして表示したいと思います。

お気に入り。

私は400,400と言う面積のキャンバスを持っています、

次に、画像データを (20,100) から (200,300) にトリミングします。これは、180 (幅) と 200 (高さ) を意味します。

その後、トリミングされた部分を同じキャンバスに表示して、幅と高さ全体に広げたいと思います。

JavaScript の部分で可能ですか、それともその目的のために独自の関数を作成する必要がありますか。

4

1 に答える 1

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>
于 2013-04-19T20:17:26.543 に答える