如何解码此图像数据以HTML格式显示

Question

我在MYSQL中有像这样的图像数据

0xFFD8FFE000104A46494600010201004800480000FFE10BA44578696600004D4D002A000000080007011200030000000100010000011A00050000000100000062011B0005000000010000006A01280003000000010002000001310002000000140000007201320002000000140000008687690004000000010000009C000000C80000004800000001000000480000000141646F62652050686F746F73686F7020372E3000323030373A30363A32312032313A33383A35350000000003A001000300000001FFFF0000A00200040000000100000064A0030004000000010000009B0000000000000006010300030000000100060000011A00050000000100000116011B0005000000010000011E012800030000000100020000020100040000000100000126020200040000000100000A760000000000000048000000010000004800000001FFD8FFE000104A46494600010201004800480000FFED000C41646F62655F434D0002FFEE000E41646F626500648000000001FFDB0084000C08080809080C09090C110B0A0B11150F0C0C0F1518131315131318110C0C0C0C0C0C110C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C010D0B0B0D0E0D100E0E10140E0E0E14140E0E0E0E14110C0C0C0C0C11110C0C0C0C0C0C110C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0C0CFFC00011080080005303012200021101031101FFDD00040006FFC4013F0000010501010101010100000000000000030001020405060708090A0B0100010501010101010100000000000000010002030405060708090A0B1000010401030204020507060805030C33010002110304211231054151611322718132061491A1B14223241552C16233347282D14307259253F0E1F163733516A2B283264493546445C2A3743617D255E265F2B384C3D375E3F3462794A485B495C4D4E4F4A5B5C5D5E5F55666768696A6B6C6D6E6F637475767778797A7B7C7D7E7F711000202010204040304050607070605350100021103213112044151617122130532819114A1B14223C152D1F0332462E1728292435315637334F1250616A2B283072635C2D2449354A317644555367465E2F2B384C3D375E3F34694A485B495C4D4E4F4A5B5C5D5E5F55666768696A6B6C6D6E6F62737475767778797A7B7C7FFDA000C03010002110311003F00F5449243C9C8A7168B322F70655534B9EE3E01252441C8CDC3C6FE917D75793DC01FC579D75FFAF59792FF004B1DC71B1C8FA0D30E3AEDFD2583FEA59EC5CD5BD66CDD009E793A933E69BC4B845F5A7FD6AE86DB057F68DC4CEAD6B88D049F76D47C5EBBD232C96D1955970125AE3B4C0D261FB578C1EA4F7561C5C65DC1521D406F6879997367FABF499FF492E24F0BEE608700E69041E08D4275E3FD3FAFE66258EFB35AEA8B481B5A6044CB46D3ED5E83F56BEB3D7D507D97221B98D048810D781F4A3FE11BF9EC4449698977D2492450A49249253FFFD0F545C4FF008C4EAF6555B302B76D611BAD03F39DF98CFECFD35DB120093C05E49F58F299D42C75A3DAE3758E2D3CB4CFD077F65366745D0165E6321E5CEF09FE0500B6C3063BEAB731FA4FACE00031A15AF4FD5CA4004FB7C47299C4CDEDBC8FA176D98E240F9A67D3689241D0085DABFA0B07F364F9E8A27A25607BFBF642CA7DB0F195BED63B4E5DC93E4B6BA6E75B8B632FADE59635C08703F448D74FED23E6F406805D59F92C918EEA1EDF59D0D07846D69810FB874BCE6750C0A7319FE15B2E03B387B6C6FF009E15A5C9FD40EA0DB316EC133BAB8BDB3CC3FDAE6C7E6FB99BFF00EB8BAC520D4309145492492287FFD1F4BEA56D94F4ECAB6A67A96574BDCD67890D26178BE4E436DCC3756E916417B3F381FDD7FF00557A9FD78CDB70BEACE5DB5074BB654E7B625ADB1CDADCFD7E3B578F576DB6E4B1AE77A8EE1A5BC11E29935F8DED7A5543D1161E48F8ABFBA0F0B3F0AC1452C63DC180097B89846FDA7D38B8B7D6648E64A8C365B66C20440FBD57B6D1C4894BED3411A441E0FC50EEB6A92894808DCEDD20C42CCCFA5AC69B4090396F8857DD9D863DAEB181DE122551EA603F19EFACEF68D641F04112AA2EAFD40CCAA8EB1B0BE59995BAB6CF21CD22C6B35FE4B57A3AF1AFAAB60775EE955B61A1D90D744C086CBE355ECAA58ECD59EEA49249396BFFD2EC7FC6039FFF0036322B6805B6BAB6D93CED0EF51DB3F97EC5E4DD2719EFEAB435BF477833DA17B9753C56E5E0DD439BBB7365A39F737DECFF00A6D5E60CE9CDC6EA4735A36B43E764701DFBBFC951CEEFCD9B14411E20B2EAB539AC7B856EBDE44574B4C49F35CD5B856BB29AC7D35D6DD0B9F5D6F21B225C1EE7BBD57B98EF67D05DFB432C683A150B29683A8994D8E9D194C6EB521C5E8B8F686063C1630FD16927423C377BB6A1F5C3733F4558738105CE0CE48F00B6D8C656746C6B2A8E5869CB1BC4E911F34A97BC79C6B6BBC3454C7B5DF9EE6D85A3407F9CDCD7FD2F6FF36B63A4D6FB0963EB7D25CD2C7D6E248E396ADF652D23F8262D6308810913E0B386AF525E3E8C6B9996DD8E2C7D0F9DC342D2C3BB735DFD95EE5D36CC8B7A7E35B9436DEFA98EB47838805CBCD7A474F6E6F5E6D21BFA3BAD1EAC7768F75ADFF319EE5EA69F0B367E8C5940000EA7D5F45249249EC2FF00FFD3F545C87D63E962AB9CF608AEC97567B0275B2BFF00382EBD42F636CA5EC706905A7E9805BFDA94242C2E84F84DBE758B716FC116ECC1534BB8D3940B5D8C722C762B83E82E26B73782D9E5AAB65E8CDE7513C0D54574DB8D101B145D5923D4B036CB0CB6B7731FBCD553AADF8B558DF56D0C6CFD3F3FDD6A76E660DCCF4DD6B370E58F3B48FECBA1CD59F914F4EAAC171B9AE782769759B8347F247E6A0BA9D0C3CD73E96174CC7244481DD48DC6CB98C1AC91A2CEC3BC653DC699754247A9076E9FBA7F396D7D55C5FB575FC60DD5B4937BCF8067D1FF00C15CC486A691335125DDFA8FD22DA9B6752C9ADD5B9F2296BC169F71FD259B1DEEFE4B575A924A6028534E723236A4924915AFFFD4F545C87F8C3FACEDE97D3FF66E3387DB735A43E35D949F6BDFFC975BFCD57FF5C56FACFF008C2FAB3D2EA79665373B207D0C7C522C2E3E1EAB7F42CFE5FE9178F754EA995D533AFCFCB76EBF21DBDF13B40E19537FE0EA6FB18929EA7EAF87DDD16B78FA75BEC681E41DC2B61DBE0111AEA3C08597F5272DA6BCAC071F7022FA8444877B2D03FAAE0C5B5978CF07D5A7E9771E31FF007E504B42436E07407C1AD998CC25B6963773082D7F711FCA59B76332F25BB01DC7711A1D7FB2C62D6AB3AB70DAFF006B8685A794D65F8CD1BA40F824CA24D30461E391E2385D87F8BCC16B702EEA2E1FA5C87FA4C27B575FEEFF005ED2FDEBCFF3F3864DFE9547701C91C05ABF55BEBDB3A0E6E5F4FCF165DD3A1A6AF48073ABB401EB7B5C59BABBB77FDB8CFF0084471FCCC19E5E9F32FAC24B0B07EBCFD53CE6834F52A6B71FCCBCFA2E07C36E47A6B628CAC5C91BB1EEAEE6F8D6E0E1FF00409533592A4924929FFFD5F3C790DB67CCFE08B3C7F1FEE42B7E91F271054984ED03F224A6EF4BCE381D468CB3A358F02C93FE0DDED7FF009BF4D7A3978220F7E085E5860883001D08E5779D0335D9BD1F1DEE336563D2B7FAD5FB67FCCDAA3C8362CD865B8FAB63331F1EE1EF6EBE2342B1B2BA5D479B5E5BFBA5C56E5C3B9558D1EABC0689F25133B8ECC5663D65C1B0D0B9CB89FB45B63A25EE2E93CF25769D5AA15B6AA5A20BDC24792E53AAE31A2E06347EE8FCAA4C7BB1661A7934B77CC1E516AB363B7D6763C7E733DA7FCE67B9027B78A76B948D7763FE7175DD9FF28E5FF37E9FF3F67D1DDF43E97FE6692CBDC36F7E3F0DC92497FFD6F3D7EA5C3EEFBD335DF7478F74E43B79D0F27B79A6DAE1C34C6878292994F6FC8BA2FA979A6ACCBB09C4EDB87A9583FBCDD1FF00F4573DB5D27471F942360643F0B3B1F2C08F49E0BB9FA27DB67FD17212160AE81A907D2325A1CDD1360B40B20F309DDEE64B756B8483E47851A49610635F8287AB6BA34FA8D62CCF03B56013F12B0FEB4E3018B5DC06ADB003F0702174B6326C7D9ACB8CF0B0BEB1B5D6F4FB80693B61E34FDD28C4EA3CD131E93E4F1E743FED4E393F7849C0CC41FB9201C0F07EE2A66A33FCDF97FDF924B6BB67D13C781FDE49253FFFD9FFED105250686F746F73686F7020332E30003842494D0425000000000010000000000000000000000000000000003842494D03ED000000000010004800000001000100480000000100013842494D042600000000000E000000000000000000003F8000003842494D040D000000000004000000783842494D04190000000000040000001E3842494D03F3000000000009000000000000000001003842494D040A00000000000100003842494D271000000000000A000100000000000000013842494D03F5000000000048002F66660001006C66660006000000000001002F6666000100A1999A0006000000000001003200000001005A00000006000000000001003500000001002D000000060000000000013842494D03F80000000000700000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF03E800000000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF03E800000000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF03E800000000FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF03E800003842494D040000000000000200013842494D0402000000000004000000003842494D0408000000000010000000010000024000000240000000003842494D041E000000000004000000003842494D041A00000000033D0000000600000000000000000000009B0000006400000004004D0061007200790000000100000000000000000000000000000000000000010000000000000000000000640000009B00000000000000000000000000000000010000000000000000000000000000000000000010000000010000000000006E756C6C000

现在我正在尝试显示这样的图像...

<img src="data:image/jpeg;base64,<?php echo $profile_image;?>">

但它没有显示。在哪里我犯了错误。

Answer 1

剥离0x，然后使用hex2bin()或pack()获取二进制表示，然后再对base64_encode进行编码。

 $hex = substr($hex, 2);
 $binary =  pack("H*", $hex);

通过以下方式输出：

 <img src="data:image/jpeg;base64,<?php echo base64_encode($binary);?>">

您的代码段似乎是JPEG / JFIF文件，但是已截断或其他内容。

Answer 2

我建议您将图像保存到文件系统并从中加载，原因如下：

• 数据库价格昂贵，数据库难以扩展
• 它将许多系统资源用于次要任务
• Web Explorers，尤其是IE8，会给src超过34k的错误
• 您可以利用缓存..并且只生成不存在的图片......
• 创建缩略图和不同尺寸等

如果您解码输出http://pastebin.com/3MmQ9vcv，则可能不会显示http://codepad.viper-7.com/hRkAYQ

It would not show in most browsers

但如果你保存它......

  file_put_contents("x.jpg",  pack("H*", substr($hex, 2)));

并正常显示你会得到