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>

现在我想剪辑图像。就像 Photoshop 剪切路径对图像所做的那样......

4

2 回答 2

3

您可以使用带有额外参数的画布上下文的 drawImage 剪辑图像

此代码将从 [clipX,clipY] 位置的源图像剪辑，其大小为 [clipWidth x clipHeight]。

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

然后您可以使用 canvas.toDataURL 将画布保存到图像

此代码将在页面上找到一个图像元素并将其 src 设置为剪切的画布。

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

这是一个小提琴（必须在 Chrome/FF 中查看，而不是 IE）：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

您只需要创建一个路径，然后在绘制图像之前使用画布上下文的剪辑方法定义一个剪辑区域。这是一个例子：

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 回答