bitmapData 到 base64，然后到 html 标记 img 与 src 包含 base64 编码数据

Question

我正在尝试从我的摄像头获取快照。我有这部分代码（as3）用于快照

        private static const encodeChars:Array = ['A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z','0','1','2','3','4','5','6','7','8','9','+','/'];

        private function snap():String{
                var bitmapData:BitmapData = new BitmapData(myVideo.width, myVideo.height);
                bitmapData.draw(myVideo);
                return encodeByteArray(bitmapData);
        }

        public static function encodeByteArray(data:BitmapData):String{  
                    if(data == null)throw new Error("data parameter can not be empty!");  
                    var bytes:ByteArray = data.getPixels(data.rect);  
                    bytes.writeShort(data.width);  
                    bytes.writeShort(data.height);  
                    bytes.writeBoolean(data.transparent);  
                    bytes.compress(); 
                    var out:Array = [];
                    var i:int = 0;
                    var j:int = 0;
                    var r:int = bytes.length % 3;
                    var len:int = bytes.length - r;
                    var c:int;
                    while (i < len) {
                        c = bytes[i++] << 16 | bytes[i++] << 8 | bytes[i++];
                        out[j++] = encodeChars[c >> 18] + encodeChars[c >> 12 & 0x3f] + encodeChars[c >> 6 & 0x3f] + encodeChars[c & 0x3f];
                    }
                    if (r == 1) {
                        c = bytes[i++];
                        out[j++] = encodeChars[c >> 2] + encodeChars[(c & 0x03) << 4] + "==";
                    }
                    else if (r == 2) {
                        c = bytes[i++] << 8 | bytes[i++];
                        out[j++] = encodeChars[c >> 10] + encodeChars[c >> 4 & 0x3f] + encodeChars[(c & 0x0f) << 2] + "=";
                    }
                    return out.join('');
        }

在我从 js 调用它之后，我在我的 html 中创建了一个 img 标记，并将接收到的数据粘贴到 img 的 src 属性中，之前带有字符串“data:image/jpeg;base64”。但是我的浏览器图标坏了。我做错了什么以及如何使用我的 cam 中的 base64 编码数据创建图像？

感谢您的帮助！

Answer 1

我认为问题在于您最初从 BitmapData 创建 ByteArray 的方式。 Flash自带编码，建议大家使用：

public static function encodeByteArray(data:BitmapData):String{  
    if(data == null)throw new Error("data parameter can not be empty!");  
    var bytes:ByteArray = data.encode(data.rect, new JPEGEncoderOptions(100));  //100 is the JPG quality
    var out:Array = [];
    var i:int = 0;
    var j:int = 0;
    var r:int = bytes.length % 3;
    var len:int = bytes.length - r;
    var c:int;
    while (i < len) {
        c = bytes[i++] << 16 | bytes[i++] << 8 | bytes[i++];
        out[j++] = encodeChars[c >> 18] + encodeChars[c >> 12 & 0x3f] + encodeChars[c >> 6 & 0x3f] + encodeChars[c & 0x3f];
    }
    if (r == 1) {
        c = bytes[i++];
        out[j++] = encodeChars[c >> 2] + encodeChars[(c & 0x03) << 4] + "==";
    }
    else if (r == 2) {
        c = bytes[i++] << 8 | bytes[i++];
        out[j++] = encodeChars[c >> 10] + encodeChars[c >> 4 & 0x3f] + encodeChars[(c & 0x0f) << 2] + "=";
    }
    return out.join('');
}

Answer 2

您可以尝试这样做...

首先，您需要获取Base64 SWC here（右键单击并保存红色文本，然后返回此处）。如果您在安装 SWC 时需要帮助，可以查看我的另一个 answer here。 （如果您还没有安装 AS3 JPEG 编码器，您还需要那里提到的 AS3 Corelib。AS3 Corelib 负责从您的原始位图数据编码真正的 JPG 或 PNG 图像）

在代码中：您需要 public 变量来存储图像数据字节和字符串，并在快照函数和 base64 编码函数等之间更新它们。所以在这个示例代码中 actual_IMG 是实际图像数据（带有 jpeg 标头）准备好 base64 或只是使用fileReference 将常规 .jpg 保存到磁盘。

public var actual_IMG:ByteArray = new ByteArray;
public var image_B64_str:String = new String;

private function snap():void
{
    var bitmapData:BitmapData = new BitmapData(myVideo.width, myVideo.height);
    bitmapData.draw(myVideo);

    var jpg_Quality:int= 100;
    var jpgEncoder:JPGEncoder = new JPGEncoder(jpg_Quality);  

    actual_IMG = jpgEncoder.encode(bitmapData);
    encode_Image(); //do base64 encode function

}

private function encode_Image():void
{
    image_B64_str = Base64.encode(actual_IMG); //update string with b64 data
    doSomeFunction(); //do whatever is needed with.. image_B64_str (JPG string)
}

private function doSomeFunction():void
{
    //example: send "image_B64_str" to Javascript or save to disk etc etc...
}

希望对你有帮助..

直接链接更新：

• Base64 编码器/解码器 SWC = http://www.sociodox.com/base64.html
• JPG/PNG 编码器 = https://github.com/mikechambers/as3corelib
• 如何在您的项目中安装 SWC = as3 PNGEncoder error