Question

我有一个图像，我需要从中提取并创建另一个动态图像（不修改原始图像）。提取的图像将是一个矩形，我有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个点的坐标来裁剪图像。

有什么想法吗？

Answer 1

如果我理解正确，那么使用裁剪就是在正确的轨道上。

您可以使用.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';

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

jsfiddle

如何使用kinetic JS从其他图像中提取图像？

1 个答案: