2017-11-25 212 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); 

然後發送圖像到數據庫。當我檢索它時,它開始顯示。

再次感謝。