Flash在线拍摄用户头象

很多网站在上传用户头象时，除了传统方式上传外，都支持在线摄像头拍照并做简单编辑，完成之后再将图象数据提交到服务端(比如ASP.Net)，这几天正好需要这个功能，研究了下，思路如下：

1、先获取摄像头视频

2、利用BitmapData.draw来对视频截图

3、在截图上，放一个方块允许用户手动调整位置，同时允许截图做缩放

4、用户调整完成后，对指定区域的BitmapData做copyPixes处理(即拷贝指定区域的像素)

5、将上一步得到的新BitmapData进行Jpeg编码压缩，然后再转到base64字符串

6、将字符串发送到ASP.Net，然后还原成图片保存即可(即base64的解码)

 

flash端代码:（第6步省略了）

import flash.media.Camera;
import flash.text.TextField;
import flash.media.Video;
import flash.text.TextFormat;
import fl.controls.Button;
import flash.utils.Timer;
import flash.events.MouseEvent;
import flash.display.BitmapData;
import flash.display.Bitmap;
import flash.display.Sprite;
import flash.geom.Rectangle;
import flash.events.Event;

var _cam:Camera;
var _txtInfo:TextField = txtInfo;
var _txtMsg:TextField = txtMsg;
var _btnGet:Button = btnGet;
var _btnSave:Button = btnSave;
var _video:Video = myVideo;
var _timer:Timer;
var _videoIsWorked:Boolean = false;
var _bmp:Bitmap;
var _bmpTest:Bitmap;
var _mask:Sprite;
var _slider:SimpleSlider;

init();

function init():void
{
	this._txtMsg.visible = false;
	this._btnGet.label = "拍 照";
	this._btnSave.label = "保 存";
	this._txtInfo.selectable = false;
	var style:TextFormat = new TextFormat();
	style.font = "宋体";
	style.size = 12;//字体大小
	style.color = 0x000000;//RGB色
	style.leading = 7;//行间距
	this._btnGet.setStyle("textFormat",style);
	this._btnSave.setStyle("textFormat",style);
	getCamera();
}

function getCamera():void
{

	this._btnGet.enabled = false;
	this._btnSave.enabled = false;

	this._cam = Camera.getCamera();
	if (_cam == null)
	{
		this._txtInfo.text = "未检测到摄像头设备!";
		return;
	}



	_cam.addEventListener(StatusEvent.STATUS, cameraStatusHandler);
	_cam.addEventListener(ActivityEvent.ACTIVITY, cameraActivityHandler);

	_cam.setQuality(0,0);
	this._video.attachCamera(this._cam);

}

//用户选择是否摄像头时触发 ;
function cameraStatusHandler(e:StatusEvent):void
{

	if (e.code == "Camera.Muted")
	{
		this._txtInfo.text = "您不允许使用摄像头!";
	}
	else if (e.code == "Camera.Unmuted")
	{
		this._txtInfo.text = "摄像头视频获取中...";
		_timer = new Timer(100,20);//每隔100ms检测摄像头状态，一共检测20次   
		cameraActivityHandler(null);
	}
}


//摄像头有活动时被触发 
function cameraActivityHandler(e:ActivityEvent):void
{
	if (! _videoIsWorked)
	{
		if (_timer != null)
		{
			_timer.addEventListener(TimerEvent.TIMER, checkCamera);
			_timer.addEventListener(TimerEvent.TIMER_COMPLETE, checkCameraComplete);
			_timer.start();
		}
	}
}


//timer回调函数，用于检测摄像头设备是否正确 
function checkCamera(e:TimerEvent):void
{
	this._txtInfo.text = "摄像头视频获取中...";
	if (this._cam.currentFPS > 0)
	{
		_timer.stop();
		_videoIsWorked = true;
		this._txtInfo.text = "";//摄像头工作正常

		this._txtInfo.text = "摄像头正常，请点击拍照";

		//trace("_cam.width=",_cam.width,",_cam.height=",_cam.height);

		this._btnGet.addEventListener(MouseEvent.CLICK,btnGet_Click);
		this._btnGet.enabled = true;

		this._video.width = 240;
		this._video.height = 180;

		//trace(this._video.width,this._video.height);

	}

}


