Image 使用画布将图像剪切到图像_Image_Canvas_Fabricjs_Clip

Image 使用画布将图像剪切到图像

image canvas

Image 使用画布将图像剪切到图像,image,canvas,fabricjs,clip,Image,Canvas,Fabricjs,Clip,这里有人在图像中剪辑过图像吗？到目前为止，我已经看到了画布上的剪辑，但都是规则形状（矩形、圆形等）。如果有人真的做到了，那就太好了请注意，使用fabric.js或普通画布。当然，您可以使用合成仅在第一个图像存在的地方绘制第二个图像： ctx.drawImage(image1,0,0); // this creates the 'mask' ctx.globalCompositeOperation='source-in'; ctx.drawImage(image2,0,0); // this

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

请注意，使用fabric.js或普通画布。

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

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

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

演示的示例代码：


正文{背景色：象牙；}
画布{边框：1px纯红；}
$（函数（）{
var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
//将图像的路径放在imageURLs[]
var-imageurl=[]；
//推送你所有的图片网址！
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house100x100.png");
imageURLs.push（“https://dl.dropboxusercontent.com/u/139992952/stackoverflow/mower_start.png");
//加载的图像将放置在图像[]中
var-imgs=[]；
var-imagesOK=0；
加载图像（开始）；
函数LoadAllImage（回调）{
for（var i=0；i=imageURL.length）{
回调（）；
}
};
img.onerror=function（）{alert（“映像加载失败”）；}
img.crossOrigin=“匿名”；
img.src=imageURL[i]；
}      
}
函数start（）{
//imgs[]阵列现在保存完全加载的图像
//imgs[]与ImageURL[]的顺序相同
ctx.drawImage（imgs[0]，50,50）；
ctx.globalCompositeOperation='source-in'；
ctx.drawImage（imgs[1]，0,0）；
}
}); // end$（函数（）{}）；
第二张草地图像仅在已经存在房屋像素的地方绘制（使用“源中”合成）

我认为这是可能的。使用fabric.js怎么样？我怎样才能做到这样呢？好吧，FabricJS不做合成。但是，您可以始终使用屏幕外的html5画布，并使用结果使用

fabric.image.fromURL（canvas.toDataURL（），…

）创建一个FabricJS图像。您的意思是制作另一个画布来完成这类工作，然后传递给FabricJS吗？是的！您可以使用

var canvas=createElement（'canvas'）创建一个“仅内存中”的html5画布

然后使用我回答中的代码在html画布上进行合成。最后使用

fabric.image.fromURL（canvas.toDataURL（）创建正式的FabricJS图像，…

。干杯！我现在可以想象这个东西是如何工作的。但如果我这样做，我想我无法移动该层遮罩中的图像，每次我向该层遮罩添加另一个图像时，我应该重复该过程吗？总之，我找到了这个并尝试了它。问题是它使用路径，即SVG。图像只是PNG。

<!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>