Question

我将图像绘制到画布上。我想剪切该图像并使用旧图像中的剪切区域创建新图像。我怎么想用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剪切路径对图像所做的那样......

Answer 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();

这是一个小提琴（必须在Chrome / FF-not 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>

Answer 2

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

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）

使用html5和javascript剪辑图像

2 个答案: