0

我有一个图像，我需要从中提取并创建另一个动态图像（不修改原始图像）。提取的图像将是一个矩形，我有它的 4 个点的坐标。我检查了http://kineticjs.com/docs/Kinetic.Image.html是否有任何功能可以做到这一点，但没有找到任何东西。

我尝试了作物方法：

   var newImage = new Image();
   newImage.onload = function () {
   var roikImage = new Kinetic.Image({
            x: 10,
            y: 100,
            image: this,
            width:100,
            heigth:100,
            crop: {
                x:0 , y:0 , width:100, heigth:100
            }

         });
    //Here I add the image to the layer, and draw the stage
         };
         newImage.src= 'src/of/my/image';

但我得到了图像的一小部分。我不知道如何使用矩形的 4 个点的坐标来裁剪图像。

有任何想法吗？

4

1 回答 1

1

如果我理解正确，那么通过使用裁剪，您就走在了正确的轨道上。

您可以使用该功能抓取另一个Kinetic Image的图像，.getImage()然后您可以使用crop属性或setCrop()方法getCrop()来实现您想要的。

    var imageObj = new Image();
    imageObj.onload = function () {
        var yoda = new Kinetic.Image({
            x: 100,
            y: 50,
            image: imageObj,
            width: 106,
            height: 118
        });

        // add the shape to the layer
        layer.add(yoda);

        var newImage = new Kinetic.Image({
            x: 300,
            y: 50,
            width: 100,
            height: 100,
            image: yoda.getImage(), //get the original image from yoda
            crop: {
                x:0 , y:0 , width:100, height:100
            }
        });

        layer.add(newImage);

        // add the layer to the stage
        stage.add(layer);
    };
    imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg';

更改内部的x,y值crop以选择要开始裁剪的位置，然后将宽度和高度设置为您希望裁剪尺寸从图像的 x,y 点开始的尺寸。x:0, y:0是图像的左上角。

jsfiddle

于 2013-07-29T21:00:49.483 回答