3

私はキャンバスに描かれた画像を持っています。その画像を切り取り、古い画像から切り取った領域を使用して新しい画像を作成したいと考えています。html5とjavascriptを使用してそれを行うにはどうすればよいですか? 画像のクリッピングは、Photoshop で使用されるように動的になります。

<!--my javascroipt that draw the image to the canvas -->
<script>
 function getURLParameter(name) {
      return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search)||[,""])[1].replace(/\+/g, '%20'))||null
    }
    function drawImage(imageObj){
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var imageX = 0;
        var imageY = 0;
        var imageWidth = imageObj.width;
        var imageHeight = imageObj.height;
        canvas.width = imageWidth;
        canvas.height = imageHeight;
        context.drawImage(imageObj, imageX, imageY);

    }
    var image = getURLParameter('image');
    if(image != null){
        //now put the image to the canvas lolol
        var imageObj = new Image();
        imageObj.onload = function(){
            drawImage(this);
        };
        imageObj.src = 'http://localhost/clip/temp/'+image;
    }
</script>
<!--here is my canvas..-->
<div id="container" class="unselectable">
    <canvas id="canvas" width="500px" height="500px" class="unselectable">

    </canvas><br/>

</div>

今私は画像をクリップしたい。フォトショップのクリッピングパスが画像に対して行っていることと同じように...

4

2 に答える 2

3

キャンバス コンテキストの drawImage と追加のパラメータを使用して、画像をクリップできます。

このコードは、サイズが [clipWidth x clipHeight] の位置 [clipX,clipY] でソース イメージからクリップします。

ctx.drawImage(image,clipX,clipY,clipWidth,clipHeight,0,0,clipWidth,clipHeight);

次に、canvas.toDataURL を使用してキャンバスを画像に保存できます。

このコードは、ページ上の画像要素を見つけて、その src をクリップされたキャンバスに設定します。

var clippedImg=document.getElementById("clipped");
clippedImg.src=canvas.toDataURL();

これはフィドルです（IEではなくChrome/FFで表示する必要があります）： http://jsfiddle.net/m1erickson/VJdmL/

コードは次のとおりです。

<!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:15px;}
    canvas{border:1px solid red;}
</style>

<script>
$(function(){

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

    var img=new Image();
    img.onload=function(){

        clipImage(img,140,2,120,110);

    }
    img.crossOrigin="anonymous";
    img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png";

    function clipImage(image,clipX,clipY,clipWidth,clipHeight){

        // draw the image to the canvas
        // clip from the [clipX,clipY] position of the source image
        // the clipped portion will be clipWidth x clipHeight
        ctx.drawImage(image,clipX,clipY,clipWidth,clipHeight,
                        0,0,clipWidth,clipHeight);

        var clippedImg=document.getElementById("clipped");
        clippedImg.src=canvas.toDataURL();

    }


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

</head>

<body>
    <p>Canvas (Left) and New clipped PNG (Right)</p>
    <canvas id="canvas" width=120 height=110></canvas>
    <img id="clipped" src="faces.png" width=120 height=110><br>
    <p>Original Image</p>
    <img src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/faces.png" width=400 height=234>
</body>
</html>
于 2013-07-02T04:21:12.147 に答える
1

画像を描画する前に、パスを作成し、キャンバス コンテキストの clip メソッドを使用してクリッピング領域を定義する必要があります。次に例を示します。

https://developer.mozilla.org/samples/canvas-tutorial/6_2_canvas_clipping.html

詳細はこちら：

http://www.html5canvastutorials.com/advanced/html5-canvas-clipping-region-tutorial/

(注: パスは円弧で定義する必要はありません。かなり多くのパス定義方法があります: https://developer.mozilla.org/en-US/docs/Trash/Canvas_tutorial-broken/Drawing_shapes )

于 2013-07-02T03:52:13.490 に答える