function btnGet_Click(e:MouseEvent):void
{
	var bmd:BitmapData = new BitmapData(_cam.width,_cam.height);
	bmd.draw(_video);
	//trace(bmd.width,bmd.height);
	if (this._bmp == null)
	{
		this._bmp = new Bitmap(bmd);
		addChild(_bmp);
		_bmp.x = 260;
		_bmp.y = 10;
		_bmp.width = _video.width;
		_bmp.height = _video.height;

		if (this._mask == null)
		{
			this._mask = new Sprite();
			this._mask.graphics.beginFill(0xffffff,0.3);
			this._mask.graphics.drawRect(0,0,125,125);
			this._mask.graphics.endFill();
			this._mask.graphics.lineStyle(1,0xff0000,1);
			this._mask.graphics.lineTo(1,124);
			this._mask.graphics.lineTo(124,124);
			this._mask.graphics.lineTo(124,1);
			this._mask.graphics.lineTo(1,1);
			addChild(this._mask);
			this._mask.x = 260 + 57;
			this._mask.y = 10 + 27;
			this._mask.buttonMode = true;
			this._mask.addEventListener(MouseEvent.MOUSE_DOWN,mask_startDrag);
			this.stage.addEventListener(MouseEvent.MOUSE_UP,stage_endDrag);

			if (_slider == null)
			{
				_slider = new SimpleSlider(125,180,180);
				_slider.backWidth = 120;
				_slider.backHeight = 6;
				_slider.handleHeight = 16;
				_slider.addEventListener(Event.CHANGE,slider_Change);
				addChild(_slider);
				_slider.x = 320;
				_slider.y = 205;
				this._txtMsg.visible = true;
			}
		}
	}
	else
	{
		this._bmp.bitmapData = bmd;
	}
	this._btnSave.enabled = true;

	this._txtInfo.text = "拖动左侧方块可调整位置"
	;
	this._btnSave.addEventListener(MouseEvent.CLICK,btnSave_Click);
}


function btnSave_Click(e:Event):void
{
	//因为视频的大小跟摄像头原始像素的尺寸并不一致（即视频可能缩放过了，所以要用比例调整回最初始的状态）
	var ratio:Number = this._cam.width / this._bmp.width;

	var imgWidth:int = this._mask.width * ratio;
	var imgHeight:int = this._mask.height * ratio;
	//trace(ratio);

	var bmd:BitmapData = new BitmapData(imgWidth,imgHeight,false,0xffff99);
	bmd.copyPixels(this._bmp.bitmapData,new Rectangle((this._mask.x-260)*ratio,(this._mask.y - 10)*ratio,imgWidth,imgHeight),new Point());

	if (this._bmpTest == null)
	{
		this._bmpTest = new Bitmap(bmd);
		addChild(_bmpTest);
		_bmpTest.x = 375;
		_bmpTest.y = 230;

	}
	else
	{
		this._bmpTest.bitmapData = bmd;
	}

	_bmpTest.width = this._mask.width;
	_bmpTest.height = this._mask.height;
	trace("_bmpTest.width=",this._mask.width,",_bmpTest.height=",this._mask.height);

	var jpegEncoder:JPGEncoder = new JPGEncoder();
	var jpegArr:ByteArray = jpegEncoder.encode(bmd);//压缩成jpeg  
	
	trace(jpegArr.length);
	
	var base64string:String = Base64.encode(jpegArr);
	
	txtBase64.text = base64string;
	
	trace(base64string.length);

}

function slider_Change(e:Event):void
{
	//trace(e);
	this._bmp.height = this._slider.value;
	this._bmp.width = this._bmp.height * 4 / 3;
}

function mask_startDrag(e:MouseEvent):void
{
	this._mask.startDrag(false,new Rectangle(260,10,240-125,180-125));


}

function stage_endDrag(e:MouseEvent):void
{
	this._mask.stopDrag();
	//trace("x=",_mask.x);
	//trace("y=",_mask.y);
}

function checkCameraComplete(e:TimerEvent):void
{
	this._txtInfo.text = "设备无法使用！(有可能被占用)";
	_timer.removeEventListener(TimerEvent.TIMER, checkCamera);
	_timer.removeEventListener(TimerEvent.TIMER_COMPLETE, checkCameraComplete);
	_timer = null;
}

Flash在线演示(需要电脑上连接好摄像头)

C#端的处理示例：

using System;
using System.Drawing;
using System.Drawing.Imaging;
using System.IO;
using System.Web;

namespace OnlinePhotoCapture
{
    /// <summary>
    /// 将图片base64字符串原还原为图片并调整尺寸后保存(by 菩提树下的杨过http://yjmyzz.cnblogs.com/)   
    /// </summary>    
    public class SavePhoto : IHttpHandler
    {

        public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";

            string base64String = "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";

            Image bmp = null;
            MemoryStream ms = null;
            try
            {
                byte[] b = Convert.FromBase64String(base64String);
                ms = new MemoryStream(b);
                bmp = ImageResize(new Bitmap(ms),125,125);
                bmp.Save(context.Request.MapPath("logo.jpg"), ImageFormat.Jpeg);
                context.Response.Write("success");
            }
            catch (Exception ex)
            {
                context.Response.Write("failure:" + ex.Message.ToString());
            }
            finally
            {
                bmp.Dispose();
                ms.Dispose();
            }

        }

       

        /// <summary>
        /// 修改图片尺寸
        /// </summary>
        /// <param name="imgSrc"></param>
        /// <returns></returns>
        private Image ImageResize(Image imgSrc,int width,int height)
        {
            Image newImage = imgSrc.GetThumbnailImage(125, 125, null, new IntPtr());
            Graphics g = Graphics.FromImage(newImage);
            g.DrawImage(newImage, 0, 0, newImage.Width, newImage.Height);
            g.Dispose();
            return newImage;
        }


        public bool IsReusable
        {
            get
            {
                return false;
            }
        }

    }
}