使用 html5 和 javascript 剪辑图像答案

【问题标题】：Clipping images using html5 and javascript使用 html5 和 javascript 剪辑图像
【发布时间】：2013-07-02 12:21:12
【问题描述】：

我在画布上绘制了一张图像。我想剪辑该图像并使用旧图像中的剪辑区域创建一个新图像。我想如何使用 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 剪切路径对图像所做的那样......

【问题讨论】：

你在画布上绘制了一张图片，请提供一些基本的 JavaScript 来展示你是如何做到这一点的，因为这一切都在 JavaScript 中；不涉及 HTML5，假设您只想获取图像的一个区域...

标签： javascript html html5-canvas

【解决方案1】：

您可以使用带有额外参数的画布上下文的 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();

这是一个 Fiddle（必须在 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>

【讨论】：

例如我在图像周围画了一条路径，像裁剪一样工作，但不像只是重新编排...我可以在它周围画出不规则的形状，然后在画出我想要复制/剪辑的形状后区域然后将其保存到新图像/画布...
感谢您的澄清。您需要使用 JayC 的答案，在其中定义剪切路径，然后调用 context.clip()。之后绘制的任何内容都将被剪切到您的剪切路径中。然后，您可以使用 canvas.toDataURL 将画布保存到图像中。
也谢谢你..随着我的项目进展，我可以使用你的答案...谢谢！ :)

【解决方案2】：

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

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

（注意，路径不一定要用弧来定义，路径定义的方法有很多：https://developer.mozilla.org/en-US/docs/Trash/Canvas_tutorial-broken/Drawing_shapes）

【讨论】：