Flex 4文件引用所选图像文件的尺寸(宽度和高度)

3

我使用fileReference.browse()从硬盘中选择图像文件。

请问如何检查所选图像文件的宽度和高度?

谢谢!

3个回答

8

使用loadBytes()将fileReference.data加载到Loader中。然后你会得到:sourceBMP:Bitmap = loader.content as Bitmap;

这里是一个示例代码:

MXML部分:

<fx:Declarations>
    <net:FileReference id="fileReference"
        select="fileReference_select(event);"
        complete="fileReference_complete(event);" />
</fx:Declarations>
<s:Button id="uplaodImageBtn"
    label="Upload Image"
    click="uplaodImageBtn_clickHandler()"/>

AS3 部分:

private function uplaodImageBtn_clickHandler() : void {
    var arr:Array = [];
    arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
    fileReference.browse(arr);
}

private function fileReference_select(evt:Event):void {
    fileReference.load();
}

private function fileReference_complete(event:Event):void {
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loader_complete);
    loader.loadBytes(fileReference.data);
}

public function loader_complete (event:Event) : void {
    var sourceBMP:Bitmap = event.currentTarget.loader.content as Bitmap;
    Alert.show(sourceBMP.width + ', ' +sourceBMP.height);
}

谢谢你,安迪!我想知道这种技术会给应用程序增加多少开销。但是非常好的答案。谢谢! - Francisc
我看到你选择了一个不同的解决方案,将图像添加到显示列表中。根据你8月10日的评论,我以为你不想这样做。 - andi
确实。我之前没有看到下面的MXML部分:<s:Image id="image" maxHeight="200" maxWidth="200"/>。一直以为image只是一个AS变量,没有被添加到舞台上。 - Francisc

1

如果您等待图像源属性更新,就应该能够读取image.sourceWidth和image.sourceHeight。这将给您原始的未缩放值。

<fx:Script>
    <![CDATA[

        import mx.events.FlexEvent;     

        private function browseImage(event:MouseEvent):void {
            var arr:Array = [];
            arr.push(new FileFilter("Images", ".gif;*.jpeg;*.jpg;*.png"));
            imageFileReference.browse(arr);         
        }

        private function imageSelect(evt:Event):void {
            imageFileReference.load();
        }

        private function imageComplete(evt:Event):void {
            image.source = smallImageFileReference.data;
            image.addEventListener(FlexEvent.UPDATE_COMPLETE, getImageSize);                
        }

        private function getImageSize(evt:FlexEvent):void {
            image.removeEventListener(FlexEvent.UPDATE_COMPLETE, getImageSize);         
            imageWidth.text = image.sourceWidth + "px";
            imageHeight.text = image.sourceHeight + "px";
        }
    ]]>

</fx:Script>

<fx:Declarations>
    <net:FileReference id="imageFileReference" 
        select="imageSelect(event)" 
        complete="imageComplete(event)"/>
</fx:Declarations>

<s:VGroup width="100%" height="100%">

    <s:HGroup width="100%" verticalAlign="middle">
        <s:Label fontWeight="bold" text="Width:" />
        <mx:Text id="imageWidth" />
    </s:HGroup> 

    <s:HGroup width="100%" verticalAlign="middle">
        <s:Label fontWeight="bold" text="Height:" />
        <mx:Text id="imageHeight" />
    </s:HGroup>

    <s:Image id="image" maxHeight="200" maxWidth="200" />
    <s:Button label="Browse for Image" click="browseImage(event)" />

</s:VGroup>

1

从Flex的上下文来看,我相信一旦你从浏览器中获取了结果,它就只是一个byteArray。理论上,如果您将该byteArray作为图像标记的源,则可以通过将该图像添加到容器后以此方式获得其高度和宽度。

否则,我不认为使用Flex可以轻松地从本地文件获取此类元数据信息。


是的,它是一个ByteArray。我考虑过通过编程方式创建Image对象,但担心这样做会增加额外的开销。你的意思是即使我这样做,我也必须使用addChild才能测量其内容的尺寸吗?我不关心容器的大小,只关心所选图片的宽度和高度。谢谢! - Francisc
1
是的,创建图像对象可能会有开销。我认为,除非使用AddChild方法将其添加到父元素中,否则不会测量图像的高度和宽度,因此它们将为零,除非你显式地设置它们。 - JeffryHouser

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接