2017-11-25 256 views
0

您好我正在使用jquery图像上载器,其中选择图像后,我得到它的base64代码。base64图像不在图像中显示

function readImage(input) { 
    if (input.files && input.files[0]) { 
     var FR= new FileReader(); 
     FR.onload = function(e) { 
      $('#img').show().attr("src", e.target.result); 
      $('#base').text(e.target.result); 
     }; 
     FR.readAsDataURL(input.files[0]); 
    } 
} 
$("#upload").change(function(){ 
    readImage(this); 
}); 

我正在存储的base64编码到我的数据库和检索它的另一个页面上我从我的表得到以下数据

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAIABAMAAAAGVsnJAAAAIVBMVEUAAAB fX1 fX1 fX1 fX1 fX1 fX1 fX1 fX1 fX1 fX1I2PRsAAAACnRSTlMAF/ClME Kb9vEsIrXWQAACWpJREFUeNrs3T1rVEEUBuBzs1 JlbGImkpREW6lVrqVhBBCKhESIZWCIqTSgEZSKSrCVordVrrxY/P SouEJG7uzH7k3rBz3vf5CYe9Z87MOTNrIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiMo755fWdty931pfnjU/25EGOI73vby4akWzjPk75 IIlBtlGF4X2OUKw0kXQ/nPzrnEPUTcemWsrOYboef4RZO8wgi9uM0Gri5HsvzKXWh2MqO8yApdzjKz32txZyDGG3jNzZiEHmCPQyjGm3lNzpNHB2PqOSqKsjQns akHtjGR2 bEKib02VyoYWJ3zYF6BxPrP7T0HSYA2jRQAwDij DgAyD CLYBgPgjqOHM7ljKujizfUvYVZTgmyUr66AE/XT3BKsoxSdLVD1HKXqpLoWPUZJblqQGSpPm2cgSSnPTEnSQAYizwBWU6IMl57gGIK0F5lCqr5aaLk4g3BHU8B TeEuSvbXklJH6dJaCQ/XQN6VsI3S7VlCWqhASmMjSzhCuSE4UQVyVoPHRQBpKbCJSvy2VHRQib4looUjnOvAJVTkuqWhjRMIa6EGBrAdjs6iMu8tBVuozB9LQIYKpVAMNlGhFOZnBxdBuoVwMAWwJYEsR4V6058EmhjAlgROpQC2JLCLAkyn4zkq1bMp10IBpi3xHIoQdUnXULFfNt22UISoFOqgGMvBYB1BHE3SGkJIugMzqNw1m2abCCFpj7QRQnI0jHNgU6yBCIaz8SbCKI4E5hBCshtYxDn4adNrE0Ec6 AWwii2Qx2EMWyHMkT57481EENQCDQRQ1AI1BBDsCGeRZz7MYkLOBc/bFqtIc79wfAmYghKwV1E e8PthHl/0yoizj3V hyRLnvEGeIYNgM0Aegjjj33TH6ADQQ5X8/rACgGE0AWhjC 6AUfQCaiPJ/JqYAoJgCwBIA iSoAKAYTQDoK0EFAMVoAkB/HkAfAEMUwahkB1H Z2ToGyP0rbEtxBDMydG3x kHJBYxhPdh4RlE b81NIc49/Py9IOS9KOy9MPS9OPysVqYoRIeNijofkwwVgpSFILDxsXdD4vr4qSuzlqOIPdzoro rwcU9ISGHlEJLgMsi0BoGaBZBPSUlh5To39Or4FTqHKgntQsyIJUOTDQHWLoCgVrQaY6MHQ0znEkrsfV9by /mAh L4 0ev6 pOVgSTAlwKKrg24vyjwj70zeXUiCMJ4jU4UPAUjbifFfU4qLpiTG6i3EHHBkwvicnI/eFJRwdxcEMlJJwpaf6XPjDGTWXq6J/Owa7763QR5PNvpqq qu6umpds/4SkyRMA8gKKEiFcEtQHF/XJTX10VZ/dnecByBygT2/r4 v6/H76BF37z8pVTAwiTAeWSgFMETAPg7ghcNYlBeqJFqlBVBU4YyOeF7ZIGHFjxMJyYMJpbozdJJEwwv4AiE5jfwBEYYT9ARCd50Z4TVIJRqgaYMY2boD3JJg YhWQZj2YE5ZnyEuyh2QTjpaMgGJT4IweL8UhEs8jXoJ9JJLgRvoPY67Nr7QE2CxHDzyKTzaSCeIHC8JazOdwNRO7L3BNPmXyyRsSwYXcWP/9BmbCOsmKCKCXt/HDca0AcJJSPJeSFNZHBeMsnVENBTAoGLuJvdeF/4TPJLss7gEwTV KMLpf0srZ7LgC8Q1Ks1bKsOjVTA6f03NWgIVawvNU0DOUMZuj2v//NBSijjuRaaxvy8g6/j00DR7G3p6cC/plQjahM7bMfwMiMojpia aeFhVy4eH2YJdJ7M/V4hHsM5itvVixBXER3M/V8jMbDA2V3MJnYqPYNfA6uf6uAmGdvV8cHFkiH5Hu/nSUohRttbQ1DAugfmfT eFDI6HIwdPK7j8gXMcuN11cNR SaJhwZNX8Smyyei1F/6ePtUSWklxC1eZ6xqiwnOXrry7NaxO08vnS2LaeFYSr gb/I1aofs4L6UjtE2s7VbcwWCR1J6hlWDAHtrrUBwU0zPZMjc/AoEN8V0zdYxN78CwU05p8j6XM3kJDkR9uV0zteyDZMBOdDpy5mgtm19xUfImjMRF BpUbSNbXlr esGdyWNz7gMQv16SBZsGYsaoDrPLhyvjIXhY1kjdKGr329egvBxJGyI8rR7y t4l0oIHo kjdHWmob9eexJwRoE526N5M3RnuZ6xB fLvzi4ZUTkcRJ6qXGofe/ 7hiBqxYAie vJI6Sr2VPeAluePVMLTgYWovPoD/ AkEY/YC54rA07OR8k5V9tkTJuSG79cFSblg6Bp7ww9ywts7EmTdrrCRPWInWdE EeQmhtqZA50zof8XZ4q4bLPDnjEgCzwwAjLIPWHvVQh0u2zQz1typN2z85y9w0INemKFZRB5zYQnTojjQ4xtLITdimKfzoT/RagU8KoOcquIPL87W8ge8HQHGPYAxg4w7QGAHFC1B9pcCFbuAZQdULoHUHZA6R6A2QHmPSDqgXWf6wHPzEAna9D3d5REvMTkoRdk4Qu1syPo4Au12Q218UYRCiHTYTIQGVgqBnGSYHkibOdQgO2oAFASNCdCb9/PSZDxGo/HlWBZRYgWAnJBAC0EZIMAXAjIBQG0EJANAnghIBME8ELAagaB7SyCb5QCqxBY7XLAazdsTkwLAHkBxZ4AiCFeao7j2IGFxiCeDFpFKRSwGLo0p5VnhP7PGaI1LIYdNKfV47E2D5S2fjasiF UgBoD01EQUAcuaEFEHbioBcHssLwtBlcLZytimL64oUsOMBxmGhcD8wOzviCkEE6JYUQzIGUJ4CaBJA0AJ4F0GsBqCmXbQ6CVwGI10Mr7EuxvVADrimX6Y7hZcJYHAS3xjDWO1hbMNAiBs A0DyJnwb95ELUW/FsPohqCCS wZQDzN2wZMBUCuMXwv4IYsS22Ou0xFgitAKyDpkoIWQcxPyBoHcR8EFsHNauENrBAvtIKiJ3hGd xhWAiBQHnoxYnpWANsT9MsJXwVAvjOoKJK4g5ITenS6DTITMG2KUA8wMCnBNPc10XQBdAY4BmAYD7w8qIu1oLqB8AnQaua2OkQbaxON7TlJY9Lfj/HiFcLywTxg oYXqiViA RI3TufeKhbD/84AURVEURVEURVEURVEURVEURVEURVEURVEURVEURVEURVEURVEURfndHhyQAAAAAAj6/7ofoQIAAAAAAAAAAPwEGcG4SMHdcSkAAAAASUVORK5CYII=" 

