基于Flex的裁剪图片功能封装

基于Flex的裁剪图片功能封装

1、前言

由于工作原因，不得不接触flash的编程。就本身而言，以前没有编写flash的底子，编程技能也是处于初学者阶段。有许多不规范的地方，还请大家多多指教
作为在网页上对于图片的一些操作，明显的js与html5更具有一些优势。js中的资源更加的丰富，html5更加的简洁方便。但是由于项目对于浏览器兼容的需要，所以只能选择flash进行编写这样的一个插件。
该插件用于对单张图片的一些操作，包括：对图片的缩放、拖动、涂抹、旋转、裁剪与上传（保存）。在其他功能上在网上都可以找到丰富的资源，涂抹的功能也可以通过画板一类的插件进行扩展而来。裁剪虽然也有些许功能，但是总是不尽人意，所以在完成一个初始版本之后，现在进行裁剪功能的代码重构，将其封装起来，方便使用。也对之前的工作进行一次总结。

2、代码

package cutImgFun
{
    import flash.display.Bitmap;
    import flash.display.BitmapData;
    import flash.geom.Matrix;
    import flash.geom.Point;
    import flash.geom.Rectangle;
    import flash.utils.ByteArray;

    import mx.core.UIComponent;
    import mx.graphics.codec.PNGEncoder;

    import spark.components.Image;


    /**
     * 目前原始流程：
     * 1、读取源图片，原始矩阵与剪切信息。
     * 2、源图片原始化，变为原图片
     * 3、根据缩放比例进行裁剪。
     * 
     **/
    public class CutImg
    {
        //裁剪参数：裁剪的位置与长宽---为相对于原图片的位置
        private var cutX:Number;//裁剪位置的横坐标,
        private var cutY:Number;//裁剪位置的纵坐标
        private var cutHeight:Number;//裁剪框的高度
        private var cutWidth:Number;//裁剪框的宽度

        //原图片参数：图片源文件，位置与长宽
        private var sourceImg:Image;//需要进行剪切的原图片
        private var sourceImgX:Number;//原图片的横坐标位置
        private var sourceImgY:Number;//原图片的纵坐标位置
        private var sourceImgHeight:Number;//原图片的高度
        private var sourceImgWidth:Number;//原图片的宽度
        //原图片的矩阵
        private var sourceImgMatrix:Matrix;//原图片的矩阵,如果想获取缩放前图片的剪切，请使用初始的矩阵，不要使用当前矩阵
        //原图片的初始矩阵
        private var sourceImgPreMatrix:Matrix;
        //剪切过程中使用的矩阵
        private var ImgMatrix:Matrix;

//      public function CutImg(source:Image,sourceImgMatrix:Matrix,sourceX:Number,sourceY:Number,sourceW:Number,sourceH:Number,cutX:Number,cutY:Number,cutW:Number,cutH:Number)
//      {
//          this.sourceImg=source;
//          this.sourceImgX=sourceX;
//          this.sourceImgY=sourceY;
//          this.sourceImgWidth=sourceW;
//          this.sourceImgHeight=sourceH;
//          
//          this.sourceImgMatrix=sourceImgMatrix;
//          
//          this.cutX=cutX;
//          this.cutY=cutY;
//          this.cutWidth=cutW;
//          this.cutHeight=cutH;
//      }


        /**
         * 构造函数，在原始图片基础上进行剪切，不包括缩放。
         * 
         * */
        public function CutImg(source:Image,sourceImgPreMatrix:Matrix,cutX:Number,cutY:Number,cutW:Number,cutH:Number)
        {
            this.sourceImgMatrix=source.transform.matrix;//保存当前矩阵
            this.sourceImgPreMatrix=sourceImgPreMatrix;//转换为初始矩阵
            source.transform.matrix=sourceImgPreMatrix;//还原图片

            //缩放比例
            var ratio:Number=sourceImgPreMatrix.a/sourceImgMatrix.a
            trace(ratio);
            //trace(sourceImgMatrix.a);

            this.ImgMatrix=sourceImgPreMatrix;//剪切的时候使用原矩阵,在原始大小上进行裁剪

            //整数化宽高,防止小数宽高对图片造成的变形
            var width:int=source.width;
            source.width=width;
            var height:int=source.height;
            source.height=height;

            this.sourceImg=source;
            this.sourceImgX=source.x;
            this.sourceImgY=source.y;
            this.sourceImgWidth=source.width;
            this.sourceImgHeight=source.height;

            this.cutX=cutX*ratio;
            this.cutY=cutY*ratio;
            this.cutWidth=cutW*ratio;
            this.cutHeight=cutH*ratio;
        }

        /**
         * 获取最终得到的图片对象
         **/
        public function getCutImg():Image
        {
            //最终获取的图片
            var finalImg:Image=new Image();

            //设置最终图片的属性
            finalImg.width=this.cutWidth;
            finalImg.height=this.cutHeight;
            finalImg.source=new PNGEncoder().encode(this.getCutImgBitMapData());

            return finalImg;
        }

        /**
         * 利用targetImg显示剪切后的图片
         **/
        public function setCutImgToTarget(targetImg:Image):void
        {   
            //设置最终图片的属性
            targetImg.width=this.sourceImgWidth;//this.cutWidth;
            targetImg.height=this.sourceImgHeight;//this.cutHeight;
            targetImg.source=new PNGEncoder().encode(this.getCutImgBitMapData());
        }

        /**
         * 获取剪切的BitmapData数据
         **/
        private function getCutImgBitMapData():BitmapData
        {
            //将原图片转为数组
            var byteArr:ByteArray =ImageToByteArray(sourceImg);
            //将数组转为bitmap
            var bitmap:Bitmap = ByteArrayToBitmap(byteArr);

            //创建剪切容器
            var bitmapData:BitmapData = new BitmapData(this.cutWidth,this.cutHeight);
            //通过原图片的bitMap进行剪切并保存到这个容器中。
            bitmapData.copyPixels(bitmap.bitmapData,new Rectangle(this.cutX,this.cutY,this.cutWidth,this.cutHeight),new Point(0,0));

//          var bitmapData:BitmapData = new BitmapData(this.sourceImgWidth,this.sourceImgHeight);
//          bitmapData=bitmap.bitmapData;
            return bitmapData;
        }   

        /**
         * 将单张图片转为ByteArray
         **/
        private function ImageToByteArray(source:Image):ByteArray
        {
            //获取目标图片的bitmapData类型数据
            //var sourceBitmapData:BitmapData=source.bitmapData;
            var sourceBitmapData:BitmapData =new BitmapData(this.sourceImgWidth,this.sourceImgHeight); 

                sourceBitmapData.draw(source);
            //获取目标图片的位置与大小
            var sourceRect:Rectangle=new Rectangle(0,0,this.sourceImgWidth,this.sourceImgHeight);

            //通过以上获取的两个数据得到目标图片的ByteArray类型数据
            var sourceByteArray:ByteArray=sourceBitmapData.getPixels(sourceRect);

            //将高与宽写入
//          sourceByteArray.writeShort(this.sourceImgWidth);
//          sourceByteArray.writeShort(this.sourceImgHeight);

            return sourceByteArray;
        }


        /**
         * 将ByteArray转为bitMap
         **/  
        private function ByteArrayToBitmap(byteArr:ByteArray):Bitmap{ 
            //将写入的宽与高读取出来
//          byteArr.position = byteArr.length -2;  
//          var height:int = byteArr.readShort();  //imgHeightAuto;//
//          byteArr.position = byteArr.length -4;  
//          var width:int =  byteArr.readShort(); //imgWidthAuto;//
            var bitmapData:BitmapData = new BitmapData(this.sourceImgWidth,this.sourceImgHeight);  

            //由于循环遍历图片是需要int值进行遍历的，而长度有可能是小数，如果不进行处理，则会造成数据遍历溢出，所以在这里缩小范围来达到效果，但是会造成数据的丢失。
            var width:int=this.sourceImgWidth;
            var height:int=this.sourceImgHeight;

            trace("width"+this.sourceImgWidth+"-"+width+"--height:"+this.sourceImgHeight+"-"+height);
            byteArr.position = 0;  
            for(var i:int = 0;i<this.sourceImgHeight;i++){  
                for(var j:int = 0;j<this.sourceImgWidth;j++){ 
                    //防止数组溢造成程序崩溃
                    if(byteArr.position<byteArr.length)
                        bitmapData.setPixel(j,i,byteArr.readUnsignedInt());  
                }  
            }  

            var bitMap:Bitmap = new Bitmap(bitmapData);  
            return bitMap;  
        }

        /**
         * 清除冗余，在初始化的时候，设置剪切框在图片以内
         **/
        public function cleanEdge():void
        {
            //冗余状况
            if(this.cutX+this.cutWidth<0)//左侧出界--相对位置
            {
                cutRangeDefault();
            }
            else if(this.cutX>this.sourceImgWidth)//右侧出界
            {
                cutRangeDefault();
            }
            else if(this.cutY+this.cutHeight<0)//上侧出界
            {
                cutRangeDefault();
            }
            else if(this.cutY>this.sourceImgHeight)//下侧出界
            {
                cutRangeDefault();
            }
            else//存在交叉的情况
            {
                //获取交叉区域的左上角
                var acrossLeftTopX:Number=maxNum(0,this.cutX);
                var acrossLeftTopY:Number=maxNum(0,this.cutY);
                //获取交叉区域的右下角
                var acrossRightBottX:Number=minNum(this.sourceImgWidth,this.cutX+this.cutWidth);
                var acrossRightBottY:Number=minNum(this.sourceImgHeight,this.cutY+this.cutHeight);

                //重设剪切框--不再讨论正常情况，直接进行重设
                this.cutX=acrossLeftTopX;
                this.cutY=acrossLeftTopY;
                this.cutWidth=acrossRightBottX-acrossLeftTopX;
                this.cutHeight=acrossRightBottY-acrossLeftTopY;
            }
        }

        /**
         * 返回两个数中的较大值
         * */
        public function maxNum(numA:Number,numB:Number):Number
        {
            if(numA>numB)
            {
                return numA;
            }
            else
            {
                return numB;
            }
        }

        /**
         * 返回两个数中的较小值
         * */
        public function minNum(numA:Number,numB:Number):Number
        {
            if(numA>numB)
            {
                return numB;
            }
            else
            {
                return numA;
            }
        }

        /**
         * 设置默认剪切范围，为原图大小。
         * */
        private function cutRangeDefault():void
        {
            this.cutX=0;
            this.cutY=0;
            this.cutWidth=this.sourceImgWidth;
            this.cutHeight=this.sourceImgHeight;
        }

        /************************************自定义******************************************************************/
        /**
         * 利用targetImg显示剪切后的图片--自定义：添加涂抹板。
         **/
        public function setCutImgToTargetWithBoard(targetImg:Image,board:UIComponent):void
        {   
            //设置最终图片的属性
            targetImg.width=this.cutWidth;
            targetImg.height=this.cutHeight;
            targetImg.source=new PNGEncoder().encode(this.getCutImgBitMapDataWithBoard(board));
        }

        /**
         * 获取剪切的BitmapData数据
         **/
        private function getCutImgBitMapDataWithBoard(board:UIComponent):BitmapData
        {
            //将原图片转为数组
            var byteArr:ByteArray =BitmapDataToByteArrayForCut(board,sourceImg);
            //将数组转为bitmap
            var bitmap:Bitmap = ByteArrayToBitmap(byteArr);

            //创建剪切容器
            var bitmapData:BitmapData = new BitmapData(this.cutWidth,this.cutHeight);
            //通过原图片的bitMap进行剪切并保存到这个容器中。
            bitmapData.copyPixels(bitmap.bitmapData,new Rectangle(this.cutX,this.cutY,this.cutWidth,this.cutHeight),new Point(0,0));

//          var bitmapData:BitmapData = new BitmapData(this.sourceImgWidth,this.sourceImgHeight);
//          bitmapData=bitmap.bitmapData;
            return bitmapData;
        } 

        /**
         * 添加涂抹遮罩需要混合的时候
         **/
        private function BitmapDataToByteArrayForCut(target : UIComponent,source:Image):ByteArray
        {  
            //混合画板与原图片
            var bitmapData:BitmapData = UIComponentToBitmapData(target,source);  
            /**
             * 裁剪修改*************************************************************************************
             */ 
            var byteArr:ByteArray = bitmapData.getPixels(new Rectangle(0,0,this.sourceImgWidth,this.sourceImgHeight));//width,height)); 

            return byteArr;  
        }

        /**
         * 将可视的UIComponent组件转换为图片  
         **/
        private function UIComponentToBitmapData(target : UIComponent,source:Image):BitmapData
        {  
            var bitmapData:BitmapData =new BitmapData(this.sourceImgWidth,this.sourceImgWidth);  

            //var targetMatrix:Matrix=this;
            //source.transform.matrix=this.ImgMatrix;

            bitmapData.draw(source);//保存原图像--未添加矩阵，因为添加之后会遭成偏移
            bitmapData.draw(target);//添加涂抹效果
            return bitmapData;  
        } 
    }
}

3、代码使用方式

//新建一个裁剪对象
var cutImgFun1:CutImg = new CutImg(imgCase,imgMatrixDefault,cutBox.x,cutBox.y,cutBox.boxWidth,cutBox.boxHeight);
//清除裁剪框与原图片间的空白
cutImgFun1.cleanEdge();
//将裁剪的结果传递给imgCase的图片对象。
cutImgFun1.setCutImgToTarget(imgCase);

初始化需要传递的值为需要裁剪的源图片、源图片的原始矩阵（裁剪后得到的为未进行缩放的图片）、裁剪的位置(x、y)、裁剪的大小（宽、高）。