clipping image to image using canvas

2019-05-30 03:17发布

站内问答 / 移动开发
449 1 5

Has anyone here have done clipping an image within an image? I've seen so far about clipping on the canvas but are all regular shapes(rectangle, circle, etc...). It would be nice if some have actually done it.

P.S. with fabric.js or just the regular canvas.

1条回答
来，给爷笑一个
2楼-- · 2019-05-30 03:26

Sure, you can use compositing to draw a second image only where the first image exists:

ctx.drawImage(image1,0,0);  // this creates the 'mask'
ctx.globalCompositeOperation='source-in';
ctx.drawImage(image2,0,0);  // this image only draws inside the mask

Illustration: House image drawn first and second Grass image is drawn only where house pixels exist:

enter image description here

Example code an a Demo: http://jsfiddle.net/m1erickson/r71d8d8b/

<!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; }
    canvas{border:1px solid red;}
</style>
<script>
$(function(){

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

    // put the paths to your images in imageURLs[]
    var imageURLs=[];  
    // push all your image urls!
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house100x100.png");
    imageURLs.push("https://dl.dropboxusercontent.com/u/139992952/stackoverflow/mower_start.png");

    // the loaded images will be placed in images[]
    var imgs=[];
    var imagesOK=0;
    loadAllImages(start);

    function loadAllImages(callback){
        for (var i=0; i<imageURLs.length; i++) {
            var img = new Image();
            imgs.push(img);
            img.onload = function(){ 
                imagesOK++; 
                if (imagesOK>=imageURLs.length ) {
                    callback();
                }
            };
            img.onerror=function(){alert("image load failed");} 
            img.crossOrigin="anonymous";
            img.src = imageURLs[i];
        }      
    }

    function start(){

        // the imgs[] array now holds fully loaded images
        // the imgs[] are in the same order as imageURLs[]

        ctx.drawImage(imgs[0],50,50);
        ctx.globalCompositeOperation='source-in';
        ctx.drawImage(imgs[1],0,0);

    }

}); // end $(function(){});
</script>
</head>
<body>
    <h4>Second grass image is drawn only where<br>house pixels already existed<br>(Uses 'source-in' compositing)</h4>
    <canvas id="canvas" width=300 height=300></canvas>
</body>
</html>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)