logo标签列表

使用HTML5和JavaScript剪切图像

javascripthtmlhtml5-canvas
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的剪贴路径对图像所做的那样...

3
您在画布上绘制了一幅图像，请提供基本的JavaScript代码以展示您是如何实现的，因为这完全是在JavaScript中完成的，没有涉及到HTML5，假设您只想获取图像的某个区域... - Christian Stewart
2个回答
3

使用canvas上下文的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）中查看的Fiddle：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>
我在图像周围绘制了一条路径，类似于裁剪但不仅限于矩形...我可以绘制任意形状的路径，然后在绘制完路径后将该区域复制/剪切并保存到新的图像/画布中... - charm
感谢澄清。您需要使用JayC的答案，其中定义了一个剪切路径，然后调用context.clip()。在此之后绘制的任何内容都将被剪切到您的剪切路径中。然后，您可以使用canvas.toDataURL将画布保存为图像。 - markE
谢谢你，我可以在我的项目中使用你的答案。谢谢！ :) - charm
1
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接