Annotating an Image in AS3 with a Rectangle and Save Result - image

Question

I am currently looking at a face detection example found in a zip file here:
Marilena_mod10.zip
The example loads an image and then highlights the face with a black rectangle.
I would like to save the resulting image, in other words, annotate the image with a square and nothing else (just the image and square, not the entire stage).
So far I can save the image by processing it as bitmap data and resaving it, but I cannot save the 'square'. I've tried copying the line that draws the square and drawing it to another bitmap object, tried drawing it on a sprite, and I've tried using a matrix figuring it was being drawn out of bounds. No luck.
Below is the original code followed by my futile attempts (I realize it saves a blank white image, I was trying to see if I could just draw a square):
package
{
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.events.Event;
import flash.geom.Rectangle;
import flash.net.URLRequest;
import flash.text.TextField;
import jp.maaash.ObjectDetection.ObjectDetector;
import jp.maaash.ObjectDetection.ObjectDetectorOptions;
import jp.maaash.ObjectDetection.ObjectDetectorEvent;
import flash.utils.getTimer;
public class FaceDetector extends Sprite{
private var debug :Boolean = true;
private var detector :ObjectDetector;
private var options :ObjectDetectorOptions;
private var faceImage :Loader;
private var bmpTarget :Bitmap;
private var view :Sprite;
private var faceRectContainer :Sprite;
private var tf :TextField;
private var lastTimer:int = 0;
public function FaceDetector() {
initUI();
initDetector();
faceImage.load( new URLRequest("013.jpg") );
}
private function initUI():void{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
view = new Sprite;
addChild(view);
faceImage = new Loader;
faceImage.contentLoaderInfo.addEventListener( Event.COMPLETE, function(e :Event) :void {
startDetection();
});
view.addChild( faceImage );
faceRectContainer = new Sprite;
view.addChild( faceRectContainer );
tf = new TextField;
tf.x = 256;
tf.width = 600;
tf.height = 300;
tf.textColor = 0x000000;
tf.multiline = true;
view.addChild( tf );
}
private function initDetector():void{
detector = new ObjectDetector;
detector.options = getDetectorOptions();
detector.addEventListener(ObjectDetectorEvent.DETECTION_COMPLETE,function( e :ObjectDetectorEvent ):void{
logger("[ObjectDetectorEvent.COMPLETE]");
tf.appendText( "\ntime: "+(new Date)+" "+e.type );
detector.removeEventListener( ObjectDetectorEvent.DETECTION_COMPLETE, arguments.callee );
if( e.rects ){
var g :Graphics = faceRectContainer.graphics;
g.clear();
g.lineStyle( 2 ); // black 2pix
e.rects.forEach( function( r :Rectangle, idx :int, arr :Array ) :void {
g.drawRect( r.x, r.y, r.width, r.height );
});
}
});
detector.addEventListener( ObjectDetectorEvent.DETECTION_START, function(e :ObjectDetectorEvent) :void {
tf.appendText( "\ntime: "+(new Date)+" "+e.type );
});
}
private function startDetection():void{
logger("[startDetection]");
bmpTarget = new Bitmap( new BitmapData( faceImage.width, faceImage.height, false ) )
bmpTarget.bitmapData.draw( faceImage );
detector.detect( bmpTarget.bitmapData );
}
private function getDetectorOptions() :ObjectDetectorOptions {
options = new ObjectDetectorOptions();
options.min_size = 50;
return options;
}
private function logger(... args):void{
if(!debug){ return; }
trace( args, getTimer(), getTimer() - lastTimer);
lastTimer = getTimer();
}
}
}
My code:
package
{
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.events.Event;
import flash.geom.*;//Rectangle;
import flash.net.URLRequest;
import flash.text.TextField;
import jp.maaash.ObjectDetection.ObjectDetector;
import jp.maaash.ObjectDetection.ObjectDetectorOptions;
import jp.maaash.ObjectDetection.ObjectDetectorEvent;
import com.adobe.images.*;
import flash.utils.getTimer;
////
import flash.filesystem.*;
import flash.utils.ByteArray;
////
public class FaceDetector extends Sprite{
private var debug :Boolean = true;
private var detector :ObjectDetector;
private var options :ObjectDetectorOptions;
private var faceImage :Loader;
private var bmpTarget :Bitmap;
private var view :Sprite;
private var faceRectContainer :Sprite;
private var tf :TextField;
private var lastTimer:int = 0;
public function FaceDetector() {
initUI();
initDetector();
faceImage.load( new URLRequest("013.jpg") );
}
private function initUI():void{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
view = new Sprite;
addChild(view);
faceImage = new Loader;
faceImage.contentLoaderInfo.addEventListener( Event.COMPLETE, function(e :Event) :void {
startDetection();
});
view.addChild( faceImage );
faceRectContainer = new Sprite;
view.addChild( faceRectContainer );
tf = new TextField;
tf.x = 256;
tf.width = 600;
tf.height = 300;
tf.textColor = 0x000000;
tf.multiline = true;
view.addChild( tf );
}
private function initDetector():void{
detector = new ObjectDetector;
detector.options = getDetectorOptions();
detector.addEventListener(ObjectDetectorEvent.DETECTION_COMPLETE,function( e :ObjectDetectorEvent ):void{
logger("[ObjectDetectorEvent.COMPLETE]");
tf.appendText( "\ntime: "+(new Date)+" "+e.type );
detector.removeEventListener( ObjectDetectorEvent.DETECTION_COMPLETE, arguments.callee );
var rt:Sprite = new Sprite();
var bmprt:Bitmap = new Bitmap( new BitmapData( faceImage.width, faceImage.height, false ) );
var matrix:Matrix = new Matrix();
var rect:Rectangle = new Rectangle();
if( e.rects ){
var g :Graphics = faceRectContainer.graphics;
g.clear();
g.lineStyle( 2 ); // black 2pix
e.rects.forEach( function( r :Rectangle, idx :int, arr :Array ) :void {
g.drawRect( r.x, r.y, r.width, r.height );
matrix.translate(-r.x, -r.y);
rect = r;
rt.graphics.drawRect(r.x, r.y, r.width, r.height );
});
}
var file:File = File.applicationStorageDirectory.resolvePath("testoutput.jpg");
var fs:FileStream = new FileStream();
var byteArray:ByteArray;
var jpgEncoder:JPGEncoder = new JPGEncoder( 90 );
//rt.graphics.draw(g);
bmpTarget.bitmapData.draw(rt);
bmprt.bitmapData.draw(rt, matrix);
byteArray = jpgEncoder.encode( bmprt.bitmapData );
fs.open(file, FileMode.WRITE);
fs.writeBytes(byteArray);
fs.close();
});
detector.addEventListener( ObjectDetectorEvent.DETECTION_START, function(e :ObjectDetectorEvent) :void {
tf.appendText( "\ntime: "+(new Date)+" "+e.type );
});
}
private function startDetection():void{
logger("[startDetection]");
bmpTarget = new Bitmap( new BitmapData( faceImage.width, faceImage.height, false ) )
bmpTarget.bitmapData.draw( faceImage );
detector.detect( bmpTarget.bitmapData );
}
private function getDetectorOptions() :ObjectDetectorOptions {
options = new ObjectDetectorOptions();
options.min_size = 50;
return options;
}
private function logger(... args):void{
if(!debug){ return; }
trace( args, getTimer(), getTimer() - lastTimer);
lastTimer = getTimer();
}
}
}
TL;DR:
How do you load an image, draw a square on it, and then save the result, assuming you already know how to load and save images?
Any help is appreciated, thanks in advance.
EDIT
Here is the final code for anyone interested:
package
{
import flash.display.StageScaleMode;
import flash.display.StageAlign;
import flash.display.Sprite;
import flash.display.Loader;
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.display.Graphics;
import flash.events.Event;
import flash.geom.*;//Rectangle;
import flash.net.URLRequest;
import flash.text.TextField;
import jp.maaash.ObjectDetection.ObjectDetector;
import jp.maaash.ObjectDetection.ObjectDetectorOptions;
import jp.maaash.ObjectDetection.ObjectDetectorEvent;
import com.adobe.images.*;
import flash.utils.getTimer;
////
import flash.filesystem.*;
import flash.utils.ByteArray;
////
public class FaceDetector extends Sprite{
private var debug :Boolean = true;
private var detector :ObjectDetector;
private var options :ObjectDetectorOptions;
private var faceImage :Loader;
private var bmpTarget :Bitmap;
private var view :Sprite;
private var faceRectContainer :Sprite;
private var tf :TextField;
private var lastTimer:int = 0;
public function FaceDetector() {
initUI();
initDetector();
faceImage.load( new URLRequest("013.jpg") );
}
private function initUI():void{
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.align = StageAlign.TOP_LEFT;
view = new Sprite;
addChild(view);
faceImage = new Loader;
faceImage.contentLoaderInfo.addEventListener( Event.COMPLETE, function(e :Event) :void {
startDetection();
});
view.addChild( faceImage );
faceRectContainer = new Sprite;
view.addChild( faceRectContainer );
tf = new TextField;
tf.x = 256;
tf.width = 600;
tf.height = 300;
tf.textColor = 0x000000;
tf.multiline = true;
view.addChild( tf );
}
private function initDetector():void{
detector = new ObjectDetector;
detector.options = getDetectorOptions();
detector.addEventListener(ObjectDetectorEvent.DETECTION_COMPLETE,function( e :ObjectDetectorEvent ):void{
logger("[ObjectDetectorEvent.COMPLETE]");
tf.appendText( "\ntime: "+(new Date)+" "+e.type );
detector.removeEventListener( ObjectDetectorEvent.DETECTION_COMPLETE, arguments.callee );
var bmprt:Bitmap = new Bitmap( new BitmapData( faceImage.width, faceImage.height, false ) );
if( e.rects ){
var g :Graphics = faceRectContainer.graphics;
g.clear();
g.lineStyle(3, 0xFF0000, 1); // black 2pix--- parameters(thicknes in pixels, color in hex, alpha (0-1))
e.rects.forEach( function( r :Rectangle, idx :int, arr :Array ) :void {
g.drawRect( r.x, r.y, r.width, r.height );
});
}
var file:File = File.applicationStorageDirectory.resolvePath("testoutput.jpg");
var fs:FileStream = new FileStream();
var byteArray:ByteArray;
var jpgEncoder:JPGEncoder = new JPGEncoder( 90 );
bmprt.bitmapData.draw(faceImage);
bmprt.bitmapData.draw(faceRectContainer);
byteArray = jpgEncoder.encode( bmprt.bitmapData );
fs.open(file, FileMode.WRITE);
fs.writeBytes(byteArray);
fs.close();
});
detector.addEventListener( ObjectDetectorEvent.DETECTION_START, function(e :ObjectDetectorEvent) :void {
tf.appendText( "\ntime: "+(new Date)+" "+e.type );
});
}
private function startDetection():void{
logger("[startDetection]");
bmpTarget = new Bitmap( new BitmapData( faceImage.width, faceImage.height, false ) )
bmpTarget.bitmapData.draw( faceImage );
detector.detect( bmpTarget.bitmapData );
}
private function getDetectorOptions() :ObjectDetectorOptions {
options = new ObjectDetectorOptions();
options.min_size = 50;
return options;
}
private function logger(... args):void{
if(!debug){ return; }
trace( args, getTimer(), getTimer() - lastTimer);
lastTimer = getTimer();
}
}
}
Thanks to Vesper for the help.

Answer 1

Well, you load the image as a Bitmap, then determine where to draw the rectangle, create a Shape and draw the rectangle on its graphics, then call bitmap.bitmapData.draw(shape) to draw the rectangle over the loaded bitmap, then save the bitmap. In your code, after you've prepared the rectangles, you do something like this:
bmprt.bitmapData.copyPixels(faceImage.bitmapData,faceImage.bitmapData.rect,new Point());
bmprt.bitmapData.draw(faceRectContainer);
Then save bmprt as you do.