现在它要显示在我的图像标签图像我写下面的代码

$('#img').show().attr("src", convert[0].profile_picture); 

我得到的代码在转换[0] .profile_picture变量。

但图像没有显示。其中的屏幕截图是 screenshot of image tag in html

我提到的其他问题,并使用

var data = btoa(convert[0].profile_picture); 
$('#img').show().attr("src", data); 

尝试,但结果是相同的。在btoa中,我必须删除数据:image/png; base64,然后尝试转换它?我尝试了一些网上的base64图像转换像

i used this link to try and covert base64 to image

但我得到无效的MIME类型:应用程序/八位字节流错误。

我在做什么错?

更新: - 问题发生在我从数据库获取数据并在图像标记的src属性中使用它时,而不是在选择图像并预览它之后。

回答

2

您的base64数据无效。空间是不允许的。

+0

这个。而在问题中共享的代码似乎工作得很好:https://jsfiddle.net/Ld53q8f8/ – blex

+0

@Intervalia感谢您如此迅速的响应。我用 var str = convert [0] .profile_picture.replace(/ +/g,“”); $('#img')。show()。attr(“src”,str); 删除单词之间的所有空格。但静止图像不显示。 – rajesh

+0

如果有效,那么你需要问自己**为什么我的数据有空格**这可能是值得的,找出原因,然后删除源的空间,所以你不必每次都删除它们代码运行。 – Intervalia

0

非常感谢@Intervalia,我回顾了我的代码,发现JavaScript在发送数据时正在替换几个字符。所以我纠正了我的代码和使用

var image=encodeURIComponent(document.getElementById("base").innerHTML); 

然后发送图像到数据库。当我检索它时,它开始显示。

再次感谢。