Flex 实现抠图功能

yuanpan 2009-09-25 02:57:09

现在flex项目里要用到一个功能，
就像photoshop里的抠图功能一样.

抠的图是用户用鼠标选择的区域（不规则图形）
只有图片的被选择区域.这个用as3怎么实现啊？？

现在我可以用鼠标在图上画一个圏，圈住我想要的图片区域，
问题是不知道如何导出我圈中的这个区域的图片啊！

现在在网上找了下，只找到选中区域是矩形这种情况的抠图代码，可现在选中区域
是不规则形状，郁闷啊！！！

...全文

659 12 打赏收藏转发到动态举报

写回复

用AI写文章

12 条回复

切换为时间正序

请发表友善的回复…

发表回复

xiangwl527 2010-02-09

打赏
举报

请问用户抓完的图片应该是想放在用户本地有怎么实现呢

wosqqa 2009-10-03

打赏
举报

又学了点新东西

yuanpan 2009-10-03

打赏
举报

首先在这里谢谢！huliang82
抠图这个功能我也想了很久了.现在终于有了一点头绪了.发出来给大家分享一下.
思路一：如上面所说的.把我选中区域的边缘线的坐标保存到一个数组中,然后对所有的点进行判断是否在我选中的区域内.
判断一个点是不是在选中区域的定理是：从该点向任何方向射出一条射线，射线与边缘线交点是倚数个则该点在选中区域内，是偶数个，则不在选中区域内.
那么在这里程序只须做向上下左右四个方向的射线进行判断就可以了.
对于是在选中区域内的点，就复制出来就行了.
这种方向比较复杂.后来我没有用这种方向.
思路二：相对来说比较简单．就是利用Flash里的遮罩动画特效.我可以画一个任何形状然后对其进行颜色填充，这个是比较容易实现的.然后对填充的形状进行遮罩.就得到我想要的不图版部分了.
哈哈....还在进一步的研究中.欢迎大家交流.

billhu001 2009-10-01

打赏
举报

[Quote=引用 5 楼 wangchun0129 的回复:]
用graphics这个画一个圆或者是直线，我怎么样去实现选中这个圆或者是直线呢？
[/Quote]

监听事件就可以了啊，让这个graphics说属的类去监听选中事件，比如mouse_down。

eg:
var sp:Sprite = new Sprite();
sp.graphics.lineStyle(....);
sp.graphics.drawLine(xxx,yyy);
sp.addEventLisener(MouseEvent.MOUSE_DOWN, function(event:MouseEvent):void{

//Do something here!
});

billhu001 2009-10-01

打赏
举报

用户可以画一个不规则的区域（应当保证为闭合的区域），那么区域中的点和区域外的点如果区分出来也就完成任务了。

我想到的方法：

1，用户画区域过程中记录鼠标经过的点，也就是区域边缘的点，放到一个数组中记为 edge；

2，根据数组求出最大的 x,y坐标和最小的x，y坐标值，这样得到四条线可以刚好围成一个矩形区域（设为H）将这个选中的不规则区域包含进去；

3，new 一个背景为透明的BitmapData，大小与矩形区域一样，(BitmapData(width:int, height:int, transparent:Boolean = true, fillColor:uint = 0xFFFFFFFF)，将第三个参数设置为true。) ;

4, 对矩形区域进行按行扫描（形如for(i=0;i<width;i++)...），在第i行中，有两种：
（1）行中有一个点属于edge数组的情况；
（2）行中有成对属于edge数组的情况；
（行中必有一个点属于edge，因为我们选定的矩形区域是minX,minY,maxX,maxY 恰好包含选中区域）

5，但一个点属于edge数组情况，说明是边缘点，拷贝这个点到 newBitMapData相应位置中去（通过get set Pixel方法）。有成对情况时，拷贝每一对中间的点到对应位置中去。

我觉得简单的不规则区域，这样应当没问题，复杂的会有些问题，需要更细节处理下，我想出的大概思路是这样。。。。

yuanpan 2009-09-29

打赏
举报

[Quote=引用 4 楼 huliang82 的回复:]
copyPixels () ，好像只能是矩形区域。

你可以用getPixel方法，取出这个选中区域中的每个像素复制到新的bitmap中就可以了。

就是说对于图片中的任意一个点计算到圆心的距离，如果小于等于半径那么就取出其颜色(getPixel32 () 方法
带透明度)，否则将设置为透明，这样应当就可以了。
[/Quote]
不太明白。计算到圆心的距离做什么。哪里来的圆啊！要抠的图是用户用画笔圈的一块区域，是不规则的区域。
可否把你的思路再说详细点啊？怎么取出颜色，怎么设置为透明？

billhu001 2009-09-28

打赏
举报

copyPixels () ，好像只能是矩形区域。

你可以用getPixel方法，取出这个选中区域中的每个像素复制到新的bitmap中就可以了。

就是说对于图片中的任意一个点计算到圆心的距离，如果小于等于半径那么就取出其颜色(getPixel32 () 方法
带透明度)，否则将设置为透明，这样应当就可以了。

herowach 2009-09-28

打赏
举报

[Quote=引用 5 楼 wangchun0129 的回复:]
用graphics这个画一个圆或者是直线，我怎么样去实现选中这个圆或者是直线呢？
[/Quote]
直接听click事件啊，一般都是继承UIComponent的，听到事件画个边框，或换个背景色不就代表选中了吗。

抠图一般都是用BitmapData抓图，抓了图之后用图形转换类去生成bytearray，现在JPEGEncoder这个类已经做到API里了（第三方的先出来的。。）
var encoder:JPGEncoder = new JPGEncoder(80);
var bytes:ByteArray = encoder.encode(bitmapdata);

var request:URLRequest = new URLRequest("url");
request.data = bytes;
request.method = URLRequestMethod.POST;
request.contentType = "application/octet-stream";
navigateToURL(request, "_self");
发到服务端存成图片就可以了，不规则图形应该还是截取矩形，我刚试了下，用graphics画出来的圆，抓了图后，只能看到圆的部分，矩形的其他部分会是白色（不受容器背景色影响）