关于使用Flex中图片处理

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx"
               xmlns:astion="astions.*"
               minWidth="955" minHeight="600"
               creationComplete="init()" xmlns:astion1="astion.*">
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
        <s:Parallel id="imgEffect" target="{showPic}">
            <s:Move xFrom="0" xTo="0"  yFrom="0" yTo="0" duration="1000" />
            <s:Scale scaleXFrom="1.0" scaleXTo="1.5" scaleYFrom="1.0" scaleYTo="1.5" duration="1000" />
        </s:Parallel>
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.MoveEvent;
            import mx.graphics.ImageSnapshot;
            import mx.graphics.codec.JPEGEncoder; 
             
            private var _file:FileReference;              //  单个图片列表
            private var _fileList:FileReferenceList     //  批量图片列表
            private var isChoice:Boolean;                   //  是否裁剪图片
            //  private var imgData:BitmapData;             //  图片bitmap数据
             
            private function init():void
            {
                _file = new FileReference();
                _fileList = new FileReferenceList();
                _file.addEventListener(Event.SELECT, onSelect);
                _file.addEventListener(Event.COMPLETE, completeHandle);
                box.visible = false;
                isChoice = false;
                group_all.visible = false;
            }
            //  单击选择时
            private function select():void
            {
                var allTypes:FileFilter = new FileFilter("图片类型（*.jpg; *.jpeg; *.png; *.gif）", "*.jpg; *.jpeg; *.png; *.gif");
                _file.browse([allTypes]);
            }
            //  图片被选中时
            private function onSelect(e:Event):void
            {
                _file.load();
            }
            //  图片加载完成时
            private function completeHandle(e:Event):void
            {
                showPic.source = _file.data;
                showPic.width = 400;
                showPic.height = 400;
            }
            //  图片裁剪
            private function cut():void
            {
                if( showPic.source != null) {
                isChoice = true;
                box.visible = true;
                group_all.visible = true;
                uncheckArea();
                }
            }
            //  裁剪图片时，未选中部分变暗
            private function uncheckArea():void {
                //  盒子的宽度
                var boxWidth:int = box.boxWidth; 
                //  盒子的高度
                var boxHeight:int = box.boxHeight;
                //  盒子的坐标
                var originX:int = box.x;
                var originY:int = box.y;
                //  图片显示区域的高，宽
                var imgHeight:int =showPic.height;
                var imgWidth:int = showPic.width;
                //bg_1      加上10PX像素文字的高度
                bg_1.height = originY -30;
                bg_1.width = imgWidth;
                bg_1.x = 0;
                bg_1.y = 0;
                //  bg_2
                bg_2.height = boxHeight;
                bg_2.width = imgWidth - (originX + boxWidth);
                bg_2.x = originX + boxWidth;
                bg_2.y = originY-30;
                //  bg_3      减去10PX像素文字的高度    减去 30PX按钮栏的高度
                bg_3.height = imgHeight - (originY +boxHeight-30);
                bg_3.width = bg_1.width = imgWidth;
                bg_3.x = 0;
                bg_3.y = originY + boxHeight - 30;
                //  bg_4
                bg_4.height = boxHeight;
                bg_4.width = originX;
                bg_4.x = 0;
                bg_4.y = originY - 30;
                 
                //  bg_2.height = bg_4.height = imgHeight - (bg_3.height + bg_1.height);
            }
            //  单击预览时.  返回被选中的区域 bitmapdata;
            private function preview():BitmapData
            {
                showSmallPic.source = "";
                var bmpData:BitmapData = ImageSnapshot.captureBitmapData(showPic);
                var re:Rectangle = new Rectangle(box.x, box.y, box.boxWidth, box.boxHeight);
                var byte:ByteArray = bmpData.getPixels(re);
                //  已经定义为全局变量，方便数据的存储操作。
               //  var imgData:BitmapData = new BitmapData(box.boxWidth, box.boxHeight);
                var imgData:BitmapData = new BitmapData(box.boxWidth, box.boxHeight);       
                //当前的bytearray.position为最大长度，要设为从0开始读取
                byte.position = 0; 
                var imgRe:Rectangle = new Rectangle(0, 0, box.boxWidth, box.boxHeight);
                imgData.setPixels(imgRe, byte);
                showSmallPic.source = new Bitmap(imgData);
                return imgData;
                /*
                var bmpData_2:BitmapData = new BitmapData(100, 100);
                var p:Point = new Point(40, 40);
                var area:Rectangle = new Rectangle(0, 0, 100, 100);
                //  bmpData_2.draw(bmpData, new Matrix());
                bmpData_2.copyPixels(bmpData, area, p);
                var bmp:Bitmap = new Bitmap(bmpData_2);
                showSmallPic.source = bmp;
                */
            }
            //  图片保存
            private function save():void
            {
                var imgData:BitmapData = preview();
                if(!isChoice) {
                    Alert.show("没有预览图片", "提示信息");
                    return;
                }
                if(imgData != null)
                {
                    var file:FileReference = new FileReference();
                    var date:Date = new Date();
                    var ba:ByteArray = new JPEGEncoder().encode(imgData);
                    file.save(ba, date.fullYear.toString() + date.month.toString() + date.day.toString() + date.milliseconds.toString() + ".jpg");
                } else {
                    Alert.show("保存出错！请重试", "提示信息");
                }
            }
             
            protected function showPic_clickHandler(event:MouseEvent):void
            {
                // TODO Auto-generated method stub
                //  imgEffect.play(null, false);
                showPic.width = 400;
                showPic.height = 400;
                showPic.setStyle("backgroundAlpha", 0.6);
                showPic.graphics.lineStyle(1, 0, 100);
                showPic.graphics.lineTo(100, 0);
                showPic.graphics.lineTo(100, 50);
                showPic.graphics.lineTo(0, 50);
                showPic.graphics.lineTo(0, 0);
            }
             
            //  图片修改时防止操作图片的界限
            protected function box_moveHandler():void
            {
                //  当选区X坐标小于图片的X坐标时   左部
                if(box.x < showPic.x) {
                    box.x = showPic.x;
                }
                //  当选区Y坐标小于图片的Y坐标时     顶部
                if(box.y < (showPic.y +30 )) {
                    box.y = showPic.y +30;
                }
                //  当选区X坐标 大于图片X坐标时   右部
                if((box.x + box.boxWidth) > (showPic.x + showPic.width)) {
                    box.x = showPic.x + showPic.width - box.boxWidth
                }
                //  当选区Y坐标大于图片Y坐标时  底部
                if((box.y + box.boxHeight) > (showPic.y + showPic.height +30)) {
                    box.y = showPic.y + showPic.height - box.boxHeight + 30;
                }
                //  当选区的高度大于图片的高度时
                if(box.boxHeight > showPic.height) {
                    box.boxHeight = showPic.height;
                }
                //  当选区的宽度大于图片的宽度时
                if(box.boxWidth > showPic.width) {
                    box.boxWidth = showPic.width;
                }
                //  未选中区域变色
                uncheckArea();
            }
             
        ]]>
    </fx:Script>
    <s:layout>
        <s:BasicLayout />
    </s:layout>
    <s:Group id="group_all" depth="2" y="30" x="0">
        <s:Rect id="bg_1" x="0" y="0" width="100" height="80">
            <s:fill>
                <s:SolidColor color="#333" alpha="0.6" />
            </s:fill>
        </s:Rect>
        <s:Rect id="bg_2" x="0" y="0" width="100" height="80">
            <s:fill>
                <s:SolidColor color="#333" alpha="0.6" />
            </s:fill>
        </s:Rect>
        <s:Rect id="bg_3" x="0" y="0" width="100" height="80">
            <s:fill>
                <s:SolidColor color="#333" alpha="0.6" />
            </s:fill>
        </s:Rect>
        <s:Rect id="bg_4" x="0" y="0" width="100" height="80">
            <s:fill>
                <s:SolidColor color="#333" alpha="0.6" />
            </s:fill>
        </s:Rect>
    </s:Group>
    <astion1:ScaleBox id="box"  x="130" y="180" width="40" height="40" depth="3" move="box_moveHandler()" resize="box_moveHandler()" />
    <mx:VBox  verticalGap="0" borderVisible="false">
        <mx:HBox>
            <s:Button label="选择图片" click="select()" width="80" height="30"   useHandCursor="true" buttonMode="true" styleName="btnStyle" />
            <s:Button label="图片裁剪" click="cut()" width="80" height="30"   useHandCursor="true" buttonMode="true" styleName="btnStyle" />
            <s:Button label="预览" click="preview()" width="80" height="30"   useHandCursor="true" buttonMode="true" styleName="btnStyle" />
            <s:Button label="另存本地" click="save()" width="80" height="30"   useHandCursor="true" buttonMode="true" styleName="btnStyle" />
        </mx:HBox>
        <mx:HBox width="540" height="400"  id="container_clip">
            <s:Image id="showPic" y="30" x="0" width="400" height="400" click="showPic_clickHandler(event)" />
            <s:Image id="showSmallPic" x="440" width="120" height="120" />
        </mx:HBox>
        <mx:HBox>
        </mx:HBox>
    </mx:VBox>
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace mx "library://ns.adobe.com/flex/mx";
        .btnStyle {
            borderVisible : true;
            textAlign : center;
            verticalAlign : center;
            lineHeight : 30px;
            fontFamily : "宋体", "微软雅黑";
        }
        .t_6    {
            backgroundColor : #333;
            backgroundAlpha : 0.6;
        }
    </fx:Style>
</s:Application>