使用画布将图像裁剪为图像答案

【问题标题】：clipping image to image using canvas使用画布将图像裁剪为图像
【发布时间】：2014-11-03 08:40:45
【问题描述】：

这里有没有人在图像中剪辑过图像？到目前为止，我已经看到了关于在画布上进行剪裁，但都是常规形状（矩形、圆形等）。如果有人真的做到了，那就太好了。

附：使用 fabric.js 或只是普通的画布。

【问题讨论】：

【解决方案1】：

当然，您可以使用合成仅在第一张图像存在的地方绘制第二张图像：

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

插图：第一个和第二个绘制的房屋图像仅在房屋像素存在的地方绘制草图像：

示例代码和演示：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>

【讨论】：

我认为这是可能的。使用 fabric.js 怎么样？我怎样才能实现这样的目标？
AFAIK，FabricJS 不进行合成。但是，您始终可以使用屏幕外的 html5 画布，并使用结果使用 fabric.Image.fromURL(canvas.toDataURL(),... 创建 FabricJS 图像。
你的意思是制作另一个画布来做这种事情然后传递给fabricJS？
是的！您可以使用var canvas=createElement('canvas') 创建一个“仅在内存中”的 html5 画布，然后使用我的答案中的代码在该 html 画布上进行合成。最后用fabric.Image.fromURL(canvas.toDataURL(),.... 创建一个官方的FabricJS 镜像。干杯！
我现在可以想象这东西是如何工作的。但是，如果我这样做，我认为我无法移动该图层蒙版中的图像，并且每次我将另一个图像添加到该蒙版图层时，我应该重复该过程吗？无论如何，我找到了这个jsfiddle.net/Kw4d3 并尝试了它。问题是它使用的是 svgs 路径。图片只是png。