如何使用动力学JS从其他图像中提取图像
How to extract an image from an other using kinetic JS?
我有一个图像,我需要从中提取并创建另一个动态图像(不修改原始图像)。提取的图像将是一个矩形,我有它的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个点的坐标来裁剪图像。
有什么想法吗?
如果我理解正确,那么使用crop就是正确的。
您可以使用.getImage()
函数获取另一个Kinetic image的图像,然后使用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
相关文章:
- 如何在内联依赖项并将图像转换为dataURI的情况下完全提取网页
- 使用javascript从HTML网页中提取图像url
- 是否可以创建一个画布来提取图像数据,而无需实际渲染画布
- 如何使用谷歌应用程序脚本从电子邮件中提取内联文件/图像
- ng-repeat图像上的指令仅提取有关第一个图像的信息
- 是从画布获取图像数据的任何方法,从远程视频中提取
- 提取扩展名为JS的图像文件名
- 是否可以使用node.js从powerpoint中提取幻灯片并将其保存为图像
- 使用Javascript从DOM中提取所有图像
- 如何使用 JavaScript 从图像中提取文本
- 我可以使用 javascript 从类别中提取图像吗?
- 使用 AngularJS 从
RSS 提要中提取图像 - 提取图像src并使其成为另一个图像的src
- 提取具有微内容类属性的图像
- 使用JSON从PHP中提取一个自动图像蒙太奇
- 如何使用php或javascript提取PDF文件中的文本和图像
- 当源是IE/EDGE上的加密令牌视频时,Canvas未从azure媒体播放器中提取图像
- 使得网络爬虫想要提取url中的图像
- 如何使用动力学JS从其他图像中提取图像
- 从9GAG中提取图像